/* ============================================
   Sections — Problem, Bento Themes, Scrollytelling,
   Type Galaxy (C), Articles (B), Recommend, Footer
   ============================================ */

/* ---------- Problem ---------- */
function ProblemSection() {
  const items = [
    "自分のタイプ説明は読んだことがある",
    "でも恋愛で、同じ悩みを繰り返す",
    "向いている仕事や環境がわからない",
    "人間関係で疲れやすい理由を知りたい",
    "自分らしい次の一歩を見つけたい",
  ];
  return (
    <section className="section section-problem paper-tex" id="about">
      <div className="wrap">
        <div className="prob__head reveal">
          <span className="eyebrow">問いを、ほどく</span>
          <h2 className="h-section">
            タイプは知っている。<br/>
            でも、<em className="emph">どう活かせばいいかわからない。</em>
          </h2>
          <p className="lede prob__lede">
            16タイプ診断で自分のタイプを知っても、恋愛や仕事、人間関係の中でどう活かせばいいのかまでは、意外とわかりにくいものです。
            わたし羅針盤は、タイプ説明を読むだけで終わらせず、日常で使える自己理解のヒントに変えていきます。
          </p>
        </div>

        <ul className="prob__cards">
          {items.map((t, i) => (
            <li key={i} className="prob-card reveal" style={{transitionDelay:`${i*80}ms`}}>
              <span className="prob-card__num">0{i+1}</span>
              <span className="prob-card__line"/>
              <p className="prob-card__text">{t}</p>
              <span className="prob-card__corner" aria-hidden="true"/>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ---------- Scrollytelling ---------- */
function ScrollStory() {
  const steps = [
    { n: "01", t: "タイプを知る", d: "まず、自分の傾向をやさしく言葉にする。決めつけではなく、地図の現在地として。" },
    { n: "02", t: "日常に活かす", d: "恋愛・仕事・人間関係のクセを、具体的な場面に重ねて整理していく。" },
    { n: "03", t: "自分を責めずに整理する", d: "うまくいかなかった理由を、自分の弱さではなく構造として見る。" },
    { n: "04", t: "小さな行動に変える", d: "完璧な決断ではなく、今週できる「小さな一歩」に変えていく。" },
  ];
  return (
    <section className="section section-story ink-tex">
      <div className="wrap">
        <div className="story__head reveal">
          <span className="eyebrow" style={{color:"var(--gold)"}}>The journey</span>
          <h2 className="h-section" style={{color:"var(--on-dark-1)"}}>
            タイプを知る、から<br/>
            <em className="emph emph-light">小さな行動</em>へ。
          </h2>
        </div>

        <ol className="story__steps">
          {steps.map((s, i) => (
            <li key={s.n} className="story-step reveal" style={{transitionDelay:`${i*100}ms`}}>
              <div className="story-step__rail">
                <span className="story-step__num">{s.n}</span>
                <span className="story-step__line"/>
              </div>
              <div className="story-step__body">
                <h3 className="story-step__t">{s.t}</h3>
                <p className="story-step__d">{s.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ---------- Type Galaxy (C) ---------- */
function TypeGalaxy({ activeIdx, setActiveIdx }) {
  const [filter, setFilter] = React.useState("all");
  const groups = [
    { id: "all",       jp: "すべて",     en: "all 16" },
    { id: "diplomat",  jp: "外交官",     en: "diplomat" },
    { id: "analyst",   jp: "分析家",     en: "analyst" },
    { id: "sentinel",  jp: "番人",       en: "sentinel" },
    { id: "explorer",  jp: "探検家",     en: "explorer" },
  ];
  return (
    <section className="section section-galaxy paper-tex" id="types">
      <div className="wrap">
        <div className="galaxy__head reveal">
          <span className="eyebrow">16 types — pick yours</span>
          <h2 className="h-section">
            16タイプから、<br/>
            <em className="emph">自分の星</em>を見つける。
          </h2>
          <p className="lede galaxy__lede">
            タイプは、空に浮かぶ星のようなもの。あなたの今の傾向を映す、ひとつの座標です。気になるタイプをひらいて、恋愛・仕事・人間関係のヒントを読んでみてください。
          </p>

          <div className="galaxy__filter">
            {groups.map(g => (
              <button key={g.id}
                className={`gf-chip ${filter===g.id ? "is-active":""}`}
                onClick={()=>setFilter(g.id)}>
                <span className="gf-jp">{g.jp}</span>
                <span className="gf-en">{g.en}</span>
              </button>
            ))}
          </div>
        </div>

        <ul className="galaxy__grid">
          {TYPES_16.map((t, i) => {
            const dim = filter !== "all" && t[2] !== filter;
            return (
              <li key={t[0]}
                className={`tc tc--${t[2]} ${dim ? "tc--dim":""} ${activeIdx===i ? "tc--active":""}`}
                style={{transitionDelay: `${(i%4)*60}ms`}}>
                <button className="tc__btn" onClick={() => setActiveIdx(i)}>
                  <span className="tc__star" aria-hidden="true">
                    <span className="tc__star-dot"/>
                  </span>
                  <span className="tc__code">{t[0]}</span>
                  <span className="tc__jp">{t[1]}</span>
                  <span className="tc__blurb">{t[3]}</span>
                  <span className="tc__cta">
                    読む
                    <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4"/>
                    </svg>
                  </span>
                  <span className="tc__corner" aria-hidden="true"/>
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

/* ---------- Bento Themes ---------- */
function BentoThemes() {
  const t = TYPES_16; // not used here directly
  return (
    <section className="section section-bento paper-tex" id="themes">
      <div className="wrap">
        <div className="bento__head reveal">
          <span className="eyebrow">Themes — 4 directions</span>
          <h2 className="h-section">
            テーマから、<br/>
            <em className="emph">読みたい記事</em>を選ぶ。
          </h2>
        </div>

        <div className="bento">
          {/* Big — 恋愛 */}
          <a href="#articles" className="bento-card bento-card--lg bento-card--rose">
            <div className="bc__top">
              <span className="kicker">01 / LOVE</span>
              <span className="bc__icon" aria-hidden="true">
                <svg viewBox="0 0 40 40" width="40" height="40">
                  <circle cx="20" cy="20" r="18" fill="none" stroke="currentColor" strokeWidth=".6"/>
                  <path d="M12 18c0-3 3-5 5-3 1 1 2 2 3 4 1-2 2-3 3-4 2-2 5 0 5 3 0 5-8 9-8 9s-8-4-8-9z"
                    fill="none" stroke="currentColor" strokeWidth="1"/>
                </svg>
              </span>
            </div>
            <h3 className="h-card bc__title">恋愛</h3>
            <p className="bc__lede">
              好きになり方、距離感、相性、すれ違いの傾向を整理します。タイプで決めるのではなく、自分にとっての心地よさを知るために。
            </p>
            <span className="bc__cta">恋愛の記事を読む →</span>
          </a>

          {/* 仕事 */}
          <a href="#articles" className="bento-card bento-card--gold">
            <span className="kicker">02 / WORK</span>
            <h3 className="h-card bc__title">仕事</h3>
            <p className="bc__lede">力を発揮しやすい環境、苦手になりやすい働き方、強みの活かし方を整理します。</p>
            <span className="bc__cta">仕事の記事を読む →</span>
          </a>

          {/* 人間関係 */}
          <a href="#articles" className="bento-card bento-card--blue">
            <span className="kicker">03 / RELATIONS</span>
            <h3 className="h-card bc__title">人間関係</h3>
            <p className="bc__lede">疲れやすい関係、安心できる距離感、コミュニケーションのクセを整理します。</p>
            <span className="bc__cta">人間関係の記事を読む →</span>
          </a>

          {/* 自己理解 — featured */}
          <a href="#articles" className="bento-card bento-card--ink bento-card--lg2">
            <div className="bc__top">
              <span className="kicker kicker-dark">04 / SELF</span>
              <span className="bc__icon" aria-hidden="true" style={{color:"var(--gold)"}}>
                <svg viewBox="0 0 40 40" width="40" height="40">
                  <circle cx="20" cy="20" r="18" fill="none" stroke="currentColor" strokeWidth=".6"/>
                  <circle cx="20" cy="20" r="8"  fill="none" stroke="currentColor" strokeWidth=".6"/>
                  <line x1="20" y1="4" x2="20" y2="36" stroke="currentColor" strokeWidth=".6" opacity=".5"/>
                  <line x1="4" y1="20" x2="36" y2="20" stroke="currentColor" strokeWidth=".6" opacity=".5"/>
                  <polygon points="20,8 21.5,20 18.5,20" fill="currentColor"/>
                </svg>
              </span>
            </div>
            <h3 className="h-card bc__title" style={{color:"var(--on-dark-1)"}}>自己理解</h3>
            <p className="bc__lede" style={{color:"var(--on-dark-2)"}}>
              価値観、強み、弱み、そして今週できる小さな行動。タイプを地図にして、いまの自分を整理します。
            </p>
            <span className="bc__cta" style={{color:"var(--gold)"}}>自己理解の記事を読む →</span>
          </a>

          {/* small accent — 今週の小さな行動 */}
          <div className="bento-card bento-card--cream bento-card--note">
            <span className="label-mono" style={{color:"var(--gold)"}}>NOTE</span>
            <p className="bc__note">
              「タイプ」は答えではなく、入口。<br/>
              読んだあとに残る、小さな一歩を大切にしています。
            </p>
            <span className="bc__sig">— わたし羅針盤</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Popular Articles (B — Self Map Story style) ---------- */
function ArticleCard({ a, i }) {
  return (
    <article className="art-card reveal" style={{transitionDelay:`${i*60}ms`}}>
      <div className="art-card__paper">
        <div className="art-card__head">
          <span className="art-card__type">{a.code}</span>
          <span className="art-card__cat">{a.cat}</span>
        </div>
        <h3 className="art-card__title">{a.title}</h3>
        <p className="art-card__lede">{a.lede}</p>
        <div className="art-card__foot">
          <span className="label-mono">{a.read}</span>
          <span className="art-card__arrow">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4"/>
            </svg>
          </span>
        </div>
        <span className="art-card__pin" aria-hidden="true"/>
      </div>
    </article>
  );
}

function PopularArticles() {
  const A = [
    { code: "INFP", cat: "恋愛", read: "8 min read",
      title: "INFPの恋愛傾向｜好きになる相手・疲れやすい関係・長続きする距離感",
      lede: "理想を映し込みやすいINFPが、現実の関係を心地よく続けるための距離感を整理します。" },
    { code: "ENFP", cat: "恋愛", read: "7 min read",
      title: "ENFPの恋愛傾向｜自由さと安心感を両立する付き合い方",
      lede: "好奇心が強いENFPが、深い関係をすり減らさずに続けるための鍵を考えます。" },
    { code: "INFJ", cat: "人間関係", read: "9 min read",
      title: "INFJが疲れやすい理由｜人間関係で消耗しないための考え方",
      lede: "繊細に空気を読みすぎるINFJが、自分の輪郭を取り戻すための整理。" },
    { code: "ISFJ", cat: "恋愛", read: "8 min read",
      title: "ISFJの恋愛傾向｜尽くしすぎないための距離感",
      lede: "尽くす優しさを否定せずに、自分のための余白を残す関係づくり。" },
    { code: "INFP", cat: "仕事", read: "10 min read",
      title: "INFPに向いている仕事｜価値観を大切にできる働き方",
      lede: "「意味」を軸に動くINFPが、消耗しない働き方を見つけるための視点。" },
    { code: "ENFP", cat: "仕事", read: "9 min read",
      title: "ENFPに向いている仕事｜自由に動ける環境と避けたい職場",
      lede: "ENFPの可能性が枯れない、環境とリズムの作り方。" },
    { code: "INFJ", cat: "仕事", read: "10 min read",
      title: "INFJに向いている仕事｜深く考える力を活かせる環境",
      lede: "INFJの内省を「成果」につなげる、距離と深さの設計。" },
    { code: "ISFJ", cat: "仕事", read: "8 min read",
      title: "ISFJに向いている仕事｜安心感と信頼を積み上げる働き方",
      lede: "目立たなくても確実に積み上げるISFJの強みを、消耗させない働き方。" },
  ];
  return (
    <section className="section section-articles paper-tex" id="articles">
      <div className="wrap">
        <div className="art__head reveal">
          <span className="eyebrow">Popular notes</span>
          <h2 className="h-section">まず読まれている記事</h2>
          <p className="lede art__lede">
            タイプ別の整理ノート。読み終わったあとに、ひとつだけ「やってみたい小さな行動」が残るように書いています。
          </p>
        </div>

        <div className="art__grid">
          {A.map((a, i) => <ArticleCard key={i} a={a} i={i}/>)}
        </div>

        <div className="art__foot reveal">
          <a href="#" className="btn btn-ghost-light">記事を一覧で見る
            <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>
      </div>
    </section>
  );
}

/* ---------- For Whom ---------- */
function ForWhom() {
  const items = [
    "16タイプ診断は好きだけど、説明を読んで終わっている",
    "恋愛で同じパターンを繰り返しやすい",
    "自分に合う働き方や環境を知りたい",
    "人間関係で疲れやすい理由を知りたい",
    "今の自分に合う小さな行動を見つけたい",
    "占いは好きだけど、怪しすぎるものは苦手",
  ];
  return (
    <section className="section section-forwhom ink-tex">
      <div className="wrap forwhom__grid">
        <div className="reveal">
          <span className="eyebrow" style={{color:"var(--gold)"}}>For you</span>
          <h2 className="h-section" style={{color:"var(--on-dark-1)"}}>
            こんな人に、<br/>
            <em className="emph emph-light">読んでほしい。</em>
          </h2>
          <p className="lede" style={{color:"var(--on-dark-2)"}}>
            診断結果を「答え」として渡すのではなく、自分で選ぶための材料を、静かに置いておく場所です。
          </p>
        </div>
        <ul className="fw__list">
          {items.map((t,i)=>(
            <li key={i} className="fw__item reveal" style={{transitionDelay:`${i*70}ms`}}>
              <span className="fw__check" aria-hidden="true">
                <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8.5l3 3 7-8" fill="none" stroke="currentColor" strokeWidth="1.6"/></svg>
              </span>
              <span>{t}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ---------- Recommend (gentle affiliate area) ---------- */
function Recommend() {
  const cards = [
    { t: "おすすめの本を見る", d: "心理・自己理解を、やさしい言葉で深める書籍を厳選。", tag: "BOOKS" },
    { t: "キャリアを考える",   d: "強みの活かし方や、合う環境の選び方を整理するサービス。", tag: "CAREER" },
    { t: "恋愛のヒントを見る", d: "関係性のクセを言葉にする、対話とワークのツール。", tag: "LOVE" },
  ];
  return (
    <section className="section section-recommend paper-tex">
      <div className="wrap">
        <div className="rec__head reveal">
          <span className="eyebrow">For deeper steps</span>
          <h2 className="h-section">もっと深く自己理解したい方へ</h2>
          <p className="lede rec__lede">
            わたし羅針盤では、自己理解を深める本、キャリアを考えるサービス、恋愛や人間関係を整理するためのツールなども紹介していきます。必要な方だけ、参考にしてください。
          </p>
        </div>
        <div className="rec__grid">
          {cards.map((c,i)=>(
            <a key={i} href="#" className="rec-card reveal" style={{transitionDelay:`${i*80}ms`}}>
              <span className="label-mono rec-card__tag">{c.tag}</span>
              <h3 className="h-card rec-card__t">{c.t}</h3>
              <p className="rec-card__d">{c.d}</p>
              <span className="rec-card__cta">
                見てみる
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4"/>
                </svg>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function SiteFooter() {
  return (
    <footer className="site-footer ink-tex">
      <div className="wrap footer__inner">
        <div className="footer__brand">
          <div className="brand brand--lg">
            <span className="brand-mark" aria-hidden="true" style={{color:"var(--gold)"}}>
              <svg viewBox="0 0 32 32" width="36" height="36">
                <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" style={{color:"var(--on-dark-1)"}}>わたし羅針盤</span>
              <span className="brand-sub" style={{color:"var(--on-dark-3)"}}>16タイプ自己理解ガイド</span>
            </span>
          </div>
          <p className="footer__copy">
            性格タイプは、答えではなく、自分を知る入口。<br/>
            自分らしく選ぶための、無料の自己理解メディアです。
          </p>
        </div>
        <div className="footer__cols">
          <div>
            <h4 className="footer__h">タイプ</h4>
            <ul><li>外交官</li><li>分析家</li><li>番人</li><li>探検家</li></ul>
          </div>
          <div>
            <h4 className="footer__h">テーマ</h4>
            <ul><li>恋愛</li><li>仕事</li><li>人間関係</li><li>自己理解</li></ul>
          </div>
          <div>
            <h4 className="footer__h">サイトについて</h4>
            <ul><li>わたし羅針盤とは</li><li>編集方針</li><li>免責事項</li><li>お問い合わせ</li></ul>
          </div>
        </div>
      </div>
      <div className="wrap footer__bottom">
        <p className="disclaimer disclaimer-dark">
          ※ 本サイトは公式MBTI診断ではありません。16タイプ性格傾向をもとに自己理解を深めるための参考コンテンツです。診断結果や記事内容は、医療・心理・恋愛・転職・人生判断を保証するものではありません。
        </p>
        <p className="disclaimer disclaimer-dark" style={{marginTop:8}}>© 2026 わたし羅針盤 / Watashi Compass</p>
      </div>
    </footer>
  );
}

window.ProblemSection = ProblemSection;
window.ScrollStory = ScrollStory;
window.TypeGalaxy = TypeGalaxy;
window.BentoThemes = BentoThemes;
window.PopularArticles = PopularArticles;
window.ForWhom = ForWhom;
window.Recommend = Recommend;
window.SiteFooter = SiteFooter;