// sections.jsx — Visual sections. Design preserved; content replaced per spec.

const yen = (n) => "¥" + Math.round(n).toLocaleString("ja-JP");

// Calculation per spec:
//   The "賞金倍率 (×20/×30/×40/×60)" represents the FINAL prize at the
//   best (4分割 150%) rate. Other payout rates scale proportionally.
//   実受取額 = BUY × 賞金倍率 × (受取率 / 1.5)
// Spec examples (BUY ¥10,000, 4分割 150%):
//   3倍以上 → ×20 → ¥200,000
//   5倍以上 → ×30 → ¥300,000
//   7倍以上 → ×40 → ¥400,000
//   10倍以上 → ×60 → ¥600,000
const MAX_RATE = 1.5; // 4分割 150% is the reference / max rate
function calcPrize(amount, cond, rate) {
  const mult = condToMult(cond);
  const gross = amount * mult;             // baseline at 150% (max)
  const net = gross * (rate / MAX_RATE);   // scale down for other rates
  return { mult, gross, net };
}

// ── NAV ──────────────────────────────────────────────────────────────
function Navbar() {
  return (
    <nav className="navbar" data-screen-label="Navbar">
      <div className="navbar__brand">
        <div className="navbar__sigil">CHS</div>
        <div>
          <div className="navbar__brand-title">カスタムヘブンズショット</div>
          <div className="navbar__brand-sub">CUSTOM HEAVEN'S SHOT</div>
        </div>
      </div>
      <div className="navbar__links">
        {NAV.map((n) => (
          <a key={n.href} href={n.href}>{n.jp}</a>
        ))}
        <a href="https://heavenshot-apply.slotenpromotion.com/" target="_blank" rel="noreferrer" className="navbar__apply">今すぐ申請</a>
      </div>
    </nav>
  );
}

// ── HERO ─────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="hero__bg">
        <img src="images/scene-heaven.png" alt="" />
        <div className="hero__bg-fade" />
      </div>
      <div className="hero__inner">
        <div className="hero__eyebrow">
          <span className="dot" />
          777 スロット天国 / SLOT HEAVEN
        </div>
        <h1 className="hero__title">
          <span className="hero__title-en">CUSTOM</span>
          <span className="hero__title-en hero__title-en--alt">HEAVEN'S</span>
          <span className="hero__title-en">SHOT.</span>
          <span className="hero__title-jp">カ ス タ ム ヘ ブ ン ズ シ ョ ッ ト</span>
        </h1>
        <p className="hero__copy">
          勝利条件と受け取り方法を自由に選択して、あなただけのヘブンズショットを体験しよう。
        </p>
        <div className="hero__cta">
          <a className="btn btn--gold" href="https://heavenshot-apply.slotenpromotion.com/" target="_blank" rel="noreferrer">今すぐ申請する →</a>
          <a className="btn btn--ghost" href="#flow">申請の流れを見る</a>
        </div>
        <div className="hero__stats">
          <div>
            <div className="stat__num">4</div>
            <div className="stat__lbl">EASY STEPS</div>
          </div>
          <div className="stat__rule" />
          <div>
            <div className="stat__num">×60</div>
            <div className="stat__lbl">MAX PRIZE MULT</div>
          </div>
          <div className="stat__rule" />
          <div>
            <div className="stat__num">150%</div>
            <div className="stat__lbl">BEST PAYOUT</div>
          </div>
          <div className="stat__rule" />
          <div>
            <div className="stat__num">41</div>
            <div className="stat__lbl">SLOT MACHINES</div>
          </div>
        </div>
      </div>
      <div className="hero__scroll">SCROLL ↓ 申請の流れ ↓</div>
    </section>
  );
}

// ── SECTION HEADER ───────────────────────────────────────────────────
function SectionLabel({ num, kana, en, sub }) {
  return (
    <div className="section-label">
      <div className="section-label__num">{num}</div>
      <div>
        <div className="section-label__kana">{kana}</div>
        <div className="section-label__en">{en}</div>
      </div>
      <div className="section-label__sub">{sub}</div>
    </div>
  );
}

