// themes.jsx — 3 themes tabbed section with expanded per-theme detail
function Themes({ onContactClick }) {
  const [active, setActive] = React.useState('ai');
  const theme = window.THEMES.find((t) => t.id === active);

  return (
    <section className="section themes" id="themes">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="section-num">SECTION 01</span>
            <span className="eyebrow">OUR SERVICES</span>
          </div>
          <div>
            <h2>3つの専門領域を、横断視点でひとつに</h2>
            <p className="intro">
              攻めのDX／AX、守りの情報セキュリティ＆事業継続（BCP）、そしてそれらを支えるITインフラ。
              いずれも単独施策では完結せず、相互に絡み合います。スカイイデアは、構想から構築・運用までを一社で担い、サイロ化しがちなIT投資をひとつの設計でつなぎます。
            </p>
          </div>
        </div>

        <div className="theme-tabs" role="tablist">
          {window.THEMES.map((t) =>
          <button
            key={t.id}
            className={`theme-tab ${active === t.id ? 'is-active' : ''}`}
            onClick={() => setActive(t.id)}
            role="tab"
            aria-selected={active === t.id}>
            
              <span className="nlabel">{t.label}</span>
              <span className="title">
                <span className="dot" style={{ background: t.color }}></span>
                {t.tabTitle || t.title}
              </span>
              <span className="en-title">{t.en}</span>
              <span className="progress-bar" style={{ background: t.color }}></span>
            </button>
          )}
        </div>

        <div className="theme-detail" key={theme.id}>
          {/* Lead */}
          <div className="theme-lead">
            {theme.stance &&
            <div className="stance-row">
                <span className="stance-pill" style={{ background: theme.color }}>{theme.stance}</span>
                <span className="stance-role">{theme.role}</span>
                <span className="stance-en">{theme.stanceEn}</span>
              </div>
            }
            <span className="badge" style={{
              background: `color-mix(in oklab, ${theme.color} 12%, white)`,
              color: theme.color
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: theme.color, display: 'inline-block'
              }}></span>
              {theme.en}
            </span>
            <h3>{theme.title}</h3>
            {theme.tagline && <p className="theme-tagline" style={{ color: theme.color }}>{theme.tagline}</p>}
            <p className="lead">{theme.lead}</p>
          </div>

          {/* Reuse highlight (infra) */}
          {theme.highlight &&
          <div className="highlight-box">
              <span className="hl-badge" style={{ background: theme.color }}>{theme.highlight.badge}</span>
              <div className="hl-body">
                <h4>{theme.highlight.title}</h4>
                <p>{theme.highlight.body}</p>
              </div>
            </div>
          }

          {/* Provided services (infra) */}
          {theme.provides &&
          <div className="theme-block">
              <div className="theme-block-head">
                <span className="block-num" style={{ color: theme.color }}>◎</span>
                <h4>{theme.provides.label}</h4>
              </div>
              <div className="provide-grid">
                {theme.provides.items.map((it, i) =>
                <div className="provide-card" key={i}>
                    <span className="pv-dot" style={{ background: theme.color }}></span>
                    <h5>{it.ttl}</h5>
                    <p>{it.desc}</p>
                  </div>
                )}
              </div>
            </div>
          }

          {/* Challenges */}
          <div className="theme-block">
            <div className="theme-block-head">
              <span className="block-num">01</span>
              <h4>こんなお悩みはありませんか</h4>
            </div>
            <div className="challenge-grid">
              {theme.challenges.map((c, i) =>
              <div className="challenge-card" key={i}>
                  <span className="cn" style={{ color: theme.color }}>{String(i + 1).padStart(2, '0')}</span>
                  <h5>{c.title}</h5>
                  <p>{c.body}</p>
                </div>
              )}
            </div>
          </div>

          {/* Approach */}
          <div className="theme-block">
            <div className="theme-block-head">
              <span className="block-num">02</span>
              <h4>当社のアプローチ</h4>
            </div>

            <div className="approach-steps">
              {theme.approach.steps.map((s, i) =>
              <div className="approach-step" key={i}>
                  <div className="as-num" style={{ color: theme.color }}>{s.n}</div>
                  <div className="as-body">
                    <div className="as-head">
                      <h5>{s.ttl}</h5>
                      <span className="as-dur">{s.dur}</span>
                    </div>
                    <p>{s.desc}</p>
                  </div>
                </div>
              )}
            </div>

            <div className="approach-perspectives">
              <span className="apl">当社ならではの視点</span>
              <div className="perspective-grid">
                {theme.approach.perspectives.map((p, i) =>
                <div className="perspective-card" key={i}>
                    <div className="pp-dot" style={{ background: theme.color }}></div>
                    <h6>{p.ttl}</h6>
                    <p>{p.desc}</p>
                  </div>
                )}
              </div>
            </div>

            <div className="approach-engagement">
              <span className="ae-label">関与の濃度（目安）</span>
              <p>{theme.approach.engagement}</p>
            </div>
          </div>

          {/* BCP sub-section (security theme) */}
          {theme.bcpBlock &&
          <div className="bcp-block">
              <div className="bcp-head">
                <span className="bcp-tag">BCP</span>
                <h4>{theme.bcpBlock.label}</h4>
              </div>
              <p className="bcp-lead">{theme.bcpBlock.lead}</p>
              <div className="bcp-split">
                {theme.bcpBlock.split.map((s, i) =>
                <div className={`bcp-col ${s.linkInfra ? 'is-link' : ''}`} key={i}>
                    <span className="bcp-col-tag">{s.tag}</span>
                    <h5>{s.ttl}</h5>
                    <p>{s.desc}</p>
                    {s.linkInfra && <span className="bcp-link-arrow">→ サービス③ ITインフラ 構築・運用保守へ</span>}
                  </div>
                )}
              </div>
              <p className="bcp-note">{theme.bcpBlock.note}</p>
            </div>
          }
        </div>
      </div>
    </section>);

}

window.Themes = Themes;