/* Smash League — landing-page section components.
   All components exported to window for cross-script access. */

const { useState, useEffect, useRef, useMemo } = React;

const PLATFORMS = [
{ id: "steam", name: "Steam", sub: "PC · Mac · Linux", cta: "Wishlist on Steam" },
{ id: "ps", name: "PS5", sub: "PlayStation 5", cta: "Pre-order on PS Store" },
{ id: "xbox", name: "Xbox", sub: "Series X|S", cta: "Pre-order on Xbox" }];


const TweakBadge = ({ children }) =>
<span className="lp-mono" style={{ color: "var(--c-yellow)" }}>{children}</span>;


/* ── annotations ─────────────────────────── */
const Anno = ({ n, text, style }) =>
<div className="anno" style={style}>
    <div className="anno__num">{n}</div>
    <div className="anno__text">{text}</div>
  </div>;


/* ── nav ─────────────────────────────────── */
const Nav = ({ onBuy }) =>
<nav className="lp-nav">
    <a className="lp-nav__brand--img" href="#top">
      <img className="lp-nav__logo" src="assets/smash-logo.png" alt="Spikeball Smash" data-comment-anchor="710fbe9bd4-img-28-7" />
      <span className="by">by THE MUNKY</span>
    </a>
    <div className="lp-nav__links">
      <a className="lp-nav__link" href="#features">Features</a>
      <a className="lp-nav__link" href="#modes">Modes</a>
      <a className="lp-nav__link" href="#gallery">Media</a>
      <a className="lp-nav__link" href="#community">Community</a>
      <a className="lp-nav__link" href="#roadmap">Roadmap</a>
    </div>
    <div className="lp-nav__cta">
      <span className="lp-mono lp-nav__launch" style={{ color: "var(--c-yellow)", opacity: 0.85 }}>
        <span className="pulse-dot" aria-hidden></span>
        Launches Aug 14
      </span>
      <button className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 13 }} onClick={onBuy}>
        PLAY NOW
      </button>
    </div>
  </nav>;


