/* eslint-disable */
const { useState, useEffect } = React;

const STEPS = [
  { id: 1, name: "1ST SHOT", fee: "¥4,000", feeFree: true, buy: "¥4,000", prize: 50000, mult: "×1", limit: "1人1回", char: "seraphine" },
  { id: 2, name: "2ND SHOT", fee: "¥6,000", buy: "¥6,000", prize: 100000, mult: "×1", limit: "1人1回", char: "aurelius" },
  { id: 3, name: "3RD SHOT", fee: "¥8,000", buy: "¥8,000", prize: 150000, mult: "×1", limit: "1人1回", char: "arquel" },
];

const HOW = [
  { n: "01", t: "コードをコピー", d: "ボーナスコードをカスタマーサポートへ送信。" },
  { n: "02", t: "機種選定", d: "対象機種から挑戦するゲームを選択。" },
  { n: "03", t: "ゲームIDを伝える", d: "イベントBUY前の最後のゲームIDを送信。" },
  { n: "04", t: "参加費を支払う", d: "選択ステップの参加費（STEP1は無料）。" },
  { n: "05", t: "入金", d: "選択ステップのボーナスBUY額を入金。" },
  { n: "06", t: "BUYを実行", d: "指定金額でボーナスBUY、IDも送信。" },
  { n: "07", t: "勝利確定", d: "3倍以上の配当で賞金獲得。" },
];

const GAMES = [
  { name: "Sweet Bonanza 2500", p: "Pragmatic Play", hot: true },
  { name: "Sweet Bonanza 1000", p: "Pragmatic Play" },
  { name: "Sugar Rush 1000", p: "Pragmatic Play" },
  { name: "Fruit Party", p: "Pragmatic Play" },
  { name: "Starlight Princess 1000", p: "Pragmatic Play" },
  { name: "Gates of Olympus 1000", p: "Pragmatic Play" },
  { name: "Fruit Party 2", p: "Pragmatic Play" },
  { name: "Sweet Rush Bonanza", p: "Pragmatic Play" },
  { name: "Gates of Olympus", p: "Pragmatic Play" },
  { name: "Hot Fiesta", p: "Pragmatic Play" },
];

const FAQ = [
  { q: "誰でも参加できますか？", a: "本キャンペーンは初入金の方限定です。過去にご入金履歴のあるアカウントは対象外となります。" },
  { q: "ステップを飛ばして挑戦できますか？", a: "ステップは1st SHOTから順番に挑戦する必要があります。STEP2に挑戦するにはSTEP1を、STEP3に挑戦するにはSTEP2をクリアしている必要があります。" },
  { q: "何回でも参加できますか？", a: "各ステップ、1人1回のみ挑戦可能です。" },
  { q: "賞金はいつ振り込まれますか？", a: "賞金付与は勝利確定の翌日18時より順次配布いたします。" },
  { q: "参加費とプレイ費用は別ですか？", a: "参加費とは別に、ボーナスBUYの費用が必要です（STEP1はボーナスコード利用で参加費無料）。" },
  { q: "通常のヘブンズショットにも参加できますか？", a: "はい、通常のヘブンズショット（1万・5万・10万コース）への参加も可能です。" },
  { q: "参加申請後のボーナスBUYが対象になりますか？", a: "参加申請後に対象金額のボーナスBUYを行うと、そのプレイがイベントの対象となります。必ず参加申請を先に行ってください。" },
];

const HERO_CHARS = {
  aurelius: "assets/char-aurelius.png",
  arquel: "assets/char-arquel.png",
  celesta: "assets/char-celesta.png",
  seraphine: "assets/char-seraphine.png",
  verdan: "assets/char-verdan.png",
  lucifire: "assets/char-lucifire.png",
  lilicia: "assets/char-lilicia.png",
};

function BrandMark({ size = 38 }) {
  return (
    <svg className="brandmark" width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden>
      <defs>
        <linearGradient id="bm-g" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#fff2b8" />
          <stop offset="50%" stopColor="#f3d36b" />
          <stop offset="100%" stopColor="#8a5e10" />
        </linearGradient>
      </defs>
      <circle cx="32" cy="32" r="29" stroke="url(#bm-g)" strokeWidth="2" />
      <circle cx="32" cy="32" r="22" stroke="url(#bm-g)" strokeWidth="1" strokeDasharray="2 3" opacity="0.6" />
      <path d="M16 44 L16 38 L26 38 L26 30 L36 30 L36 22 L48 22 L48 44 Z" fill="url(#bm-g)" />
      <path d="M16 44 L48 44" stroke="#8a5e10" strokeWidth="1.5" />
    </svg>
  );
}