// ── FLOW ─────────────────────────────────────────────────────────────
function FlowSection() {
  return (
    <section id="flow" className="flow" data-screen-label="Flow">
      <SectionLabel
        num="01"
        kana="申請の流れ"
        en="HOW TO APPLY"
        sub="簡単4ステップで参加できます！"
      />
      <div className="flow__grid">
        {FLOW.map((f) => (
          <article key={f.step} className="flow-card" style={{ "--tone": f.tone }}>
            <div className="flow-card__head">
              <div className="flow-card__step">STEP <span>{f.step}</span></div>
              <div className="flow-card__rule" />
            </div>
            <div className="flow-card__art">
              <img src={f.img} alt="" />
            </div>
            <h3 className="flow-card__title">{f.title}</h3>
            <p className="flow-card__body">{f.body}</p>
            {f.note && <div className="flow-card__note">{f.note}</div>}
          </article>
        ))}
      </div>
      <div className="flow__cta">
        <a className="btn btn--gold" href="https://heavenshot-apply.slotenpromotion.com/" target="_blank" rel="noreferrer">今すぐ申請する →</a>
      </div>
    </section>
  );
}

// ── STREAK — 連続無料チャレンジ ───────────────────────────────────────
function StreakSection() {
  const days = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  return (
    <section id="streak" className="flow" data-screen-label="Streak">
      <SectionLabel
        num="00"
        kana="連続無料チャレンジ"
        en="FREE STREAK · 最大9日間"
        sub="成功し続ける限り、翌日の参加費がずっと無料。失敗したらそこで終了。最大9日間連続で挑戦できます。"
      />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: "16px",
          maxWidth: "960px",
          margin: "0 auto 30px",
        }}
      >
        <div
          style={{
            padding: "24px 22px",
            borderRadius: "16px",
            border: "1px solid rgba(214,164,74,.5)",
            background: "linear-gradient(135deg, rgba(30,38,58,.92), rgba(16,22,36,.92))",
          }}
        >
          <div style={{ fontSize: "13px", letterSpacing: ".14em", color: "#e8c877", fontWeight: 800, marginBottom: "10px" }}>
            SUCCESS ／ 成功したら
          </div>
          <div style={{ fontSize: "20px", fontWeight: 900, color: "#fff", lineHeight: 1.5 }}>
            翌日も<span style={{ color: "#ffd76b" }}>参加費無料</span>で挑戦！
          </div>
          <div style={{ marginTop: "10px", fontSize: "13px", color: "#b9c3d6", lineHeight: 1.75 }}>
            クリアするたびに、次の日のヘブンズショットが無料に。成功が続く限り、追加費用なしで挑戦し続けられます。
          </div>
        </div>
        <div
          style={{
            padding: "24px 22px",
            borderRadius: "16px",
            border: "1px solid rgba(120,140,170,.32)",
            background: "linear-gradient(135deg, rgba(24,28,40,.92), rgba(14,18,30,.92))",
          }}
        >
          <div style={{ fontSize: "13px", letterSpacing: ".14em", color: "#9fb0c8", fontWeight: 800, marginBottom: "10px" }}>
            FAIL ／ 失敗したら
          </div>
          <div style={{ fontSize: "20px", fontWeight: 900, color: "#fff", lineHeight: 1.5 }}>
            そこでチャレンジ<span style={{ color: "#ff8f8f" }}>終了</span>
          </div>
          <div style={{ marginTop: "10px", fontSize: "13px", color: "#b9c3d6", lineHeight: 1.75 }}>
            失敗した時点で連続無料チャレンジは終了となります。次回はまた1日目から挑戦できます。
          </div>
        </div>
      </div>
      <div style={{ maxWidth: "960px", margin: "0 auto" }}>
        <div
          style={{
            textAlign: "center",
            fontSize: "14px",
            color: "#e8c877",
            fontWeight: 800,
            letterSpacing: ".1em",
            marginBottom: "16px",
          }}
        >
          成功でDAYが進む → 最大 9 日間 連続で参加費無料
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", justifyContent: "center" }}>
          {days.map((d) => (
            <div key={d} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
              <div
                style={{
                  width: "60px",
                  height: "62px",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  border: "1px solid rgba(214,164,74,.5)",
                  background: "rgba(214,164,74,.12)",
                  color: "#fff",
                }}
              >
                <div style={{ fontSize: "10px", color: "#e8c877", fontWeight: 700, letterSpacing: ".08em" }}>DAY</div>
                <div style={{ fontSize: "21px", fontWeight: 900, lineHeight: 1 }}>{d}</div>
                <div style={{ fontSize: "9px", color: "#cdd6e6", marginTop: "3px" }}>無料</div>
              </div>
              {d < 9 && <span style={{ color: "#e8c877", fontWeight: 900, fontSize: "18px" }}>›</span>}
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: "16px", fontSize: "12px", color: "#9aa6bc", lineHeight: 1.7 }}>
          ※初日は通常どおり参加費が必要です。成功で翌日へ進み、失敗した日で終了。連続成功で最大9日目まで参加費無料で挑戦できます。
        </div>
      </div>
    </section>
  );
}

