/* ============================================
   App — orchestration + Tweaks
   ============================================ */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "A",
  "showSpec": false,
  "palette": "navy-gold"
}/*EDITMODE-END*/;

function ConceptCompare() {
  // Compact side-by-side concept comparison strip near the top of the spec section
  const C = [
    {
      id: "A", t: "Living Compass OS",
      sub: "自己理解のためのOS",
      bullets: ["中央に立体的な羅針盤", "ダークネイビー × アイボリー", "16タイプが星のように配置", "SaaS的で革新的"],
      use: "ファーストビュー / メインLP"
    },
    {
      id: "B", t: "Self Map Story",
      sub: "地図とノートのWeb体験",
      bullets: ["アイボリー × 紙の質感", "スクロールで深まる物語", "やさしく温かい", "記事メディアに最適"],
      use: "記事ページ / 回遊"
    },
    {
      id: "C", t: "Type Galaxy Cards",
      sub: "16タイプが星座のように",
      bullets: ["タイプ別カラー", "カードが主役", "SNSシェアしやすい", "拡散・SNS導線に強い"],
      use: "16タイプ一覧 / SNS"
    },
  ];
  return (
    <div className="cc">
      {C.map(c => (
        <div key={c.id} className="cc-card">
          <div className="cc-card__head">
            <span className="cc-card__id">{c.id}</span>
            <div>
              <div className="cc-card__t">{c.t}</div>
              <div className="cc-card__sub">{c.sub}</div>
            </div>
          </div>
          <ul className="cc-card__list">
            {c.bullets.map((b,i)=><li key={i}>{b}</li>)}
          </ul>
          <div className="cc-card__use">
            <span className="label-mono">FOR</span> {c.use}
          </div>
        </div>
      ))}
    </div>
  );
}