function TopBar() {
  return (
    <div className="topbar">
      <div className="brand">
        <BrandMark />
        <div className="brand-text">
          <span className="main">ステップアップ</span>
          <span className="sub">HEAVEN'S STEP UP</span>
        </div>
      </div>
      <nav>
        <a href="#steps">ステップ</a>
        <a href="#how">参加方法</a>
        <a href="#games">対象機種</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div className="pill">初入金限定 ｜ 1人1回</div>
    </div>
  );
}

function GachaButton({ variant = "gold", children, onClick, href }) {
  if (href) {
    return (
      <a className={`btn-gacha ${variant}`} href={href} target="_blank" rel="noopener" style={{textDecoration:"none",display:"inline-block"}}>
        {variant === "gold" && <span className="shine" />}
        <span style={{ position: "relative", zIndex: 1 }}>{children}</span>
      </a>
    );
  }
  return (
    <button className={`btn-gacha ${variant}`} onClick={onClick}>
      {variant === "gold" && <span className="shine" />}
      <span style={{ position: "relative", zIndex: 1 }}>{children}</span>
    </button>
  );
}

const ROSTER = [
  { id: "seraphine", name: "Seraphine", role: "Trumpet" },
  { id: "aurelius",  name: "Aurelius",  role: "Spear" },
  { id: "celesta",   name: "Celesta",   role: "Harp" },
  { id: "arquel",    name: "Arquel",    role: "Sword" },
  { id: "verdan",    name: "Verdan",    role: "Tome" },
  { id: "lucifire",  name: "Lucifire",  role: "Flame" },
  { id: "lilicia",   name: "Lilicia",   role: "Orb" },
];

function Hero({ heroBg, onJump }) {
  return (
    <section className="hero-cinematic">
      <div className="hero-bg">
        <img src={heroBg} alt="" />
        <div className="hero-veil" />
        <div className="hero-rays" />
        <div className="hero-grain" />
      </div>

      <div className="hero-inner">
        <div className="hero-copy">
          <div className="eyebrow light"><span className="dot" /> Heaven's Step-Up Gacha</div>
          <h1>ヘブンズ<br /><span className="gold">ショット</span></h1>
          <h2>初回限定 ステップアップキャンペーン</h2>
          <p className="lede">
            通常なら参加費1万円＋プレイ費1万円のところ、初入金の方限定で
            このキャンペーン専用価格に。最大 <b>¥150,000</b> の賞金が、
            階段の頂点で待っています。
          </p>
          <div className="price-row">
            <span className="price-old">¥10,000</span>
            <span className="price-arrow">→</span>
            <span className="price-new">¥4,000<small>～</small></span>
            <span className="price-tag">今だけ参加費無料</span>
          </div>
          <div className="cta-row">
            <GachaButton variant="gold" onClick={() => onJump("steps")}>
              賞金テーブルを見る <span className="arrow">→</span>
            </GachaButton>
            <GachaButton variant="ghost-light" onClick={() => onJump("how")}>
              参加方法
            </GachaButton>
          </div>
        </div>

        <div className="hero-stats">
          <div className="hero-stat">
            <div className="lbl">MAX PRIZE</div>
            <div className="val gold">¥150,000</div>
          </div>
          <div className="hero-stat">
            <div className="lbl">参加費</div>
            <div className="val">無料 <small>(STEP1)</small></div>
          </div>
          <div className="hero-stat">
            <div className="lbl">かけ条件</div>
            <div className="val">×1</div>
          </div>
        </div>
      </div>

      <div className="hero-bottom-fade" />
    </section>
  );
}