/* ── hero ────────────────────────────────── */
const Hero = ({ platform, setPlatform, annotate }) => {
  const cta = PLATFORMS.find((p) => p.id === platform) || PLATFORMS[0];
  const vidRef = useRef(null);
  const [playing, setPlaying] = useState(false);
  const togglePlay = () => {
    const v = vidRef.current;
    if (!v) return;
    if (v.paused || v.muted) {
      v.muted = false;
      v.currentTime = 0;
      v.play();
      setPlaying(true);
    } else {
      v.pause();
      setPlaying(false);
    }
  };
  return (
    <section className="hero" id="top">
      <div className="hero__bgline" />
      <div className="hero__halftone" />
      <div className="hero__pricetag">
        <span className="small">EARLY-ACCESS</span>
        <span className="big">$4.99</span>
        <span className="tiny">Limited time only!</span>
      </div>
      <div className="hero__inner">
        <div className="hero__copy">
          <div className="hero__kicker">
            <span className="dot" />
            <span>Aug 14 · Cross-Play Launch</span>
          </div>
          <h1 className="hero__title" data-comment-anchor="17b118f90f-h1-69-11">
            <span className="yellow">SPIKE.</span>
            <br />
            <span className="smash">SMASH.</span>
            <br />
            <span>REPEAT.</span>
          </h1>
          <p className="hero__lede">
            The first‑ever roundnet video game. 1–4 players, online or couch, with
            cross‑play across PC and console. Pick up. Spike. Stay all night.
          </p>
          <div className="hero__cta">
            <button className="btn btn-primary">{cta.cta} →</button>
            <a className="hero__sub-cta" href="#gallery" data-comment-anchor="500483fc91-button-95-13">
              See gameplay <span aria-hidden>↓</span>
            </a>
          </div>
          <div className="platform-tabs" role="tablist" aria-label="Platform">
            {PLATFORMS.map((p) =>
            <button
              key={p.id}
              role="tab"
              aria-selected={platform === p.id}
              className="platform-tab"
              onClick={() => setPlatform(p.id)}>
              
                <span className="plat-name">{p.name}</span>
                <span className="plat-sub">{p.sub}</span>
              </button>
            )}
          </div>
        </div>
        <div className={`hero__keyart hero__keyart--video ${playing ? "is-playing" : ""}`}>
          <video
            ref={vidRef}
            className="hero__video"
            src="assets/launch-trailer.mp4"
            poster="assets/smash-hero.jpg"
            muted
            loop
            autoPlay
            playsInline
            preload="metadata"
            onPlay={() => setPlaying(true)}
            onPause={() => setPlaying(false)}
            onEnded={() => setPlaying(false)}
            controls={playing} style={{ padding: "0px", margin: "0px" }} />
          
          <div className="hero__keyart--real__tag" data-comment-anchor="8d8164700d-div-130-11">
            <span>LAUNCH TRAILER</span>
          </div>
          {!playing &&
          <div className="trailer__play hero__play" onClick={togglePlay} role="button" aria-label="Play trailer with sound">
              <svg viewBox="0 0 24 24" aria-hidden>
                <path d="M8 5v14l11-7z" />
              </svg>
            </div>
          }
          {!playing &&
          <div className="hero__video__cta">▶ TAP TO PLAY · WITH SOUND</div>
          }
          {playing &&
          <button className="trailer__mute" onClick={() => {const v = vidRef.current;if (v) v.muted = !v.muted;}} aria-label="Toggle sound">
              🔊
            </button>
          }
        </div>
      </div>
      <div className="hero__ticker" aria-hidden>
        <div className="hero__ticker__inner">
          <span>Cross-play enabled</span>
          <span>2v2 ranked open</span>
          <span>New season every 6 weeks</span>
          <span>Steam · PS5 · Xbox Series</span>
          <span>Local + online up to 4 players</span>
          <span>Cross-play enabled</span>
          <span>2v2 ranked open</span>
          <span>New season every 6 weeks</span>
          <span>Steam · PS5 · Xbox Series</span>
          <span>Local + online up to 4 players</span>
        </div>
      </div>
      {annotate &&
      <>
          <Anno n="1" text="Tightened hero — single dominant CTA + platform switcher" style={{ top: 220, left: 40 }} />
          <Anno n="2" text="Animated ticker reinforces 'live launch event' urgency" style={{ bottom: 80, right: 80 }} />
        </>
      }
    </section>);

};

/* ── trailer / banner ────────────────────── */
const Trailer = ({ onPlay }) => {
  return (
    <section className="lp-section--ink" style={{ paddingTop: 0, paddingBottom: 96 }}>
      <div className="trailer trailer--banner">
        <img
          src="assets/banner.jpg"
          alt="Spikeball Smash — beach tournament key art"
          className="trailer__banner-img" />
        
      </div>
    </section>);

};


/* ── features ─────────────────────────────── */
const FEATURES = [
{ icon: "★", title: "Official Roundnet", body: "The only licensed roundnet video game — built with the pros who play it." },
{ icon: "⚡", title: "1–4 Player Madness", body: "Solo dive bombs or 2v2 chaos with friends, local or online." },
{ icon: "↔", title: "True Cross-Play", body: "PC, PS5, Xbox — all one party. Crossbuy with friends, cross-progression too." },
{ icon: "⌖", title: "Ranked + Casual", body: "Six-week seasons, glicko-2 matchmaking, party rules for the people you tolerate." },
{ icon: "◐", title: "Make a Player", body: "Build a baller. Drip them out with unlocks, taunts, signature spikes." },
{ icon: "⛱", title: "Three Worlds", body: "The beach, the quad, the arena — all with their own physics quirks." }];


const Features = ({ annotate }) =>
<section className="lp-section lp-section--sand" id="features">
    <div className="sec-head">
      <div>
        <div className="lp-eyebrow" style={{ color: "var(--c-hot)" }}>// 06 features</div>
        <h2 className="sec-head__title">
          Built to <span className="strike">spike.</span>
        </h2>
      </div>
      <div className="sec-head__meta">
        Game design notes<br />
        Version 1.0 launch build
      </div>
    </div>
    <div className="feat">
      {FEATURES.map((f, i) =>
    <div key={i} className="feat__cell">
          <div className="feat__num">FT-{String(i + 1).padStart(2, "0")}</div>
          <div className="feat__icon">{f.icon}</div>
          <h3 className="feat__title">{f.title}</h3>
          <p className="feat__body">{f.body}</p>
        </div>
    )}
    </div>
    {annotate &&
  <Anno n="3" text="Numbered, monospace-labeled features — scannable, ownable" style={{ top: 320, right: 100 }} />
  }
  </section>;


