/* セクション: Prizes / WhyConbini / HowTo(漫画) / FAQ / FinalCTA / Footer */

function Prizes() {
  const [ref, seen] = useInView();
  return (
    <section className={"band" + (seen ? " revealed" : "")} ref={ref}>
      <div className="band-inner">
        <div className="reveal" style={{ textAlign: "center" }}>
          <span className="eyebrow">賞金・特典</span>
          <h2 className="sec-title">優勝陣営が、<span className="hl">賞金総取り</span>。</h2>
        </div>

        {/* ===== 優勝陣営ボーナス ヒーローブロック ===== */}
        <div className="prize-hero reveal">
          <div className="prize-hero-kicker">🏆 優勝陣営ボーナス</div>
          <div className="prize-hero-main">
            <span className="prize-hero-label">賞金プール最大</span>
            <div className="prize-hero-amount">
              <span className="prize-hero-yen">￥</span>1,000,000
            </div>
          </div>
          <div className="prize-hero-rule">
            <div className="prize-hero-pct-wrap">
              <span className="prize-hero-pct-num">5<span className="prize-hero-pct-sign">%</span></span>
              <span className="prize-hero-pct-desc">累計入金額をそのままボーナス還元</span>
            </div>
            <div className="prize-hero-badges">
              <span className="prize-hero-badge">✓ 優勝陣営の参加者全員が対象</span>
              <span className="prize-hero-badge">✓ 入金額が多い順に付与</span>
              <span className="prize-hero-badge">✓ 上限到達次第終了</span>
            </div>
          </div>
          <div className="prize-hero-example">
            <span className="prize-hero-ex-label">例）</span>
            <span>¥100,000 入金 → <strong>¥5,000 ボーナス</strong></span>
            <span>¥50,000 入金 → <strong>¥2,500 ボーナス</strong></span>
          </div>
        </div>

        {/* ===== その他の特典カード ===== */}
        <div className="prize-list">
          {PRIZES.map((p, i) => (
            p.secret ? (
              <div className="prize-item prize-item--secret reveal" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
                <div className="prize-medal prize-medal--secret">🔒</div>
                <div className="prize-secret-body">
                  <h4 className="prize-secret-title">{p.title}</h4>
                  <div className="prize-secret-blur">
                    <span className="prize-secret-label">SECRET REWARD</span>
                    <p className="prize-secret-text">████████████████████</p>
                    <p className="prize-secret-hint">各陣営の最高入金者のみに開示される特別報酬</p>
                  </div>
                </div>
              </div>
            ) : (
              <div className={"prize-item reveal" + (p.hashtags ? " prize-item--sns" : "")} key={i} style={{ transitionDelay: `${i * 70}ms` }}>
                <div className="prize-medal">{p.tok}</div>
                <div>
                  <h4>{p.title}</h4>
                  <p>{p.body}</p>
                  {p.hashtags && (
                    <div className="prize-hashtags">
                      {p.hashtags.map((tag, j) => (
                        <span className="prize-hashtag" key={j}>{tag}</span>
                      ))}
                    </div>
                  )}
                  {p.howto && (
                    <p className="prize-howto">📩 {p.howto}</p>
                  )}
                </div>
              </div>
            )
          ))}
        </div>

        <p className="prize-timing reveal">
          ⏰ 全特典はイベント終了後の翌日「6/24（火） 12:00～」より順次付与。
        </p>
      </div>
    </section>
  );
}

function WhyConbini() {
  const [ref, seen] = useInView();
  return (
    <section className={"band band--alt" + (seen ? " revealed" : "")} ref={ref}>
      <div className="band-inner">
        <div className="reveal" style={{ textAlign: "center" }}>
          <span className="eyebrow">なぜコンビニ払いが最強か</span>
          <h2 className="sec-title">クレカも口座もいらん。<br /><span className="hl-fire">現金だけ。</span></h2>
        </div>
        <div className="why-grid">
          {WHY.map((w, i) => (
            <div className="why-card reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
              <span className="why-check" aria-hidden="true">✓</span>
              <b>{w.b}</b>
              <span>{w.s}</span>
            </div>
          ))}
        </div>
        <p className="sec-lead reveal" style={{ textAlign: "center", maxWidth: "32em", margin: "0 auto" }}>
          「カードもクリプトも不安…」そんな人こそコンビニ払い。<span className="marker">一番カンタンな入金方法だから</span>、初めてでも今日から参戦できる。
        </p>
      </div>
    </section>
  );
}

function HowTo() {
  const [ref, seen] = useInView();
  return (
    <section className={"band" + (seen ? " revealed" : "")} ref={ref}>
      <div className="band-inner">
        <div className="reveal" style={{ textAlign: "center" }}>
          <span className="eyebrow">やり方</span>
          <h2 className="sec-title">3分で分かる<br /><span className="hl">コンビニ入金</span>のやり方</h2>
        </div>
        <div className="manga-wrap reveal">
          <img className="manga-img" src="assets/manga.png" alt="コンビニ入金のやり方 4コマ漫画：陣営を選ぶ→現金で払う→スコア加算→参戦" />
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [ref, seen] = useInView();
  const [open, setOpen] = React.useState(-1);
  return (
    <section className={"band band--alt" + (seen ? " revealed" : "")} ref={ref}>
      <div className="band-inner">
        <div className="reveal" style={{ textAlign: "center" }}>
          <span className="eyebrow">FAQ</span>
          <h2 className="sec-title">よくある質問</h2>
        </div>
        <div className="faq-list">
          {FAQ_DATA.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className={`faq-item reveal ${isOpen ? "open" : ""}`} key={i} style={{ transitionDelay: `${i * 50}ms` }}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span className="qm">Q</span>
                  <span className="qtext">{f.q}</span>
                  <span className="chev">＋</span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? "360px" : "0" }}>
                  <div className="faq-a-inner">
                    {f.tbd ? <span className="tbd">{f.a}</span> : f.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const [ref, seen] = useInView();
  return (
    <section className={"final" + (seen ? " revealed" : "")} ref={ref}>
      <div className="diag-banner t">参戦 参戦 参戦 参戦 参戦 参戦 参戦</div>
      <div className="final-inner reveal">
        <h2>その入金が、<br /><em>軍の勝敗</em>を決める。</h2>
        <div className="hero-cta-wrap">
          <a className="cta" href="https://sloten.io?referral=2YjM7hs8" target="_blank" rel="noopener">今すぐ参戦する <span className="cta-arrow">»</span></a>
          <p className="cta-sub">
            <span>カード不要</span><span>口座不要</span><span>現金3分</span>
          </p>
        </div>
        <p className="final-note">開催期間 2026年6月16日 〜 6月23日</p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="brand display">コンビニ陣営大戦</div>
      <div>スロ天 コンビニ陣営大戦 ／ 20歳以上限定キャンペーン</div>
      <div className="foot-period">2026年6月16日（月）〜6月23日（月）</div>
    </footer>
  );
}

Object.assign(window, { Prizes, WhyConbini, HowTo, FAQ, FinalCTA, Footer });