/* ============================================
   Hero — Living Compass OS (A案)
   ============================================ */

function HeaderBar() {
  return (
    <header className="site-header">
      <div className="wrap site-header__inner">
        <a className="brand" href="#top">
          <span className="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 32 32" width="28" height="28">
              <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1"/>
              <circle cx="16" cy="16" r="3" fill="currentColor"/>
              <line x1="16" y1="2" x2="16" y2="30" stroke="currentColor" strokeWidth=".6" opacity=".4"/>
              <line x1="2" y1="16" x2="30" y2="16" stroke="currentColor" strokeWidth=".6" opacity=".4"/>
              <polygon points="16,4 17.5,16 14.5,16" fill="currentColor"/>
            </svg>
          </span>
          <span className="brand-text">
            <span className="brand-title">わたし羅針盤</span>
            <span className="brand-sub">16タイプ自己理解ガイド</span>
          </span>
        </a>
        <nav className="site-nav">
          <a href="types.html">16タイプ</a>
          <a href="themes.html">テーマ</a>
          <a href="articles.html">記事</a>
          <a href="about.html">わたし羅針盤について</a>
        </nav>
        <a href="types.html" className="btn btn-ghost btn-sm">
          自分のタイプから読む
          <svg className="arr" viewBox="0 0 16 16" fill="none">
            <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4"/>
          </svg>
        </a>
      </div>
    </header>
  );
}

function Hero({ activeIdx, setActiveIdx }) {
  return (
    <section className="hero ink-tex" id="top">
      {/* Faint constellation strokes behind compass */}
      <svg className="hero-constellation" viewBox="0 0 1440 900" aria-hidden="true">
        <g stroke="rgba(201,165,101,.18)" strokeWidth=".6" fill="none">
          <path d="M 80 220 L 220 160 L 360 240 L 480 180 L 560 280"/>
          <path d="M 980 140 L 1120 220 L 1260 180 L 1360 280"/>
          <path d="M 120 720 L 240 660 L 360 740 L 480 680"/>
          <path d="M 980 740 L 1120 680 L 1260 760"/>
        </g>
        <g fill="rgba(246,241,230,.5)">
          {[
            [80,220],[220,160],[360,240],[480,180],[560,280],
            [980,140],[1120,220],[1260,180],[1360,280],
            [120,720],[240,660],[360,740],[480,680],
            [980,740],[1120,680],[1260,760]
          ].map(([x,y],i)=>(
            <circle key={i} cx={x} cy={y} r="1.5" className="twinkle"
              style={{ animationDelay: `${i*0.3}s` }}/>
          ))}
        </g>
      </svg>

      <div className="wrap hero__grid">
        <div className="hero__left">
          <div className="kicker-dark">無料で読める自己理解メディア / FREE GUIDE</div>
          <h1 className="h-display hero__title">
            性格タイプを、<br/>
            <span className="hero__title-em">人生の地図</span>に変える。
          </h1>
          <p className="hero__lede">
            タイプで決めつけるのではなく、自分らしく選ぶためのヒントに。<br/>
            恋愛・仕事・人間関係の傾向を、やさしく整理する無料の自己理解ガイド。
          </p>

          <div className="hero__cta">
            <a href="#types" className="btn btn-primary">
              自分のタイプから読む
              <svg className="arr" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6"/>
              </svg>
            </a>
            <a href="#themes" className="btn btn-ghost">テーマから探す</a>
          </div>

          <div className="hero__meta">
            <div className="hero__meta-row">
              <span className="label-mono" style={{color:"var(--gold)"}}>16</span>
              <span>性格タイプ</span>
            </div>
            <div className="hero__meta-divider" />
            <div className="hero__meta-row">
              <span className="label-mono" style={{color:"var(--gold)"}}>4</span>
              <span>テーマ軸</span>
            </div>
            <div className="hero__meta-divider" />
            <div className="hero__meta-row">
              <span className="label-mono" style={{color:"var(--gold)"}}>120+</span>
              <span>整理ノート</span>
            </div>
          </div>

          <p className="disclaimer disclaimer-dark hero__disclaimer">
            ※ 本サイトは公式MBTI診断ではありません。16タイプ性格傾向をもとに自己理解を深めるための参考コンテンツです。
          </p>
        </div>

        <div className="hero__right">
          <LivingCompass activeIdx={activeIdx} setActiveIdx={setActiveIdx} />
        </div>
      </div>

      {/* Bottom scroll hint */}
      <div className="hero__scroll" aria-hidden="true">
        <span className="label-mono">scroll</span>
        <span className="hero__scroll-line"/>
      </div>
    </section>
  );
}

window.HeaderBar = HeaderBar;
window.Hero = Hero;