/* ── modes switcher ───────────────────────── */
const MODES = [
{
  id: "beach",
  name: "BEACH",
  sub: "Sun. Sand. Trash talk.",
  title: "Where it all started.",
  body: "Soft ball physics, palm-tree wind, and a 4pm sun that gets in your eyes. Casual lobbies, drop-in matches, and the slowest spikes in the game.",
  stats: [["Lobbies", "Drop-in"], ["Wind", "Yes"], ["Spike speed", "Low"], ["Players", "2–4"]],
  big: "BCH",
  src: "assets/screen-04.jpg"
},
{
  id: "quad",
  name: "QUAD",
  sub: "Campus champs only.",
  title: "Bring it to the lawn.",
  body: "Flat grass, hard bounces, and a backboard wall that turns ricochets into kill shots. Six-week seasons, ranked play, and the loudest crowd in the game.",
  stats: [["Lobbies", "Ranked 2v2"], ["Wind", "None"], ["Spike speed", "Med"], ["Players", "2v2"]],
  big: "QUD",
  src: "assets/screen-05.jpg"
},
{
  id: "arena",
  name: "ARENA",
  sub: "Tournament regulation.",
  title: "Lights on. Cameras up.",
  body: "Official roundnet tournament rules with broadcast camera angles, slow-mo replays on every diving spike, and a crowd that erupts at every kill.",
  stats: [["Lobbies", "Tournament"], ["Wind", "None"], ["Spike speed", "High"], ["Players", "2v2 / 4v4"]],
  big: "ARN",
  src: "assets/screen-16.jpg"
}];


