/* 上部セクション: ヒーロー（3バリエーション）/ 監修者 / 失敗しない選び方 */

const HERO_BADGES = [
  { ic: "check", t: "唎酒師 監修" },
  { ic: "check", t: "全国の地酒10本を比較" },
  { ic: "check", t: "のし・ラッピング対応" },
];

function HeroBadges() {
  return (
    <div className="badges hero__badges">
      {HERO_BADGES.map((b, i) => (
        <span className="badge" key={i}>
          <span className="seal"><Icon name="check" /></span>{b.t}
        </span>
      ))}
    </div>
  );
}

function HeroText({ variant }) {
  return (
    <div className="hero__copy">
      <div className="hero__kicker">唎酒師 SELECTION ｜ 敬老の日・帰省の手土産に</div>
      <h1 className="hero__title">
        <span className="hero__thanks-line hero__thanks-line--desktop">「いつもありがとう」を言葉より一本で</span>
        <span className="hero__thanks-line hero__thanks-line--mobile">「いつもありがとう」を<br />言葉より一本で</span>
        <span className="hero__gift-line">プレゼントにおすすめの</span>
        <span className="hero__main-line">日本酒ギフト<span className="accentword">10選</span></span>
      </h1>
      <p className="hero__sub">
        長寿を祝う席に、家族で囲む食卓に<br />
        唎酒師が選んだ、贈って喜ばれる日本酒10選
      </p>
      <div className="hero__cta">
        <a href="#ranking" className="btn btn--primary">ランキングを見る<Icon name="arrow" /></a>
        <a href="#guide" className="btn btn--ghost">失敗しない選び方</a>
      </div>
      {variant !== "editorial" && <HeroBadges />}
    </div>
  );
}

function Hero({ variant }) {
  return (
    <header className={`hero hero--${variant}`}>
      <span className="hero__age">20歳未満の飲酒・購入はできません</span>
      <div className="wrap hero__inner">
        <img className="hero__generated-pc" src="./assets/img/hero-generated-pc.png" alt="「いつもありがとう」を言葉より一本で。プレゼントにおすすめの日本酒ギフト10選" />
        <img className="hero__generated-sp" src="./assets/img/hero-generated-sp.png" alt="「いつもありがとう」を言葉より一本で。プレゼントにおすすめの日本酒ギフト10選" />
        {variant === "centered" && (
          <>
            <HeroText variant={variant} />
          </>
        )}
        {variant === "split" && (
          <>
            <HeroText variant={variant} />
          </>
        )}
        {variant === "editorial" && (
          <>
            <HeroText variant={variant} />
          </>
        )}
      </div>
    </header>
  );
}

/* ---------- 監修者紹介 ---------- */
const SV_QUALS = ["唎酒師", "日本酒検定", "ギフトコンシェルジュ"];
const SV_REASONS = [
  { t: "“違いが分かる”プロの舌で選定", b: "数百種を利き分ける唎酒師が、香り・味・余韻を実際に確かめて10本に厳選しています。" },
  { t: "贈る相手・シーンから逆算", b: "「誰に・どんな場面で」を起点に選ぶから、相手の食卓にちゃんと馴染む一本が見つかります。" },
  { t: "価格・レア度の基準を明示", b: "選定理由とレア度の基準を公開。なんとなくではなく、納得して選べる比較になっています。" },
];