function SpecSheet() {
  return (
    <section className="section section-spec paper-tex" id="spec">
      <div className="wrap">
        <div className="spec__head reveal">
          <span className="eyebrow">Design exploration</span>
          <h2 className="h-section">3案の比較と、ハイブリッド構成</h2>
          <p className="lede" style={{maxWidth:760}}>
            「綺麗」より「驚き」を狙うため、3つの方向性を立て、それぞれの強みを役割で使い分けるハイブリッド設計を採用しています。
          </p>
        </div>

        <ConceptCompare />

        <div className="hybrid reveal">
          <div className="hybrid__head">
            <span className="kicker">HYBRID — recommended</span>
            <h3 className="h-card hybrid__t">A × B × C を、役割で使い分ける。</h3>
          </div>
          <ul className="hybrid__rows">
            <li><b>ファーストビュー</b><span>A — Living Compass OS</span><p>羅針盤と16タイプの星々で「普通の診断サイトではない」第一印象を作る。</p></li>
            <li><b>16タイプ探索</b><span>C — Type Galaxy Cards</span><p>タイプ別カラーとカード主役で、選びたくなる導線・SNSシェア導線にも展開可能。</p></li>
            <li><b>記事メディア</b><span>B — Self Map Story</span><p>紙・地図の質感とノート風カードで、やさしく読める自己理解メディアに。</p></li>
            <li><b>テーマ導線</b><span>A — Bento Grid</span><p>恋愛 / 仕事 / 人間関係 / 自己理解を、SaaS的なBentoで整理する。</p></li>
            <li><b>収益導線</b><span>B — 温度のあるカード</span><p>強い売り込みではなく、紙のしおりのような控えめな案内に。</p></li>
          </ul>
        </div>

        <div className="spec__grid">
          {/* Tokens */}
          <div className="spec-card reveal">
            <span className="kicker">DESIGN TOKENS</span>
            <h4 className="spec-card__t">Color</h4>
            <div className="tok-row">
              <i className="sw" style={{background:"#0B1426"}}/><span>ink-deep</span><code>#0B1426</code>
            </div>
            <div className="tok-row">
              <i className="sw" style={{background:"#14213D"}}/><span>ink-mid</span><code>#14213D</code>
            </div>
            <div className="tok-row">
              <i className="sw" style={{background:"#F6F1E6", border:"1px solid var(--on-light-line)"}}/><span>paper</span><code>#F6F1E6</code>
            </div>
            <div className="tok-row">
              <i className="sw" style={{background:"#EBE3D0", border:"1px solid var(--on-light-line)"}}/><span>paper-deep</span><code>#EBE3D0</code>
            </div>
            <div className="tok-row">
              <i className="sw" style={{background:"#C9A565"}}/><span>gold</span><code>#C9A565</code>
            </div>
            <div className="tok-row">
              <i className="sw" style={{background:"#6B82A8"}}/><span>blue-haze</span><code>#6B82A8</code>
            </div>

            <h4 className="spec-card__t" style={{marginTop:20}}>Type</h4>
            <div className="tok-row"><span>Display</span><code>Shippori Mincho B1</code></div>
            <div className="tok-row"><span>Body</span><code>Zen Kaku Gothic New</code></div>
            <div className="tok-row"><span>Mono</span><code>JetBrains Mono</code></div>

            <h4 className="spec-card__t" style={{marginTop:20}}>Radius / Shadow</h4>
            <div className="tok-row"><span>r-md / r-lg / r-xl</span><code>12 / 20 / 28</code></div>
            <div className="tok-row"><span>shadow-2</span><code>0 6 28 rgba(11,20,38,.12)</code></div>
          </div>

          {/* Components */}
          <div className="spec-card reveal">
            <span className="kicker">COMPONENTS</span>
            <ul className="spec-list">
              <li><b>&lt;HeaderBar /&gt;</b><span>ロゴ + ナビ + sub CTA</span></li>
              <li><b>&lt;Hero /&gt;</b><span>A案 — Living Compass + 16stars</span></li>
              <li><b>&lt;LivingCompass /&gt;</b><span>SVG羅針盤 / 針が動く</span></li>
              <li><b>&lt;TypeStar /&gt;</b><span>星のドット + ラベル</span></li>
              <li><b>&lt;ActiveTypeReadout /&gt;</b><span>選択タイプの読み上げカード</span></li>
              <li><b>&lt;ProblemSection /&gt;</b><span>5つの悩みカード</span></li>
              <li><b>&lt;ScrollStory /&gt;</b><span>4ステップのストーリー</span></li>
              <li><b>&lt;TypeGalaxy /&gt;</b><span>C案 — 16タイプカード</span></li>
              <li><b>&lt;BentoThemes /&gt;</b><span>4テーマ + ノート小カード</span></li>
              <li><b>&lt;PopularArticles /&gt;</b><span>B案 — 紙風記事カード</span></li>
              <li><b>&lt;ForWhom /&gt;</b><span>こんな人に</span></li>
              <li><b>&lt;Recommend /&gt;</b><span>控えめなアフィリ導線</span></li>
              <li><b>&lt;SiteFooter /&gt;</b><span>免責 + 構造</span></li>
            </ul>
          </div>

          {/* Motion */}
          <div className="spec-card reveal">
            <span className="kicker">MOTION SPEC</span>
            <ul className="spec-list">
              <li><b>Ambient drift</b><span>羅針盤9s / 星座 12-18s</span></li>
              <li><b>Slow spin</b><span>外周リング 90s linear</span></li>
              <li><b>Needle</b><span>1200ms cubic-bezier(.22,.61,.36,1)</span></li>
              <li><b>Reveal</b><span>900ms / translateY(24px)→0</span></li>
              <li><b>Card hover</b><span>400ms / translateY(-2px) + glow</span></li>
              <li><b>Twinkle</b><span>4s ease-in-out alternate</span></li>
              <li><b>Reduce motion</b><span>prefers-reduced-motion で全アニメ停止</span></li>
            </ul>
          </div>

          {/* Next.js */}
          <div className="spec-card reveal">
            <span className="kicker">NEXT.JS — file layout</span>
            <pre className="spec-code">{`app/
├ layout.tsx           # フォント + メタ
├ page.tsx             # トップページ
├ types/
│  ├ page.tsx          # 16タイプ一覧
│  └ [code]/page.tsx   # タイプ詳細
├ themes/
│  ├ love/page.tsx
│  ├ work/page.tsx
│  ├ relations/page.tsx
│  └ self/page.tsx
└ articles/[slug]/page.tsx

components/
├ Hero.tsx
├ LivingCompass.tsx
├ TypeStar.tsx
├ TypeGalaxy.tsx
├ BentoThemes.tsx
├ ScrollStory.tsx
├ ArticleCard.tsx
├ Recommend.tsx
└ SiteFooter.tsx

lib/types.ts           # TYPES_16, STAR_POSITIONS
content/articles/*.mdx # 記事 (MDX)
styles/tokens.css      # design tokens
`}</pre>
          </div>

          {/* Future content */}
          <div className="spec-card reveal spec-card--wide">
            <span className="kicker">CONTENT ROADMAP</span>
            <h4 className="spec-card__t">今後追加すべき記事・カテゴリ</h4>
            <div className="road-grid">
              <div>
                <b>恋愛軸の拡張</b>
                <ul>
                  <li>各16タイプ × 恋愛の傾向</li>
                  <li>タイプ別「すれ違いやすい瞬間」</li>
                  <li>長続きする距離感の設計</li>
                </ul>
              </div>
              <div>
                <b>仕事・キャリア軸</b>
                <ul>
                  <li>タイプ別の向いている働き方</li>
                  <li>避けたい職場サイン</li>
                  <li>強みを活かす1週間の使い方</li>
                </ul>
              </div>
              <div>
                <b>人間関係軸</b>
                <ul>
                  <li>消耗しやすい関係パターン</li>
                  <li>境界線の引き方</li>
                  <li>家族 / 親しい人との距離</li>
                </ul>
              </div>
              <div>
                <b>自己理解軸</b>
                <ul>
                  <li>今週の小さな行動シリーズ</li>
                  <li>タイプ別 価値観ワーク</li>
                  <li>「自分を責めない」整理法</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const variant = tweaks.heroVariant;

  // Reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [variant, tweaks.showSpec]);

  return (
    <>
      <HeaderBar />
      <main>
        <Hero activeIdx={activeIdx} setActiveIdx={setActiveIdx}/>
        <ProblemSection />
        <TypeGalaxy activeIdx={activeIdx} setActiveIdx={setActiveIdx}/>
        <ScrollStory />
        <BentoThemes />
        <PopularArticles />
        <ForWhom />
        <Recommend />
        {tweaks.showSpec && <SpecSheet />}
      </main>
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Concept toggle">
          <TweakRadio
            label="Hero focus"
            value={tweaks.heroVariant}
            options={[
              { value: "A", label: "A · Compass" },
              { value: "B", label: "B · Map" },
              { value: "C", label: "C · Galaxy" },
            ]}
            onChange={v => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Show design spec sheet"
            value={tweaks.showSpec}
            onChange={v => setTweak("showSpec", v)}
          />
        </TweakSection>
        <TweakSection title="Active type (compass)">
          <TweakSelect
            label="Pointing to"
            value={String(activeIdx)}
            options={TYPES_16.map((t,i)=>({ value: String(i), label: `${t[0]} — ${t[1]}` }))}
            onChange={v => setActiveIdx(Number(v))}
          />
        </TweakSection>
      </TweaksPanel>

      {/* Hero overlay variants — apply class to body for A/B/C visual flavor */}
      <BodyClassSync variant={variant}/>
    </>
  );
}

function BodyClassSync({ variant }) {
  React.useEffect(() => {
    document.body.classList.remove("v-A", "v-B", "v-C");
    document.body.classList.add(`v-${variant}`);
  }, [variant]);
  return null;
}

window.App = App;