const Modes = ({ annotate }) => {
  const [active, setActive] = useState("quad");
  const mode = MODES.find((m) => m.id === active);
  return (
    <section className="lp-section lp-section--ink" id="modes">
      <div className="sec-head">
        <div>
          <div className="lp-eyebrow">// 03 environments</div>
          <h2 className="sec-head__title">
            Three <span className="accent">worlds.</span>
            <br />One sport.
          </h2>
        </div>
        <div className="sec-head__meta" style={{ color: "var(--c-yellow)" }}>
          Mode 0{MODES.findIndex((m) => m.id === active) + 1} of 03
        </div>
      </div>
      <div className="modes">
        <div className="modes__list" role="tablist">
          {MODES.map((m) =>
          <button
            key={m.id}
            role="tab"
            aria-selected={active === m.id}
            className="modes__item"
            onClick={() => setActive(m.id)}>
            
              <div className="modes__item__num">MODE · 0{MODES.indexOf(m) + 1}</div>
              <div className="modes__item__name">{m.name}</div>
              <div className="modes__item__sub">{m.sub}</div>
            </button>
          )}
        </div>
        <div className="modes__panel">
          <div className="modes__visual modes__visual--real" key={mode.id}>
            <img src={mode.src} alt={`${mode.name} mode screenshot`} />
            <div className="modes__visual__label">{mode.name} · IN-GAME</div>
          </div>
          <div className="modes__copy">
            <h4 key={mode.id + "h"}>{mode.title}</h4>
            <p key={mode.id + "p"}>{mode.body}</p>
            <div className="modes__stats">
              {mode.stats.map(([k, v]) =>
              <div key={k}>
                  <div className="modes__stat__k">{k}</div>
                  <div className="modes__stat__v">{v}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {annotate &&
      <Anno n="4" text="Tabbed modes = three landing pages in one — supports paid traffic A/B" style={{ top: 240, right: 80 }} />
      }
    </section>);

};

/* ── gallery ──────────────────────────────── */
const GALLERY_TILES = [
{ big: "01", label: "BEACH TOURNAMENT · LIVE", src: "assets/screen-03.jpg" },
{ big: "02", label: "SET SERVE · OCEAN COURT", src: "assets/screen-04.jpg" },
{ big: "03", label: "QUAD · DIVING SAVE", src: "assets/screen-05.jpg" },
{ big: "04", label: "BEACH · OVERHEAD 4-PLAYER", src: "assets/screen-06.jpg" },
{ big: "05", label: "CROWD · MAIN EVENT", src: "assets/screen-07.jpg" },
{ big: "06", label: "PIER COURT · SUNSET", src: "assets/screen-10.jpg" },
{ big: "07", label: "ARENA · LIGHTS UP", src: "assets/screen-16.jpg" },
{ big: "08", label: "FESTIVAL · SETUP YOUR GAME", src: "assets/screen-festival.jpg" }];


const Gallery = ({ onOpen }) => {
  const [playing, setPlaying] = useState(null);
  return (
    <section className="lp-section lp-section--ink" id="gallery">
      <div className="sec-head">
        <div>
          <div className="lp-eyebrow">// 08 screenshots · 04 clips</div>
          <h2 className="sec-head__title">
            See it <span className="accent">in motion.</span>
          </h2>
        </div>
        <div className="sec-head__meta">
          Hover any tile to preview.<br />Click to expand.
        </div>
      </div>
      <div className="gallery">
        {GALLERY_TILES.map((t, i) =>
        <div
          key={i}
          className={`tile tile--img ${playing === i ? "playing" : ""}`}
          onMouseEnter={() => setPlaying(i)}
          onMouseLeave={() => setPlaying(null)}
          onClick={() => onOpen(i)}>
            <img src={t.src} alt={t.label} loading="lazy" />
            <div className="tile__big">{t.big}</div>
            <div className="tile__label">{t.label}</div>
            <div className="tile__play" />
          </div>
        )}
      </div>
    </section>);

};

/* ── characters ───────────────────────────── */
const CHARS = [
{ name: "MAVIS", role: "Defender · Fast" },
{ name: "BOBO", role: "Spiker · Power" },
{ name: "REX", role: "Setter · All-Round" },
{ name: "DUNE", role: "Defender · Tank" },
{ name: "JINX", role: "Spiker · Trick" },
{ name: "OZZIE", role: "Setter · Tactical" },
{ name: "BLAZE", role: "Spiker · Glass-cannon" },
{ name: "FAYE", role: "Defender · Quick" }];


const Characters = () =>
<section className="lp-section lp-section--paper">
    <div className="sec-head">
      <div>
        <div className="lp-eyebrow" style={{ color: "var(--c-hot)" }}>// 08 launch ballers</div>
        <h2 className="sec-head__title">
          Find <span className="accent">your</span> baller.
        </h2>
      </div>
      <div className="sec-head__meta">Scroll →</div>
    </div>
    <div className="chars">
      {CHARS.map((c, i) =>
    <div key={c.name} className="char">
          <div className="char__num">0{i + 1} / 08</div>
          <div className="char__big">{c.name.slice(0, 2)}</div>
          <div className="char__meta">
            <h4 className="char__name">{c.name}</h4>
            <div className="char__role">{c.role}</div>
          </div>
        </div>
    )}
    </div>
  </section>;


/* ── crossplay v2 — live lobby ─────────── */
/* Live-feeling number that jitters around a baseline at irregular intervals,
   so the lobby reads as a real-time scoreboard rather than static copy. */
const LiveNumber = ({ base, jitter = 3, minIv = 600, maxIv = 2200, fmt = (n) => String(n) }) => {
  const [v, setV] = useState(base);
  useEffect(() => {
    let id;
    const tick = () => {
      const delta = Math.round((Math.random() - 0.5) * 2 * jitter);
      setV(Math.max(0, base + delta));
      id = setTimeout(tick, minIv + Math.random() * (maxIv - minIv));
    };
    id = setTimeout(tick, Math.random() * 1000);
    return () => clearTimeout(id);
  }, [base, jitter, minIv, maxIv]);
  return fmt(v);
};

/* Models a real spikeball rally streak per Travis's formula:
     N_t = N_(t-1) + 1  on a successful hit
     N_t = 0            when the rally ends
   Each tick is a hit attempt; chance the rally ends this tick grows with N
   (rallies rarely survive past ~10 touches). After a reset there's a longer
   pause before the next rally — players reset, new serve — matching real
   professional spikeball pacing. */
const RALLY_HIT_IV = [2000, 3400];   // ms between touches mid-rally
const RALLY_RESET_IV = [5500, 8500]; // ms paused between rallies (serve setup)
const RallyCount = () => {
  const [n, setN] = useState(3);
  const nRef = useRef(3);
  useEffect(() => {
    let id;
    const tick = () => {
      // Compute next + delay SYNCHRONOUSLY before scheduling — React 18's
      // functional updaters run on the next commit, so reading prev inside
      // setN(prev => ...) leaves nextDelay undefined when setTimeout runs.
      const prev = nRef.current;
      const endProb = Math.min(0.95, 0.12 + prev * 0.07);
      const next = Math.random() < endProb ? 0 : prev + 1;
      nRef.current = next;
      setN(next);
      const iv = next === 0 ? RALLY_RESET_IV : RALLY_HIT_IV;
      id = setTimeout(tick, iv[0] + Math.random() * (iv[1] - iv[0]));
    };
    id = setTimeout(tick, RALLY_HIT_IV[0] + Math.random() * (RALLY_HIT_IV[1] - RALLY_HIT_IV[0]));
    return () => clearTimeout(id);
  }, []);
  return n === 0 ? "🙌 RALLY" : `${n} ${n === 1 ? "hit" : "hits"}`;
};

const CrossPlay = () =>
<section className="lp-section lp-section--ink" data-comment-anchor="cd86c256ab-section-368-1">
    <div className="xplay2">
      <div className="xplay2__copy">
        <div>
          <div className="lp-eyebrow">// 01 sport · 03 platforms</div>
          <h2 className="sec-head__title" style={{ marginTop: 8 }}>
            One party.<br /><span className="accent">All platforms.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.8, maxWidth: 460, marginTop: 16 }}>
            Cross‑play and cross‑progression at launch. Your friends on Xbox,
            your friends on Steam, your roommate on the couch — same lobby,
            same rank, same trash talk channel. No accounts to migrate. No
            settings to mirror. Just queue.
          </p>
        </div>
        <ul className="xplay2__platlist">
          <li>
            <span className="num">01</span>
            <span data-comment-anchor="5892d533de-span-440-13">Steam</span>
            <span className="plat-sub">PC · Mac · Linux</span>
            <span className="status">LIVE</span>
          </li>
          <li>
            <span className="num">02</span>
            <span>PlayStation 5</span>
            <span className="plat-sub">Disc · Digital</span>
            <span className="status">LIVE</span>
          </li>
          <li>
            <span className="num">03</span>
            <span>Xbox Series</span>
            <span className="plat-sub">X · S</span>
            <span className="status">LIVE</span>
          </li>
        </ul>
      </div>

      <div className="lobby lobby--v2" aria-label="Live cross-platform match preview" data-comment-anchor="df27c15c6a-div-402-7">
        <div className="lobby__head">
          <div className="lobby__title">
            <span className="lottie-slot" data-lottie="pulse" aria-hidden></span>
            Lobby 7-A
          </div>
          <div className="lobby__live">LIVE</div>
        </div>
        <div className="lobby__meta">
          Ranked 2v2 · Quad · 38ms median rebalance
        </div>

        <ul className="lobby__roster">
          <li>
            <span className="plat">STEAM</span>
            <span className="name">AVERY_06</span>
            <span className="ping"><LiveNumber base={22} jitter={4} minIv={700} maxIv={2400} /><i>ms</i></span>
          </li>
          <li>
            <span className="plat">XBOX</span>
            <span className="name">MARLON.W</span>
            <span className="ping"><LiveNumber base={31} jitter={5} minIv={900} maxIv={2800} /><i>ms</i></span>
          </li>
          <li className="vs">— vs —</li>
          <li>
            <span className="plat">PS5</span>
            <span className="name">CRYSTAL_TT</span>
            <span className="ping"><LiveNumber base={19} jitter={3} minIv={800} maxIv={2200} /><i>ms</i></span>
          </li>
          <li>
            <span className="plat">STEAM</span>
            <span className="name">BLAZER</span>
            <span className="ping"><LiveNumber base={24} jitter={4} minIv={650} maxIv={2600} /><i>ms</i></span>
          </li>
        </ul>

        <div className="lobby__chips">
          <div className="lobby__chip">
            <div className="k">Avg ping</div>
            <div className="v"><LiveNumber base={24} jitter={4} minIv={900} maxIv={2400} fmt={(n) => `${n}ms`} /></div>
          </div>
          <div className="lobby__chip">
            <div className="k">Rally</div>
            <div className="v" data-comment-anchor="7b0ef61654-div-507-13"><RallyCount /></div>
          </div>
          <div className="lobby__chip">
            <div className="k">Watching</div>
            <div className="v"><LiveNumber base={1402} jitter={45} minIv={1300} maxIv={3200} fmt={(n) => n.toLocaleString()} /></div>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ── community ────────────────────────────── */