function RosterStrip() {
  return (
    <div className="roster-strip">
      <div className="roster-eyebrow">
        <span className="line" />
        <span>SEVEN GUARDIANS</span>
        <span className="line" />
      </div>
      <div className="roster-row">
        {ROSTER.map(c => (
          <div className="roster-card" key={c.id}>
            <div className="roster-orb">
              <img src={HERO_CHARS[c.id]} alt={c.name} />
            </div>
            <div className="roster-name">{c.name}</div>
            <div className="roster-role">{c.role}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepsSection({ active, setActive }) {
  const progressPct = ((active - 0.5) / 3) * 100;
  return (
    <section className="section" id="steps">
      <div className="section-eyebrow">Step Up Tower</div>
      <h3>3つの階段、<span className="accent">頂きへ</span></h3>
      <p className="sub">
        順に登るほど賞金は跳ね上がる。STEP1から順番に挑戦してください。各ステップ1人1回限定。
      </p>

      <div className="tower">
        {STEPS.map(s => (
          <div
            key={s.id}
            className={`step-card ${active === s.id ? "active" : ""}`}
            onClick={() => setActive(s.id)}
          >
            <div className="glow" />
            {s.feeFree && <div className="step-badge">STEP1 無料</div>}
            <div className="step-numplate">
              <span className="lbl">STEP</span>
              <span className="n">{s.id}</span>
            </div>
            <div className="step-body">
              <div className="step-name">{s.name}</div>
              <div className="step-meta">
                <span>参加費{s.feeFree ? <b><s style={{opacity:0.5}}>{s.fee}</s> 無料</b> : <b>{s.fee}</b>}</span>
                <span>BUY額<b>{s.buy}</b></span>
                <span>かけ条件<b>{s.mult}</b></span>
                <span>挑戦回数<b>{s.limit}</b></span>
              </div>
            </div>
            <div className="step-char">
              <img src={HERO_CHARS[s.char]} alt="" />
            </div>
            <div className="prize-panel">
              <div className="l">PRIZE</div>
              <div className="a"><span className="yen">¥</span>{s.prize.toLocaleString()}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="tower-progress">
        <div className="fill" style={{ width: `${progressPct}%` }} />
        <div className="marker" style={{ left: `${progressPct}%` }}>{active}</div>
      </div>

      <div className="code-card">
        <div className="deco" />
        <div className="section-eyebrow">Bonus Code</div>
        <h3 style={{ fontSize: 36, marginTop: 8 }}>
          STEP1 参加費 ¥4,000 → <span style={{color: "var(--crimson)"}}>無料</span>
        </h3>
        <p style={{ maxWidth: 520, margin: "0 auto 22px", color: "rgba(11,21,48,0.7)", position: "relative", zIndex: 2 }}>
          下記のコードをカスタマーサポートへ送信してください。クリックでコピーできます。
        </p>
        <CodePill code="スペシャルステップ" />
      </div>
    </section>
  );
}

function CodePill({ code }) {
  const [copied, setCopied] = useState(false);
  return (
    <div className={`code-pill ${copied ? "copied" : ""}`} onClick={() => {
      navigator.clipboard?.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }}>
      <span>{code}</span>
      <span className="copy">{copied ? "✓ COPIED" : "COPY"}</span>
    </div>
  );
}

function AccentChar({ src, demon, position = "tr" }) {
  return (
    <div className={`accent-char ${position} ${demon ? "demon" : ""}`}>
      <div className="orb" />
      <img src={src} alt="" />
    </div>
  );
}

function HowSection() {
  return (
    <section className="section" id="how">
      <AccentChar src="assets/char-celesta.png" position="tr" />
      <div className="section-eyebrow">How To Join</div>
      <h3>参加から賞金まで <span className="accent">7ステップ</span></h3>
      <p className="sub">
        申請の順序を守れば、迷うことなく頂上まで辿り着けます。
      </p>
      <div className="how-grid">
        {HOW.map(s => (
          <div key={s.n} className="how-card">
            <div className="num">{s.n}</div>
            <div className="step-stamp">STEP {s.n}</div>
            <h4>{s.t}</h4>
            <p>{s.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function GamesSection() {
  return (
    <section className="section" id="games">
      <AccentChar src="assets/char-arquel.png" position="bl" />
      <div className="section-eyebrow">Target Games</div>
      <h3>対象機種<span className="accent">一覧</span></h3>
      <p className="sub">
        以下の Pragmatic Play 製スロットからお選びいただけます。
      </p>
      <div className="games-grid">
        {GAMES.map(g => (
          <div key={g.name} className="game-tile">
            <img
              className="game-tile-img"
              src={"/assets/game_" + g.name.toLowerCase().replace(/\s+/g, "_") + ".jpg?v=7"}
              alt={g.name}
              loading="lazy"
            />
            <div className="game-tile-body">
              <div className="game-tile-name">{g.name}</div>
              <div className="meta">{g.p}</div>
            </div>
            {g.hot && <span className="hot">HOT</span>}
          </div>
        ))}
      </div>
    </section>
  );
}

function FaqSection({ demon }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <AccentChar src={demon ? "assets/char-lilicia.png" : "assets/char-verdan.png"} demon={demon} position="tr" />
      <div className="section-eyebrow">FAQ</div>
      <h3>よくあるご<span className="accent">質問</span></h3>
      <p className="sub">参加前にご確認ください。</p>
      <div className="faq-list">
        {FAQ.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span style={{ display: "flex", alignItems: "center" }}>
                <span className="qmark">Q</span>{f.q}
              </span>
              <span className="faq-toggle">+</span>
            </div>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final">
      <div className="section-eyebrow">Are You Ready?</div>
      <h3>ARE YOU READY?</h3>
      <p>初入金限定の特別キャンペーン。コードを使って、お得にステップアップ。</p>
      <div className="copy-row"><CodePill code="スペシャルステップ" /></div>
      <GachaButton variant="crimson" href="https://heavenshot-apply.slotenpromotion.com/">PUSH</GachaButton>
    </section>
  );
}

function Terms() {
  return (
    <div className="terms">
      <div className="terms-inner">
        <h4>利用規約・注意事項</h4>
        <ul>
          <li>本キャンペーンは初入金の方限定です。</li>
          <li>本キャンペーンは、予告なく変更または中止する場合があります。</li>
          <li>ステップは1st SHOTから順番に挑戦する必要があります。</li>
          <li>各ステップ、1人1回のみ挑戦可能です。</li>
          <li>参加費とは別に、ボーナスBUYの費用が必要となります。</li>
          <li>参加申請後に対象金額のボーナスBUYを行うと、そのプレイがイベントの対象となります。</li>
          <li>賞金付与は勝利確定の翌日18時より順次配布いたします。</li>
          <li>不正行為が発覚した場合は、参加資格を剥奪し、アカウントを凍結する場合があります。</li>
          <li>通常のヘブンズショット（1万・5万・10万コース）への参加も可能です。</li>
          <li>他のプロモーションとの併用はできません。</li>
        </ul>
      </div>
    </div>
  );
}

function FooterBar() {
  return (
    <div className="footer-bar">
      <BrandMark size={28} />
      <div>© 2026 ステップアップ Campaign. All rights reserved.</div>
    </div>
  );
}

const HERO_BGS = {
  team: "assets/scene-team.png",
  stairs: "assets/scene-stairs.png",
  divide: "assets/scene-divide.png",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "demon": false,
  "activeStep": 1,
  "heroBg": "team"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState(tweaks.activeStep || 1);

  useEffect(() => {
    document.body.classList.toggle("demon", !!tweaks.demon);
  }, [tweaks.demon]);

  useEffect(() => { setActive(tweaks.activeStep); }, [tweaks.activeStep]);

  const onJump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top: y, behavior: "smooth" });
  };

  return (
    <>
      <div className="page-bg" />
      <TopBar />
      <Hero heroBg={HERO_BGS[tweaks.heroBg] || HERO_BGS.team} onJump={onJump} />
      <StepsSection active={active} setActive={(n) => { setActive(n); setTweak("activeStep", n); }} />
      <HowSection />
      <GamesSection />
      <FaqSection demon={tweaks.demon} />
      <FinalCTA />
      <Terms />
      <FooterBar />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakToggle label="Demon Mode" value={tweaks.demon} onChange={v => setTweak("demon", v)} />
        </TweakSection>
        <TweakSection title="Step tower">
          <TweakRadio
            label="Active step"
            value={tweaks.activeStep}
            options={[{label:"01", value:1},{label:"02", value:2},{label:"03", value:3}]}
            onChange={v => setTweak("activeStep", v)}
          />
        </TweakSection>
        <TweakSection title="Hero background">
          <TweakRadio
            label="Scene"
            value={tweaks.heroBg}
            options={[
              {label:"Team", value:"team"},
              {label:"Stairs", value:"stairs"},
              {label:"Divide", value:"divide"},
            ]}
            onChange={v => setTweak("heroBg", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);