// METHODS — 3 cards (event popup / home visit / LINE)

function KBMethods() {
  const K = window.KB;
  const { Chat, Truck, Store, ArrowRight } = window.KBIcon;
  const iconMap = { Chat, Truck, Store };
  const getIcon = (key) => iconMap[key] || (() => null);

  return (
    <section style={{
      background: K.navy800, padding: '72px 24px 56px', position: 'relative',
    }}>
      <SectionHeader
        kicker="03 METHODS"
        title="選べる、3つの買取方法"
        note="出店会場 / 出張 / LINE。どの方法でも査定額は同一水準。"
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 32 }}>
        {(window.KBMethodsData || []).map((m, i) => {
          const Icon = getIcon(m.iconKey);
          const accent = m.line ? '#06C755' : K.gold;
          return (
            <article key={m.n} style={{
              position: 'relative',
              background: m.highlight
                ? `linear-gradient(160deg, rgba(201,169,97,0.12), ${K.navy600})`
                : `linear-gradient(160deg, ${K.navy700}, ${K.navy600})`,
              border: `1px solid ${m.highlight ? K.gold + '80' : 'rgba(201,169,97,0.12)'}`,
              borderRadius: 6,
              padding: '22px 20px 20px',
              overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 10, right: 14,
                fontFamily: K.fontLatin, fontWeight: 400, fontStyle: 'italic',
                fontSize: 72, lineHeight: 1,
                color: 'rgba(201,169,97,0.06)', pointerEvents: 'none',
              }}>{m.n}</div>

              {m.highlight && (
                <div style={{
                  position: 'absolute', top: 14, right: 14,
                  padding: '4px 10px',
                  background: K.gold, color: K.navy900,
                  fontFamily: K.fontSans, fontSize: 9.5, fontWeight: 800,
                  letterSpacing: '0.1em', borderRadius: 2,
                }}>{m.badge}</div>
              )}

              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                <div style={{
                  flexShrink: 0, width: 56, height: 56,
                  display: 'grid', placeItems: 'center',
                  background: m.line ? 'rgba(6,199,85,0.1)' : 'rgba(201,169,97,0.08)',
                  border: `1px solid ${m.line ? '#06C75540' : K.gold + '30'}`,
                  borderRadius: 4,
                }}>
                  <Icon size={28} color={accent} />
                </div>

                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: K.fontMono, fontSize: 9.5,
                    letterSpacing: '0.22em', color: K.inkMute,
                  }}>{m.en}</div>
                  <h3 style={{
                    margin: '4px 0 0',
                    fontFamily: K.fontSerif, fontWeight: 700, fontSize: 22,
                    color: K.ink, letterSpacing: '0.04em',
                  }}>{m.ja}</h3>
                  <div style={{
                    marginTop: 10,
                    fontFamily: K.fontSans, fontSize: 12.5, lineHeight: 1.75,
                    color: K.inkDim,
                  }}>{m.desc}</div>
                </div>
              </div>

              <div style={{
                marginTop: 18, paddingTop: 14,
                borderTop: '1px dashed rgba(201,169,97,0.18)',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{
                    width: 4, height: 4, borderRadius: '50%', background: accent,
                    boxShadow: `0 0 6px ${accent}`,
                  }} />
                  <span style={{
                    fontFamily: K.fontSans, fontWeight: 700, fontSize: 11,
                    letterSpacing: '0.1em', color: m.line ? accent : K.goldLight,
                  }}>{m.time}</span>
                  {!m.highlight && (
                    <span style={{
                      marginLeft: 8, padding: '2px 8px',
                      background: 'rgba(201,169,97,0.08)',
                      fontFamily: K.fontSans, fontSize: 9.5, fontWeight: 600,
                      color: K.goldLight, letterSpacing: '0.08em',
                    }}>{m.badge}</span>
                  )}
                </div>
                {m.line ? (
                  <a href="https://line.me/ti/p/xWmu96gEhw" target="_blank" rel="noopener noreferrer" style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    fontFamily: K.fontSans, fontSize: 12, fontWeight: 700,
                    color: '#06C755', textDecoration: 'none',
                  }}>
                    詳しく <ArrowRight size={14} color="#06C755" />
                  </a>
                ) : (
                  <a href="#form" onClick={e => {
                    e.preventDefault();
                    const el = document.querySelector('#form') || document.querySelector('[id="form"]');
                    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                  }} style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    fontFamily: K.fontSans, fontSize: 12, fontWeight: 700,
                    color: K.goldLight, textDecoration: 'none', cursor: 'pointer',
                  }}>
                    申込む <ArrowRight size={14} color={K.goldLight} />
                  </a>
                )}
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

function SectionHeader({ kicker, title, note }) {
  const K = window.KB;
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        fontFamily: K.fontMono, fontSize: 9.5, letterSpacing: '0.3em', color: K.gold,
      }}>
        <span style={{ width: 16, height: 1, background: K.gold }} />
        {kicker}
        <span style={{ width: 16, height: 1, background: K.gold }} />
      </div>
      <h2 style={{
        margin: '16px 0 0',
        fontFamily: K.fontSerif, fontWeight: 700, fontSize: 28,
        lineHeight: 1.3, color: K.ink, letterSpacing: '0.04em',
      }}>{title}</h2>
      {note && (
        <div style={{
          marginTop: 10,
          fontFamily: K.fontSans, fontSize: 12.5, color: K.inkDim, lineHeight: 1.7,
        }}>{note}</div>
      )}
    </div>
  );
}

// SCHEDULE SECTION removed (per business request — no schedule disclosure)

Object.assign(window, { KBMethods, SectionHeader });