const Community = ({ annotate }) =>
<section className="lp-section lp-section--sand" id="community">
    <div className="community">
      <div className="community__card community__card--real">
        <div className="community__card__photo">
          <img src="assets/screen-07.jpg" alt="" aria-hidden="true" />
        </div>
        <div className="lp-mono" style={{ marginBottom: 24, opacity: 0.6 }}>// JOIN THE CIRCLE</div>
        <h2 className="community__title">
          The discord<br />is the locker<br />room.
        </h2>
        <p className="community__body">
          14,000+ players already inside. Patch notes drop first, ranked tournaments
          live every Friday, and the dev team actually shows up.
        </p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", position: "relative", zIndex: 2 }}>
          <button className="btn btn-dark">Join Discord →</button>
          <button className="btn btn-ghost" style={{ color: "var(--c-ink)", borderColor: "var(--c-ink)" }}>
            Find a tournament
          </button>
        </div>
      </div>
      <div className="community__stats">
        <div className="community__stat">
          <div className="community__stat__k">// Discord members</div>
          <div className="community__stat__v">14,402</div>
        </div>
        <div className="community__stat">
          <div className="community__stat__k">// Pre-orders</div>
          <div className="community__stat__v">38K+</div>
        </div>
        <div className="community__stat">
          <div className="community__stat__k">// Closed beta runs</div>
          <div className="community__stat__v">102K</div>
        </div>
      </div>
    </div>
    {annotate &&
  <Anno n="5" text="Community first — fits Keith's stated 'where should community live?' need" style={{ top: 120, right: 100 }} />
  }
  </section>;