// ── CAST ─────────────────────────────────────────────────────────────
function CastSection({ activeIdx, setActiveIdx }) {
  const active = CAST[activeIdx];
  return (
    <section id="cast" className="cast" data-screen-label="Cast">
      <SectionLabel
        num="02"
        kana="天使たちがあなたをサポート"
        en="MEET THE ANGELS"
        sub="6体の天使が、申請からシミュレーションまでをご案内します。"
      />
      <div className="cast__layout">
        <div className="cast__list">
          {CAST.map((c, i) => (
            <button
              key={c.id}
              className={"cast-row" + (i === activeIdx ? " is-active" : "")}
              style={{ "--tone": c.tone }}
              onClick={() => setActiveIdx(i)}
            >
              <div className="cast-row__idx">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="cast-row__jp">{c.jp}</div>
                <div className="cast-row__en">{c.en}</div>
              </div>
              <div className="cast-row__role">{c.role}</div>
              <div className="cast-row__chev">→</div>
            </button>
          ))}
        </div>
        <div className="cast__stage" style={{ "--tone": active.tone }}>
          <div className="cast__stage-bg" />
          <div className="cast__stage-frame" />
          <img className="cast__stage-img" src={active.img} alt={active.jp} />
          <div className="cast__stage-meta">
            <div className="cast__stage-romaji">{active.en}</div>
            <div className="cast__stage-name">{active.jp}</div>
            <div className="cast__stage-role">{active.role}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── BUBBLE — character speech ────────────────────────────────────────
function Bubble({ char }) {
  if (!char) return null;
  return (
    <div className="bubble" style={{ "--tone": char.tone }}>
      <div className="bubble__portrait">
        <img src={char.img} alt="" />
      </div>
      <div>
        <div className="bubble__name">
          <span>{char.jp}</span>
          <span className="bubble__role">{char.role}</span>
        </div>
        <div className="bubble__line">{char.line}</div>
      </div>
    </div>
  );
}

// ── BUY ──────────────────────────────────────────────────────────────
function BuyBlock({ amount, setAmount }) {
  const advisor = CAST.find((c) => c.id === "arquel");
  return (
    <div className="sim-block">
      <div className="sim-block__head">
        <div className="sim-block__idx">i.</div>
        <h3 className="sim-block__title">ボーナスBUY額</h3>
      </div>
      <Bubble char={advisor} />
      <div className="buy">
        <div className="buy__input-wrap">
          <span className="buy__yen">¥</span>
          <input
            className="buy__input"
            type="number"
            min={0}
            step={1000}
            value={amount}
            onChange={(e) => setAmount(Math.max(0, Number(e.target.value) || 0))}
          />
          <div className="buy__hint">※参加費はBUY額と同額</div>
        </div>
        <div className="buy__presets">
          {PRESETS.map((p) => (
            <button
              key={p}
              className={"chip" + (p === amount ? " is-active" : "")}
              onClick={() => setAmount(p)}
            >
              {yen(p)}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── WIN ──────────────────────────────────────────────────────────────
// Slider snaps to the 4 spec tiers (3/5/7/10) only.
// We index by tier 0..3 internally and read cond/mult from WIN_TIERS.
function WinBlock({ cond, setCond }) {
  const advisor = CAST.find((c) => c.id === "celefim");
  const tierIdx = Math.max(0, WIN_TIERS.findIndex((t) => t.cond === cond));
  const tier = WIN_TIERS[tierIdx];
  const pct = (tierIdx / (WIN_TIERS.length - 1)) * 100;
  return (
    <div className="sim-block">
      <div className="sim-block__head">
        <div className="sim-block__idx">ii.</div>
        <h3 className="sim-block__title">勝利条件を選択(メーターを動かしてください)</h3>
      </div>
      <Bubble char={advisor} />
      <div className="win__top">
        <div className="win__current">
          <div className="win__current-x">{tier.cond}倍<span>以上</span></div>
          <div className="win__current-mult">
            賞金倍率 <strong>×{tier.prizeMult}</strong>
          </div>
        </div>
        <div className="win__quick">
          {WIN_TIERS.map((t) => (
            <button
              key={t.cond}
              className={"btn btn--line" + (cond === t.cond ? " is-active" : "")}
              onClick={() => setCond(t.cond)}
            >
              {t.label}
            </button>
          ))}
        </div>
      </div>
      <div className="win__slider">
        <input
          type="range"
          min={0}
          max={WIN_TIERS.length - 1}
          step={1}
          value={tierIdx}
          onChange={(e) => setCond(WIN_TIERS[Number(e.target.value)].cond)}
          style={{ "--pct": pct + "%" }}
        />
        <div className="win__ticks">
          {WIN_TIERS.map((t) => (
            <span key={t.cond} className={t.cond === cond ? "is-on" : ""}>{t.label}</span>
          ))}
        </div>
        <div className="win__ends">
          <span>達成しやすい</span>
          <span>難しい</span>
        </div>
      </div>
      <div className="win__table">
        {WIN_TIERS.map((t) => (
          <button
            key={t.cond}
            className={"win__row" + (cond === t.cond ? " is-active" : "")}
            onClick={() => setCond(t.cond)}
          >
            <span className="win__row-cond">{t.label}</span>
            <span className="win__row-arrow">→</span>
            <span className="win__row-mult">×{t.prizeMult}賞金</span>
          </button>
        ))}
      </div>
    </div>
  );
}

// ── PAYOUT ───────────────────────────────────────────────────────────
function PayoutBlock({ payoutId, setPayoutId }) {
  const advisor = CAST.find((c) => c.id === "harpina");
  return (
    <div className="sim-block">
      <div className="sim-block__head">
        <div className="sim-block__idx">iii.</div>
        <h3 className="sim-block__title">受け取り方法を選択</h3>
      </div>
      <Bubble char={advisor} />
      <div className="payout">
        {PAYOUT_OPTIONS.map((p) => (
          <button
            key={p.id}
            className={"payout-card" + (p.id === payoutId ? " is-active" : "")}
            onClick={() => setPayoutId(p.id)}
          >
            {p.badge && <div className="payout-card__badge">{p.badge}</div>}
            <div className="payout-card__check"><span /></div>
            <div className="payout-card__rate">{Math.round(p.rate * 100)}%</div>
            <div className="payout-card__title">{p.title}</div>
            <div className="payout-card__sub">{p.sub}</div>
            <div className="payout-card__sub" style={{ marginTop: 10, opacity: .85 }}>
              {p.detail}
            </div>
          </button>
        ))}
      </div>
      <div className="payout__note">
        ※途中で先受け取りも可能。分割受け取り中に残額を一括で受け取る場合は未受け取り額の75%。
      </div>
    </div>
  );
}

// ── RESULT ───────────────────────────────────────────────────────────
function ResultBlock({ amount, cond, payoutId, machine }) {
  const payout = PAYOUT_OPTIONS.find((p) => p.id === payoutId);
  const { mult, gross, net } = calcPrize(amount, cond, payout.rate);

  // Lump-sum (100%) vs 4分割 (150%) baseline for comparison.
  // gross is the prize at the max rate (150%); scale by (rate / 1.5).
  const lump = PAYOUT_OPTIONS.find((p) => p.id === "lump");
  const four = PAYOUT_OPTIONS.find((p) => p.id === "four");
  const lumpNet = gross * (lump.rate / MAX_RATE);
  const fourNet = gross * (four.rate / MAX_RATE);
  const diff = fourNet - lumpNet;

  const perSplit = payout.splits > 1 ? net / payout.splits : null;

  return (
    <div className="result">
      <div className="result__head">
        <div className="result__head-num">∞</div>
        <div>
          <div className="result__head-en">PROJECTED PRIZE · 試算結果</div>
          <div className="result__head-jp">あなたの受け取り額（{Math.round(payout.rate * 100)}%）</div>
        </div>
      </div>
      <div className="result__main">
        <div className="result__big">
          <div className="result__big-rate">{payout.title.toUpperCase()} · {Math.round(payout.rate * 100)}%</div>
          <div className="result__big-amount">{yen(net)}</div>
          <div className="result__big-sub">
            {perSplit
              ? `${payout.splits}回に分けて受け取り ${yen(perSplit)} × ${payout.splits}回`
              : "即時に全額受け取り"}
          </div>
        </div>
        <div className="result__compare">
          <div className="compare-row">
            <span className="compare-row__label">一括受取 100%</span>
            <span className="compare-row__amt">{yen(lumpNet)}</span>
          </div>
          <div className="compare-row compare-row--best">
            <span className="compare-row__label">4分割受取 150%</span>
            <span className="compare-row__amt">{yen(fourNet)}</span>
          </div>
          <div className="compare-row compare-row--diff">
            <span className="compare-row__label">差額</span>
            <span className="compare-row__amt">
              +{yen(diff)}<em>(+50% お得)</em>
            </span>
          </div>
        </div>
      </div>
      <div className="result__breakdown">
        <div className="item">
          <div className="item__k">BUY額</div>
          <div className="item__v">{yen(amount)}</div>
        </div>
        <div className="item">
          <div className="item__k">参加費</div>
          <div className="item__v">{yen(amount)}</div>
        </div>
        <div className="item">
          <div className="item__k">勝利条件</div>
          <div className="item__v">{cond}倍以上</div>
        </div>
        <div className="item">
          <div className="item__k">賞金倍率</div>
          <div className="item__v">×{mult}</div>
        </div>
        <div className="item">
          <div className="item__k">受け取り方法</div>
          <div className="item__v">{payout.title}</div>
        </div>
        <div className="item">
          <div className="item__k">受け取り率</div>
          <div className="item__v">{Math.round(payout.rate * 100)}%</div>
        </div>
        <div className="item">
          <div className="item__k">機種</div>
          <div className="item__v" style={{fontSize: 12, lineHeight: 1.4}}>
            {machine ? machine.name : "—"}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── MACHINE PICKER ───────────────────────────────────────────────────
function MachineBlock({ machineId, setMachineId, query, setQuery }) {
  const advisor = CAST.find((c) => c.id === "gateriel");
  const filtered = MACHINES.filter((m) => {
    const q = query.trim().toLowerCase();
    if (!q) return true;
    return m.name.toLowerCase().includes(q);
  });
  return (
    <div className="sim-block">
      <div className="sim-block__head">
        <div className="sim-block__idx">iv.</div>
        <h3 className="sim-block__title">機種を検索・選択</h3>
      </div>
      <Bubble char={advisor} />
      <div className="machine__search-wrap">
        <span className="machine__search-icon">⌕</span>
        <input
          className="machine__search"
          placeholder="機種名で検索..."
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <span className="machine__count">{filtered.length} / {MACHINES.length}</span>
      </div>
      <div className="machine__grid">
        {filtered.map((m) => (
          <button
            key={m.id}
            className={"machine__item" + (m.id === machineId ? " is-active" : "")}
            onClick={() => setMachineId(m.id)}
          >
            <span className="machine__item-main">
              <img
                className="machine__item-img"
                src={"/assets/game_" + m.name.toLowerCase().replace(/\s+/g, "_") + ".jpg?v=7"}
                alt=""
                loading="lazy"
              />
              <span style={{ fontWeight: 500, letterSpacing: ".01em" }}>{m.name}</span>
            </span>
            {m.id === machineId && <span className="machine__item-tag">選択中</span>}
          </button>
        ))}
      </div>
    </div>
  );
}

// ── DOCK — sticky summary + copy + apply ─────────────────────────────
function Dock({ amount, cond, payoutId, machine, onCopy, copied }) {
  const payout = PAYOUT_OPTIONS.find((p) => p.id === payoutId);
  const { mult, net } = calcPrize(amount, cond, payout.rate);
  return (
    <div className="dock">
      <div className="dock__left">
        <div className="dock__machine">
          {machine ? machine.name : "機種未選択"}
        </div>
        <div className="dock__line">
          <span>{yen(amount)}</span><i>·</i>
          <span>勝利{cond}倍以上</span><i>·</i>
          <span>×{mult}賞金</span><i>·</i>
          <span>{payout.title} {Math.round(payout.rate * 100)}%</span><i>→</i>
          <strong>{yen(net)}</strong>
        </div>
      </div>
      <button
        className="btn btn--line"
        onClick={onCopy}
        disabled={!machine}
        style={{ opacity: machine ? 1 : 0.45, cursor: machine ? "pointer" : "not-allowed" }}
      >
        {copied ? "✓ コピーしました" : "条件をコピー"}
      </button>
      <a
        className="btn btn--gold"
        href="https://heavenshot-apply.slotenpromotion.com/"
        target="_blank"
        rel="noreferrer"
      >
        今すぐ申請する →
      </a>
    </div>
  );
}

// ── COPY PREVIEW (the text that gets copied) ─────────────────────────
function buildCopyText({ amount, cond, payoutId, machine }) {
  const payout = PAYOUT_OPTIONS.find((p) => p.id === payoutId);
  const { mult, net } = calcPrize(amount, cond, payout.rate);
  return [
    "【カスタムヘブンズショット 申請内容】",
    `機種: ${machine ? machine.name : "—"}`,
    `BUY額: ${yen(amount)}`,
    `参加費: ${yen(amount)}`,
    `勝利条件: ${cond}倍以上`,
    `賞金倍率: ×${mult}`,
    `受け取り方法: ${payout.title} (${Math.round(payout.rate * 100)}%)`,
    `想定受取額: ${yen(net)}`,
  ].join("\n");
}

function CopyPreview({ amount, cond, payoutId, machine }) {
  const txt = buildCopyText({ amount, cond, payoutId, machine });
  return (
    <details className="copy-preview">
      <summary>コピーされる内容を確認</summary>
      <pre>{txt}</pre>
    </details>
  );
}

// ── NOTE / FOOT ──────────────────────────────────────────────────────
function NoteBlock() {
  return (
    <section id="note" className="note" data-screen-label="Note">
      <div className="note__inner">
        <div className="note__icon">!</div>
        <p>
          ボーナスBUYの費用と金額が合わない場合は、カスタマーサポートにお申し付けください。
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot" data-screen-label="Footer">
      <div className="foot__brand">
        <div className="foot__sigil">CHS</div>
        <div>
          <div className="foot__title">CUSTOM HEAVEN'S SHOT</div>
          <div className="foot__sub">カスタムヘブンズショット</div>
        </div>
      </div>
      <div className="foot__copy">© 2025 Custom Heaven's Shot. All rights reserved.</div>
    </footer>
  );
}

// ── FINALE — battle scene full bleed CTA ─────────────────────────────
function FinaleSection() {
  return (
    <section className="finale" data-screen-label="Finale">
      <div className="finale__bg">
        <img src="images/scene-battle.png" alt="" />
        <div className="finale__bg-fade" />
      </div>
      <div className="finale__inner">
        <div className="finale__eyebrow">
          <span className="dot" />
          天使たちが、あなたを待っている
        </div>
        <h2 className="finale__title">
          <span className="finale__title-en">YOUR</span>
          <span className="finale__title-en finale__title-en--alt">HEAVEN'S</span>
          <span className="finale__title-en">SHOT.</span>
        </h2>
        <p className="finale__copy">
          勝利条件と受け取り方法を自由に選択して、<br />
          あなただけのヘブンズショットを体験しよう。
        </p>
        <div className="finale__cta">
          <a className="btn btn--gold btn--xl" href="https://heavenshot-apply.slotenpromotion.com/" target="_blank" rel="noreferrer">
            今すぐ申請する →
          </a>
          <div className="finale__url">→ heavenshot-apply.slotenpromotion.com</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Navbar, Hero, SectionLabel, StreakSection, FlowSection, CastSection, Bubble,
  BuyBlock, WinBlock, PayoutBlock, ResultBlock, MachineBlock,
  Dock, CopyPreview, buildCopyText, NoteBlock, Footer, FinaleSection,
  calcPrize,
});