function Supervisor() {
  return (
    <section className="section section--tint" id="supervisor">
      <div className="wrap">
        <div className="eyebrow">監修者について</div>
        <h2 className="section-title">なぜ、プロが選ぶと“外さない”のか。</h2>
        <p className="section-lead">
          久しぶりに会うおじいちゃん・おばあちゃん、ご両親へ。<br />
          お酒を飲み慣れた方にも自信を持って渡せる一本を、唎酒師が選びました。
        </p>
        <div className="sv__grid">
          <Media imgKey="emblem" className="sv__photo" tag="監修者・資格エンブレム" contain={true} />
          <div>
            <h3 className="sv__name">
              <span className="sv__name-pc">唎酒師 日本酒屋店主の神前氏が厳選</span>
              <span className="sv__name-sp">唎酒師 日本酒屋店主の<br />「神前氏」が厳選</span>
            </h3>
            <div className="sv__role">日本酒屋 店主 ／ 唎酒師</div>
            <div className="sv__quals">
              {SV_QUALS.map((q, i) => (
                <span className="qual" key={i}><Icon name="check" />{q}</span>
              ))}
            </div>
            <div className="sv__reasons">
              {SV_REASONS.map((r, i) => (
                <div className="reason" key={i}>
                  <div className="reason__no">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div className="reason__t">{r.t}</div>
                    <div className="reason__b">{r.b}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 失敗しない選び方 ---------- */
const GUIDE_STEPS = [
  {
    ic: "budget", no: "STEP 01", t: "予算で決める",
    items: [["〜3,000円", "気軽な贈り物に"], ["3,000〜5,000円", "帰省の手土産に"], ["5,000円〜", "敬老の日の特別な贈り物に"]],
  },
  {
    ic: "taste", no: "STEP 02", t: "相手の好みで決める",
    items: [["お酒好き・通", "熟成 / 樽熟 / 古酒"], ["華やかが好き", "純米大吟醸"], ["スパークリング好き", "発泡・生酒"], ["甘め・飲みやすい", "フルーティ生酒"]],
  },
  {
    ic: "scene", no: "STEP 03", t: "シーンで決める",
    items: [["敬老の日", "長寿を祝う"], ["帰省の手土産", "食卓に合わせて"], ["ご両親へ", "感謝を込めて"]],
  },
];

function Guide() {
  return (
    <section className="section" id="guide">
      <div className="wrap">
        <div className="eyebrow">失敗しない選び方</div>
        <h2 className="section-title"><span className="sp-br">3ステップで、</span><span className="sp-br">初心者でも迷わない。</span></h2>
        <p className="section-lead">
          贈る相手は、お酒を飲み慣れた方？それとも軽めが好き？<br />
          敬老の日・帰省の手土産で外さない選び方を、3ステップでご案内します。
        </p>
        <Media imgKey="guide" className="guide-banner" tag="選び方アイコン" />
        <div className="steps">
          {GUIDE_STEPS.map((s, i) => (
            <div className="step" key={i}>
              <div className="step__icon"><Icon name={s.ic} /></div>
              <div className="step__no">{s.no}</div>
              <h3>{s.t}</h3>
              <ul>
                {s.items.map((it, j) => (
                  <li key={j}><b>{it[0]}</b>{it[1] ? `／${it[1]}` : ""}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <FlowChart />
      </div>
    </section>
  );
}

/* インタラクティブ・フローチャート */
function FlowChart() {
  const [ans, setAns] = React.useState(null);     // 'yes' | 'no'
  const [taste, setTaste] = React.useState(null); // 'hanayaka' | 'amai'
  const pick = (r) => window.SAKE_DATA.find((d) => d.rank === r);
  const reset = () => { setAns(null); setTaste(null); };

  let heading = null, results = null;
  if (ans === "yes") { heading = "熟成・樽熟・古酒がおすすめ"; results = [3, 5, 6].map(pick); }
  else if (ans === "no" && taste === "hanayaka") { heading = "華やかな純米大吟醸がおすすめ"; results = [1, 4].map(pick); }
  else if (ans === "no" && taste === "amai") { heading = "甘め・フルーティな生酒がおすすめ"; results = [7, 8].map(pick); }

  return (
    <div className="flow">
      <div className="flow__head">
        <h3>かんたんフローチャート</h3>
        <span className="tag">— 質問に答えると、おすすめの一本が見つかります</span>
      </div>
      <div className="flow__tree">
        <div className="flow__q">相手は日本酒に詳しい？</div>
        <div className="flow__btns">
          <button className={`flow__btn ${ans === "yes" ? "is-active" : ""}`}
            onClick={() => { setAns("yes"); setTaste(null); }}>はい</button>
          <button className={`flow__btn ${ans === "no" ? "is-active" : ""}`}
            onClick={() => { setAns("no"); setTaste(null); }}>いいえ</button>
        </div>

        {ans === "no" && (
          <>
            <div className="flow__q flow__q--sub">華やか or 甘め、どちらが好き？</div>
            <div className="flow__btns">
              <button className={`flow__btn ${taste === "hanayaka" ? "is-active" : ""}`}
                onClick={() => setTaste("hanayaka")}>華やか</button>
              <button className={`flow__btn ${taste === "amai" ? "is-active" : ""}`}
                onClick={() => setTaste("amai")}>甘め</button>
            </div>
          </>
        )}

        {results && (
          <div className="flow__answer">
            <div className="flow__reshead">{heading}</div>
            <div className="flow__results">
              {results.map((d) => (
                <a key={d.rank} className="flow__rescard" href={d.url} target="_blank" rel="noopener noreferrer">
                  <Media src={d.photo} className="pic" tag={d.name} position="center 35%" />
                  <span className="rk">No.{d.rank}　<span className="rk-star">{"★".repeat(d.rarity)}</span></span>
                  <span className="nm">{d.name}</span>
                  <span className="go">この一本を見る<Icon name="ext" /></span>
                </a>
              ))}
            </div>
            <button className="flow__reset" onClick={reset}>最初からやり直す</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Hero, Supervisor, Guide });