/* ── email capture ────────────────────────── */
const Email = ({ annotate }) => {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!/\S+@\S+\.\S+/.test(email)) return;
    setSent(true);
  };
  return (
    <section className="email">
      <div className="email__inner">
        <div className="lp-eyebrow" style={{ marginBottom: 16 }}>// LAUNCH-DAY DROP</div>
        <h2 className="email__title">
          Hear it <em>first.</em>
        </h2>
        <p className="email__sub">
          We email when ranked seasons open, when new modes drop, and never
          otherwise. Probably.
        </p>
        {sent ?
        <div className="email__success">✓ You're on the list. See you on launch day.</div> :

        <form className="email__form" onSubmit={onSubmit}>
            <input
            className="email__input"
            type="email"
            placeholder="you@where-you-spike.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)} />
          
            <button className="email__button" type="submit">
              Get the drop →
            </button>
          </form>
        }
        <div className="email__fine">// no spam · just spike · unsubscribe whenever</div>
      </div>
      {annotate &&
      <Anno n="6" text="Email capture above the fold of footer = launch CRM seed" style={{ top: 30, right: 60 }} />
      }
    </section>);

};

/* ── press ────────────────────────────────── */
const PRESS = [
{ quote: "Stupid. Fun. Genuinely the best party game of the year.", name: "GAMESPLOSION", score: "9.1 / 10" },
{ quote: "A party game with surprising depth and a banger soundtrack.", name: "ROCKETPAPER", score: "★★★★½" },
{ quote: "Roundnet was made for a video game and nobody noticed.", name: "TILTED MAG", score: "Editor's Pick" }];


const Press = () =>
<section className="lp-section lp-section--sand">
    <div className="sec-head">
      <div>
        <div className="lp-eyebrow" style={{ color: "var(--c-hot)" }}>// PRESS &amp; CREATORS</div>
        <h2 className="sec-head__title">
          Heard from <span className="accent">people<br />who matter.</span>
        </h2>
      </div>
      <div className="sec-head__meta">
        Closed beta · April 2026<br />Quotes used with permission
      </div>
    </div>
    <div className="press">
      {PRESS.map((p, i) =>
    <div key={i} className="press__card">
          <div className="lp-mono" style={{ marginBottom: 12, color: "var(--c-hot)" }}>// 0{i + 1}</div>
          <p className="press__quote">"{p.quote}"</p>
          <div className="press__source">
            <div className="press__name">{p.name}</div>
            <div className="press__score">{p.score}</div>
          </div>
        </div>
    )}
    </div>
  </section>;


/* ── roadmap ──────────────────────────────── */
const ROADMAP = [
{ when: "NOW · S0", head: "Closed Beta", items: ["8 ballers", "3 maps", "Crossplay live", "Ranked queue"], now: true },
{ when: "AUG · S1 LAUNCH", head: "Spike Drop", items: ["Launch day on all platforms", "Tournament mode", "Two new arenas", "Season pass"] },
{ when: "OCT · S2", head: "Beach Bash", items: ["4 new ballers", "Beach map pack", "Co-op survival", "Photo mode"] },
{ when: "DEC · S3", head: "Cold Court", items: ["Indoor arena", "Spectator UI", "Twitch overlays", "Custom rooms"] }];


const Roadmap = ({ annotate }) =>
<section className="lp-section lp-section--ink" id="roadmap">
    <div className="sec-head">
      <div>
        <div className="lp-eyebrow">// 12-month plan</div>
        <h2 className="sec-head__title">
          What's <span className="accent">next.</span>
        </h2>
      </div>
      <div className="sec-head__meta" style={{ opacity: 0.7 }}>
        Subject to change because<br />
        the internet will tell us.
      </div>
    </div>
    <div className="roadmap">
      {ROADMAP.map((r, i) =>
    <div key={i} className="roadmap__col" data-now={r.now ? "true" : "false"}>
          <div className="roadmap__when">
            {r.now && <span className="badge">NOW</span>}
            {r.when}
          </div>
          <h4 className="roadmap__head">{r.head}</h4>
          <ul className="roadmap__list">
            {r.items.map((it) => <li key={it}>{it}</li>)}
          </ul>
        </div>
    )}
    </div>
    {annotate &&
  <Anno n="7" text="Roadmap = retention story for press + early players" style={{ top: 240, right: 80 }} />
  }
  </section>;


/* ── faq ──────────────────────────────────── */
const FAQS = [
["Is it actually licensed roundnet?", "Yes. Built with Spikeball Inc. as the official video game partner — official rules, official ball, all the trash talk."],
["Cross-play, really?", "Day one across Steam, PS5, and Xbox Series. Party up with anyone, anywhere, with full cross-save."],
["How much is it?", "$4.99 launch price. Season passes are optional, free seasons every six weeks."],
["Can I play solo?", "Yes — bots scale from chaotic to actually mean. Solo ranked queue is a no-pressure 1v1."],
["Will there be a Switch / mobile version?", "Switch 2 is on the roadmap for early 2027. Mobile is being scoped."],
["What if my friends play on the couch?", "Local 1–4 player on every platform. Split-screen, hot-seat, and pass-the-controller modes all ship at launch."]];


const FAQ = () =>
<section className="lp-section lp-section--paper">
    <div className="sec-head">
      <div>
        <div className="lp-eyebrow" style={{ color: "var(--c-hot)" }}>// COMMONLY ASKED</div>
        <h2 className="sec-head__title">Questions, answered.</h2>
      </div>
      <div className="sec-head__meta">
        Can't find it?<br />
        <a href="#" style={{ color: "var(--c-hot)" }}>helpme@thesmash.league</a>
      </div>
    </div>
    <div>
      {FAQS.map(([q, a], i) =>
    <details key={i} className="faq__item" open={i === 0}>
          <summary>
            <span className="faq__q">{q}</span>
            <span className="faq__plus">+</span>
          </summary>
          <p className="faq__a">{a}</p>
        </details>
    )}
    </div>
  </section>;


/* ── footer ───────────────────────────────── */
const Foot = () =>
<footer className="foot">
    <div className="foot__mega">SPIKEBALL<br />SMASH</div>
    <div className="foot__grid">
      <div className="foot__col">
        <h5>// spikeball smash</h5>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(244,236,222,0.7)", margin: 0, maxWidth: 320 }}>
          The first official roundnet video game.
          Made by The Munky, published nowhere, available everywhere.
          Cross-play day one.
        </p>
      </div>
      <div className="foot__col">
        <h5>Game</h5>
        <ul>
          <li><a href="#">Features</a></li>
          <li><a href="#">Modes</a></li>
          <li><a href="#">Roadmap</a></li>
          <li><a href="#">Tournament</a></li>
        </ul>
      </div>
      <div className="foot__col">
        <h5>Community</h5>
        <ul>
          <li><a href="#">Discord</a></li>
          <li><a href="#">Find a circle</a></li>
          <li><a href="#">Creator program</a></li>
          <li><a href="#">Press kit</a></li>
        </ul>
      </div>
      <div className="foot__col">
        <h5>Studio</h5>
        <ul>
          <li><a href="#">The Munky</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Privacy</a></li>
        </ul>
      </div>
    </div>
    <div className="foot__bottom">
      <div>© 2026 The Munky · All rights reserved</div>
      <div>Made by people who actually spike.</div>
    </div>
  </footer>;


/* ── sticky buy bar ───────────────────────── */
const StickyBuy = ({ show, platform, setPlatform }) =>
<div className={`stickybuy ${show ? "show" : ""}`} aria-hidden={!show} data-comment-anchor="57f67ee8ba-div-730-1">
    <img src="assets/smash-logo.png" alt="" style={{ height: 26, marginRight: 14, flexShrink: 0 }} />
    <div className="stickybuy__price">$4.99</div>
    <div className="stickybuy__plats" role="tablist">
      {PLATFORMS.map((p) =>
    <button
      key={p.id}
      role="tab"
      aria-selected={platform === p.id}
      className="stickybuy__plat"
      onClick={() => setPlatform(p.id)}>
      
          {p.name}
        </button>
    )}
    </div>
    <button className="stickybuy__cta">
      {PLATFORMS.find((p) => p.id === platform)?.cta || "Buy"} →
    </button>
  </div>;


/* ── lightbox ─────────────────────────────── */
const Lightbox = ({ open, idx, onClose, onPrev, onNext }) => {
  useEffect(() => {
    if (!open) return;
    const h = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft") onPrev();
      if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose, onPrev, onNext]);
  if (!open) return null;
  const tile = GALLERY_TILES[idx];
  return (
    <div className="lbox" onClick={onClose}>
      <div className="lbox__frame" onClick={(e) => e.stopPropagation()}>
        <button className="lbox__close" onClick={onClose}>×</button>
        <div className="lbox__counter">{String(idx + 1).padStart(2, "0")} / 0{GALLERY_TILES.length}</div>
        <button className="lbox__nav lbox__nav--prev" onClick={onPrev}>←</button>
        <button className="lbox__nav lbox__nav--next" onClick={onNext}>→</button>
        <div className="lbox__content lbox__content--real">
          {tile?.src ? <img src={tile.src} alt={tile.label} /> : tile?.big}
        </div>
        <div className="trailer__label" style={{ position: "absolute", bottom: 16, right: 60 }}>
          // {tile?.label}
        </div>
      </div>
    </div>);

};

Object.assign(window, {
  PLATFORMS, Nav, Hero, Trailer, Features, Modes, Gallery,
  Characters, CrossPlay, Community, Email, Press, Roadmap, FAQ, Foot,
  StickyBuy, Lightbox, Anno, GALLERY_TILES
});