/* AcquiCup - pre-login marketing landing page.
 * Shown by app.jsx when there is no session AND the visitor hasn't chosen to sign
 * in / join. CTAs hand off to the Auth screen (onJoin → signup, onSignIn → signin).
 *
 * It is built ENTIRELY from the logged-in app's own shell and primitives so there
 * is no visual jump on sign-in: the same sticky `topnav`/`topfooter`, the 1080px
 * content container (`maxWidth:1080; padding:30px 36px 60px`), the `hero-card`
 * pattern (Dashboard), `PageHead`, the StatBox look, `.card`/`.card-pad`/`.hr`,
 * `.lb` tables (Dashboard "Top players"), `RankChartCard`, and the real `Avatar`/
 * `AiBadge`/`Movement`/`StatusPill` components. Spacing uses the gap-* scale; type
 * uses `.eyebrow`/`.h-xl`/`h3`/`.soft`/`.muted`; buttons use `.btn` variants.
 * No window.ACQ here - every demo is hand-authored static data. Assets: team photos
 * under public/acquisit-team/, AI logos under public/logos/ (CSP img-src 'self'). */

// The three AI opponents (mirrors src/aiPlayers.js - small hand-kept list).
const LANDING_AIS = [
  { id: "claude", name: "Claude", logo: "logos/claude.svg" },
  { id: "chatgpt", name: "ChatGPT", logo: "logos/chatgpt.png" },
  { id: "gemini", name: "Gemini", logo: "logos/gemini.svg" },
];

// StatBox replica - identical markup/sizing to the Dashboard's local StatBox
// (inset accent stripe, 32px icon plate, eyebrow label, 30px mono value, muted sub).
function LandingStat({ icon, color, value, label, sub }) {
  return (
    <div className="card col gap-8" style={{ padding: "16px 18px", boxShadow: "inset 3px 0 0 " + color + ", var(--shadow-card)" }}>
      <div className="row gap-10">
        <span style={{ width: 32, height: 32, borderRadius: 9, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: color, background: "color-mix(in srgb, " + color + " 14%, var(--surface))" }}>
          <Icon name={icon} size={17} stroke={2} />
        </span>
        <span className="eyebrow" style={{ alignSelf: "center" }}>{label}</span>
      </div>
      <span className="mono" style={{ fontSize: 30, fontWeight: 700, lineHeight: 1 }}>{value}</span>
      {sub && <span className="muted" style={{ fontSize: 12.5 }}>{sub}</span>}
    </div>
  );
}

// A flag chip matching the app's .team-flag dimensions (no ACQ teams pre-login, so
// TeamBadge's flag images aren't available - an emoji on the same plate stands in).
function Flag({ emoji }) {
  return <span className="team-flag fallback" style={{ width: 33, height: 23, borderRadius: 4, fontSize: 15, display: "inline-flex", alignItems: "center", justifyContent: "center", background: "var(--surface-2)", border: "1px solid var(--line)" }}>{emoji}</span>;
}

// The real Acquisit brand mark (navy rounded square + white "A"), reused from the
// app's favicon, used for Acquisit players/company. Matches CompanyLogo sizing.
function AcquisitLogo({ size = 24 }) {
  return <img src="assets/acquisit-icon.png" alt="Acquisit" style={{ width: size, height: size, borderRadius: Math.round(size * 0.28), display: "block", flex: "none", boxShadow: "0 1px 2px rgba(15,45,82,.16)" }} />;
}

// Simple monochrome brand marks for the client companies (no asset on file, so drawn
// inline and CSP-safe). Apple silhouette on black; Amazon smile on white.
const APPLE_MARK = (
  <svg viewBox="0 0 24 24" width="66%" height="66%" fill="#fff" aria-hidden="true">
    <path d="M17.46 12.63c-.02-2.2 1.8-3.26 1.88-3.31-1.03-1.5-2.62-1.71-3.19-1.73-1.36-.14-2.65.8-3.34.8-.69 0-1.75-.78-2.88-.76-1.48.02-2.85.86-3.61 2.18-1.54 2.67-.39 6.62 1.11 8.79.73 1.06 1.6 2.25 2.74 2.21 1.1-.04 1.51-.71 2.84-.71 1.33 0 1.7.71 2.86.69 1.18-.02 1.93-1.08 2.65-2.14.84-1.23 1.18-2.42 1.2-2.48-.03-.01-2.3-.88-2.32-3.5z" />
    <path d="M15.29 6.17c.61-.74 1.02-1.77.91-2.79-.88.04-1.94.59-2.57 1.32-.56.65-1.05 1.7-.92 2.7.98.08 1.98-.5 2.58-1.23z" />
  </svg>
);
const AMAZON_MARK = (
  <svg viewBox="0 0 24 24" width="76%" height="76%" fill="none" aria-hidden="true">
    <path d="M4.6 14c2.4 1.8 5.4 2.5 8 2.5 2.2 0 4.5-.6 6.4-1.6" stroke="#FF9900" strokeWidth="1.9" strokeLinecap="round" />
    <path d="M18.7 15.2l1.8-1.1-.5 2.05z" fill="#FF9900" />
  </svg>
);
function plateStyle(size, bg) {
  return { width: size, height: size, borderRadius: Math.round(size * 0.28), background: bg, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", flex: "none", boxShadow: "0 1px 2px rgba(15,45,82,.16)" };
}
// A company brand mark for the Top Companies table: Acquisit favicon, AI logos on a
// white plate, and the two client marks. Mirrors the app's CompanyLogo aesthetic.
function BrandLogo({ id, size = 24 }) {
  if (id === "acquisit") return <AcquisitLogo size={size} />;
  const aiLogo = { claude: "logos/claude.svg", chatgpt: "logos/chatgpt.png", gemini: "logos/gemini.svg" }[id];
  if (aiLogo) return <div style={{ ...plateStyle(size, "#fff"), border: "1px solid var(--line)" }}><img src={aiLogo} alt="" style={{ width: "76%", height: "76%", objectFit: "contain" }} /></div>;
  if (id === "apple") return <div style={plateStyle(size, "#111")}>{APPLE_MARK}</div>;
  if (id === "amazon") return <div style={{ ...plateStyle(size, "#fff"), border: "1px solid var(--line)" }}>{AMAZON_MARK}</div>;
  return null;
}

/* Demo: a prediction match card - same markup/classes as the real MatchCard. Two
   states: `upcoming` (1/X/2 odds, Maximum potential, Use-X2 + Saved) and `finished`
   (actual score + your pick with check, Earned badge). France-Australia & Japan-Spain. */
function DemoMatchCard({ finished }) {
  const oddsRow = (odds) => (
    <div className="row gap-6 full">
      {odds.map(([lab, code, pts, on]) => (
        <div key={code} style={{ flex: 1, borderRadius: 10, padding: "7px 8px", border: "1px solid " + (on ? "var(--accent)" : "var(--line)"), background: on ? "var(--accent-soft)" : "var(--surface-2)", display: "flex", flexDirection: "column", alignItems: "center", gap: 2, lineHeight: 1 }}>
          <span style={{ fontFamily: "var(--fm)", fontSize: 9.5, letterSpacing: ".04em", color: on ? "var(--accent)" : "var(--ink-soft)", fontWeight: 500 }}>{lab} {code}</span>
          <span className="mono" style={{ fontWeight: 600, fontSize: 15, color: on ? "var(--accent)" : "var(--ink)" }}>{pts}</span>
        </div>
      ))}
    </div>
  );

  if (finished) {
    const check = <Icon name="check" size={14} stroke={2.6} style={{ color: "var(--pos-tx)", flex: "none" }} />;
    return (
      <div className="card match-card mc-finished" style={{ overflow: "hidden" }}>
        <div className="match-card-head" style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 8, padding: "11px 16px", borderBottom: "1px solid var(--line-2)" }}>
          <span className="badge" style={{ justifySelf: "start", background: "var(--chip-bg)" }}>Group E</span>
          <span className="muted match-card-when" style={{ justifySelf: "center", fontSize: 12 }}><span className="mc-date">Thu 18 Jun</span><span className="mc-sep"> · </span><span className="mc-time">21:00</span></span>
          <div style={{ justifySelf: "end" }}><StatusPill status="finished" /></div>
        </div>
        <div className="card-pad" style={{ padding: "16px 16px 14px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 6 }}>
            <div className="row gap-12" style={{ minWidth: 0 }}><Flag emoji="🇯🇵" /><span style={{ fontWeight: 700, fontSize: 14.5 }}>Japan</span>{check}</div>
            <div className="col center" style={{ lineHeight: 1, padding: "0 4px" }}>
              <span className="row center" style={{ gap: 6 }}><span className="score-num" style={{ fontSize: 23 }}>2</span><span className="muted score-num" style={{ fontSize: 16 }}>:</span><span className="score-num" style={{ fontSize: 23 }}>1</span></span>
              <span className="row center" style={{ gap: 3, marginTop: 2 }}><span className="muted" style={{ fontSize: 8.5, letterSpacing: ".06em", textTransform: "uppercase" }}>your pick 2–1</span><Icon name="check" size={10} stroke={2.6} style={{ color: "var(--pos-tx)" }} /></span>
            </div>
            <div className="row gap-12" style={{ minWidth: 0, justifyContent: "flex-end", opacity: .5 }}><span style={{ fontWeight: 700, fontSize: 14.5, textAlign: "right" }}>Spain</span><Flag emoji="🇪🇸" /></div>
          </div>
          <div style={{ height: 13 }} />
          {oddsRow([["1", "JPN", 90, true], ["X", "DRAW", 55, false], ["2", "ESP", 14, false]])}
          <div className="row between" style={{ marginTop: 13 }}>
            <span className="badge navy mono"><Icon name="check" size={11} stroke={2.5} />Earned +180</span>
            <span className="btn btn-ghost btn-sm" style={{ padding: "5px 10px" }}>View result<Icon name="chevron" size={13} /></span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="card match-card mc-upcoming" style={{ overflow: "hidden" }}>
      <div className="match-card-head" style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 8, padding: "11px 16px", borderBottom: "1px solid var(--line-2)" }}>
        <span className="badge" style={{ justifySelf: "start", background: "var(--chip-bg)" }}>Group D</span>
        <span className="muted match-card-when" style={{ justifySelf: "center", fontSize: 12 }}><span className="mc-date">Sat 20 Jun</span><span className="mc-sep"> · </span><span className="mc-time">18:00</span></span>
        <div style={{ justifySelf: "end" }}><StatusPill status="upcoming" /></div>
      </div>
      <div className="card-pad" style={{ padding: "16px 16px 14px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 6 }}>
          <div className="row gap-12" style={{ minWidth: 0 }}><Flag emoji="🇫🇷" /><span style={{ fontWeight: 700, fontSize: 14.5 }}>France</span></div>
          <div className="col center" style={{ lineHeight: 1, padding: "0 4px" }}>
            <span className="row center" style={{ gap: 6 }}><span className="score-num" style={{ fontSize: 23 }}>2</span><span className="muted score-num" style={{ fontSize: 16 }}>:</span><span className="score-num" style={{ fontSize: 23 }}>0</span></span>
            <span className="muted" style={{ fontSize: 8.5, letterSpacing: ".06em", textTransform: "uppercase" }}>your pick</span>
          </div>
          <div className="row gap-12" style={{ minWidth: 0, justifyContent: "flex-end" }}><span style={{ fontWeight: 700, fontSize: 14.5, textAlign: "right" }}>Australia</span><Flag emoji="🇦🇺" /></div>
        </div>
        <div style={{ height: 13 }} />
        {oddsRow([["1", "FRA", 12, true], ["X", "DRAW", 55, false], ["2", "AUS", 115, false]])}
        <div className="row between" style={{ marginTop: 12, paddingTop: 11, borderTop: "1px solid var(--line-2)" }}>
          <span className="muted" style={{ fontSize: 11.5 }}>Maximum potential</span>
          <span className="mono" style={{ fontWeight: 700, fontSize: 15, color: "var(--accent)" }}>24<span className="muted" style={{ fontSize: 11, fontWeight: 500 }}> pts</span></span>
        </div>
        <div className="row between gap-8" style={{ marginTop: 12 }}>
          <span className="btn btn-soft btn-sm" style={{ padding: "5px 10px" }}><Icon name="bolt" size={12} fill />Use X2 Bonus</span>
          <span className="badge pos mono"><Icon name="check" size={12} stroke={2.5} />Saved</span>
        </div>
      </div>
    </div>
  );
}

// Demo leaderboard rows: Acquisit players and AIs interleaved. Acquisit players
// render the real Acquisit logo (BrandLogo "acquisit"); AIs render their logo Avatar.
const LANDING_LB = [
  { rank: 1, company: "acquisit", user: { first: "Zinedine", last: "Z." }, sub: "Acquisit", pts: 2140, mv: 2 },
  { rank: 2, ai: true, user: { first: "Claude", avatar: "logos/claude.svg" }, pts: 1985, mv: 1 },
  { rank: 3, company: "acquisit", user: { first: "Antoine", last: "G." }, sub: "Acquisit", pts: 1955, mv: 4 },
  { rank: 4, company: "acquisit", user: { first: "Timed" }, sub: "Acquisit", pts: 1910, mv: -1 },
  { rank: 5, ai: true, user: { first: "ChatGPT", avatar: "logos/chatgpt.png" }, pts: 1860, mv: -2 },
  { rank: 6, ai: true, user: { first: "Gemini", avatar: "logos/gemini.svg" }, pts: 1720, mv: -1 },
];

// Demo company rankings: AI players are one-member companies, so a company's "avg top
// 5" equals that AI player's points (Claude 1985 / ChatGPT 1860 / Gemini 1720 — kept in
// sync with LANDING_LB). Acquisit and the client companies (Apple, Amazon) average their
// rosters. Sorted by avg, descending.
const LANDING_CO = [
  { rank: 1, id: "claude", name: "Claude", ai: true, mv: 2, pts: 1985 },
  { rank: 2, id: "chatgpt", name: "ChatGPT", ai: true, mv: 1, pts: 1860 },
  { rank: 3, id: "acquisit", name: "Acquisit", mv: 1, pts: 1842 },
  { rank: 4, id: "gemini", name: "Gemini", ai: true, mv: 3, pts: 1720 },
  { rank: 5, id: "apple", name: "Apple", mv: -1, pts: 1655 },
  { rank: 6, id: "amazon", name: "Amazon", mv: -2, pts: 1498 },
];

/* Demo: the Dashboard "Top players" card, verbatim structure (eyebrow header,
   .lb table, rank-num + Movement, logo + name + AiBadge, mono points). */
function DemoLeaderboard() {
  return (
    <div className="card" style={{ overflow: "hidden" }}>
      <div className="row between" style={{ padding: "13px 16px 11px" }}>
        <span className="eyebrow">Top players</span>
        <span className="badge mono" style={{ fontSize: 10.5 }}>live</span>
      </div>
      <div style={{ overflowX: "auto" }}>
        <table className="lb">
          <thead><tr><th style={{ width: 62 }}>Rank</th><th>Player</th><th style={{ textAlign: "right" }}>Pts</th></tr></thead>
          <tbody>
            {LANDING_LB.map((r) => (
              <tr key={r.rank}>
                <td><span className="rank-num">{r.rank}</span></td>
                <td>
                  <div className="row gap-10" style={{ minWidth: 0 }}>
                    {r.company ? <BrandLogo id={r.company} size={24} /> : <Avatar user={r.user} size={24} />}
                    <span className="nowrap" style={{ fontWeight: 600, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis" }}>{r.user.first}{r.user.last ? " " + r.user.last : ""}</span>
                    {r.ai ? <AiBadge style={{ marginLeft: 2 }} /> : <span className="muted nowrap" style={{ fontSize: 12 }}>· {r.sub}</span>}
                  </div>
                </td>
                <td style={{ textAlign: "right" }}><span className="mono" style={{ fontWeight: 700, fontSize: 14 }}>{r.pts.toLocaleString()}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* Demo: the Top Companies table, same .lb structure, with AI companies, Acquisit
   and the client companies (Apple, Amazon), each with its brand mark. */
function DemoCompanies() {
  return (
    <div className="card" style={{ overflow: "hidden" }}>
      <div className="row between" style={{ padding: "13px 16px 11px" }}>
        <span className="eyebrow">Top companies</span>
        <span className="badge mono" style={{ fontSize: 10.5 }}>avg top 3</span>
      </div>
      <div style={{ overflowX: "auto" }}>
        <table className="lb">
          <thead><tr><th style={{ width: 62 }}>Rank</th><th>Company</th><th style={{ textAlign: "right" }}>Avg</th></tr></thead>
          <tbody>
            {LANDING_CO.map((c) => (
              <tr key={c.rank}>
                <td><span className="rank-num">{c.rank}</span></td>
                <td>
                  <div className="row gap-10" style={{ minWidth: 0 }}>
                    <BrandLogo id={c.id} size={24} />
                    <span className="nowrap" style={{ fontWeight: c.id === "acquisit" ? 700 : 600, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</span>
                    {c.ai && <AiBadge style={{ marginLeft: 2 }} />}
                  </div>
                </td>
                <td style={{ textAlign: "right" }}><span className="mono" style={{ fontWeight: 700, fontSize: 14 }}>{c.pts.toLocaleString()}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// Hand-authored 5-matchday rank series for the demo bump chart (fed to the real
// RankChartCard/BumpChart). Acquisit players show the company mark; AIs their logo.
const LANDING_BUMP = {
  dates: ["11 Jun", "16 Jun", "21 Jun", "26 Jun", "1 Jul"],
  series: [
    { id: "zinedine", label: "Zinedine", color: "var(--brand-navy)", ranks: [5, 3, 4, 2, 1], highlight: true, node: () => <AcquisitLogo size={24} /> },
    { id: "claude", label: "Claude", color: "#D97757", ranks: [2, 2, 1, 3, 2], node: () => <Avatar user={{ first: "Claude", avatar: "logos/claude.svg" }} size={20} /> },
    { id: "timed", label: "Timed", color: "var(--brand-blue)", ranks: [4, 1, 2, 1, 3], node: () => <AcquisitLogo size={20} /> },
    { id: "chatgpt", label: "ChatGPT", color: "#0F0F0F", ranks: [1, 4, 3, 4, 4], node: () => <Avatar user={{ first: "ChatGPT", avatar: "logos/chatgpt.png" }} size={20} /> },
    { id: "gemini", label: "Gemini", color: "#1C69FF", ranks: [3, 5, 5, 5, 5], node: () => <Avatar user={{ first: "Gemini", avatar: "logos/gemini.svg" }} size={20} /> },
  ],
};

function Landing({ onJoin, onSignIn }) {
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); };
  const heroMuted = "color-mix(in srgb, var(--hero-ink) 70%, transparent)";
  const bumpSeries = LANDING_BUMP.series.map((s) => ({ ...s, node: s.node() }));

  return (
    <div className="acq-root" style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* ---------- top nav - identical to AppShell desktop ---------- */}
      <header className="topnav" style={{ position: "sticky", top: 0, zIndex: 50, background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div className="topnav-inner" style={{ maxWidth: 1180, margin: "0 auto", padding: "0 28px", height: 60, display: "flex", alignItems: "center", gap: 18 }}>
          <div className="row gap-12" style={{ flex: "0 0 auto" }}><Logo h={20} /></div>
          <nav className="topnav-nav lp-nav" style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 2, flex: "1 1 auto", minWidth: 0 }}>
            {[["how", "How it works"], ["field", "Players"], ["join", "Prizes"]].map(([id, label]) => (
              <a key={id} className="topnav-item pointer" onClick={() => scrollTo(id)}
                style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderRadius: 10, fontFamily: "var(--ff)", fontSize: 14, fontWeight: 600, color: "var(--ink-2)", cursor: "pointer" }}>{label}</a>
            ))}
          </nav>
          <div className="row gap-10" style={{ flex: "0 0 auto" }}>
            <button className="btn btn-ghost btn-sm" onClick={onSignIn}>Sign in</button>
            <button className="btn btn-primary btn-sm" onClick={onJoin}>Join the contest</button>
          </div>
        </div>
      </header>

      <main className="grow" style={{ minWidth: 0, maxWidth: "100%" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "30px 36px 60px" }}>
          <div className="col gap-24">

            {/* ---------- hero card (Dashboard hero-card pattern) ---------- */}
            <div className="card hero-card" style={{ background: "var(--hero-bg)", color: "var(--hero-ink)", border: "none", overflow: "hidden", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, opacity: .5, background: "radial-gradient(700px 240px at 88% -30%, color-mix(in srgb, var(--brand-blue) 40%, transparent), transparent)" }} />
              <svg style={{ position: "absolute", right: 0, top: 0, height: "100%", opacity: .12 }} width="320" height="220" viewBox="0 0 320 220" fill="none" stroke="white" strokeWidth="1.5">
                <circle cx="300" cy="110" r="60" /><line x1="300" y1="0" x2="300" y2="220" /><rect x="250" y="70" width="80" height="80" />
              </svg>
              <div className="card-pad" style={{ padding: "26px 28px", position: "relative" }}>
                <div className="dash-grid" style={{ display: "grid", gridTemplateColumns: "1.12fr .88fr", gap: 28, alignItems: "center" }}>
                  <div className="col gap-2" style={{ minWidth: 0 }}>
                    <span className="eyebrow" style={{ color: heroMuted }}>FIFA World Cup 2026 · Prediction contest</span>
                    <h1 style={{ fontSize: 30, marginTop: 8, fontWeight: 800, letterSpacing: "-.03em", lineHeight: 1.08 }}>Think you can beat AI and Acquisit’s team to predict the World Cup?</h1>
                    <span style={{ opacity: .82, fontSize: 14.5, marginTop: 10, lineHeight: 1.55, maxWidth: 520 }}>Predict every FIFA World Cup 2026 match. Climb the leaderboard. Take on the Acquisit team, their clients and partners, plus three AI players: Claude, ChatGPT and Gemini.</span>
                    <div className="row gap-10 wrap" style={{ marginTop: 18 }}>
                      <button className="btn btn-primary" onClick={onJoin}>Join the contest · 2 minutes<Icon name="chevron" size={15} /></button>
                      <button className="btn btn-ghost on-hero" onClick={() => scrollTo("how")}>How it works ↓</button>
                    </div>
                    <div className="row gap-20 wrap lp-airivals" style={{ marginTop: 18, alignItems: "center" }}>
                      <span className="eyebrow" style={{ color: heroMuted }}>Your AI rivals</span>
                      <div className="row gap-20 lp-airivals-list" style={{ alignItems: "center" }}>
                        {LANDING_AIS.map((ai) => (
                          <div key={ai.id} className="row gap-6" style={{ alignItems: "center" }}>
                            <Avatar user={{ first: ai.name, avatar: ai.logo }} size={24} />
                            <span style={{ fontWeight: 700, fontSize: 13 }}>{ai.name}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                  {/* team photo, high in the hero */}
                  <div style={{ position: "relative", borderRadius: "var(--r-md)", overflow: "hidden", minWidth: 240, boxShadow: "0 8px 30px rgba(0,0,0,.28)" }}>
                    <img src="acquisit-team/acquisit-team.webp" alt="The Acquisit team" style={{ display: "block", width: "100%", height: "100%", maxHeight: 260, objectFit: "cover" }} />
                    <div className="row gap-10" style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "14px 16px", background: "linear-gradient(to top, rgba(8,20,38,.9), rgba(8,20,38,0))" }}>
                      <img src="acquisit-team/acquisit-members.webp" alt="Acquisit members" style={{ height: 42, width: "auto", borderRadius: 10, flex: "none", display: "block" }} />
                      <div className="col" style={{ lineHeight: 1.2 }}>
                        <span style={{ fontWeight: 800, fontSize: 13.5, color: "#fff" }}>The Acquisit team is all in</span>
                        <span style={{ fontSize: 12, color: "rgba(255,255,255,.78)" }}>Outscore our colleagues, clients, and partners.</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* ---------- headline stats (StatBox grid) ---------- */}
            <div className="lp-stats" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: 16 }}>
              <LandingStat icon="calendar" color="var(--accent)" value="104" label="Matches" sub="Every World Cup fixture" />
              <LandingStat icon="shield" color="var(--brand-blue)" value="48" label="Teams" sub="Across 16 host cities" />
              <LandingStat icon="bolt" color="var(--gold)" value="3" label="AI rivals" sub="Claude · ChatGPT · Gemini" />
              <LandingStat icon="clock" color="var(--brand-navy)" value="2 min" label="To join" sub="Auto-fill all 104 at once" />
            </div>

            {/* ---------- how it works ---------- */}
            <div id="how" className="col gap-20">
              <PageHead eyebrow="The rules" title="Simple rules, real strategy"
                sub="Right outcome = points — the bigger the upset, the bigger the reward. Exact score = your points are doubled. X2 token = pick two matches and double whatever you earn. Everything locks at kickoff." />
              {/* row 1: one upcoming card + one finished card */}
              <div className="dash-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, alignItems: "start" }}>
                <div className="col gap-8"><span className="eyebrow">Before kickoff</span><DemoMatchCard /></div>
                <div className="col gap-8"><span className="eyebrow">After the match</span><DemoMatchCard finished /></div>
              </div>
              {/* row 2: all four rules across one row */}
              <div className="lp-rules">
                {[
                  { n: "01", title: "Predict before kickoff", body: "Call each scoreline. Predictions lock the moment the whistle blows." },
                  { n: "02", title: "Points from the odds", body: "Calling an upset pays far more than backing the favourite." },
                  { n: "03", title: "Exact score = X2 Bonus", body: "Nail the precise scoreline and your points for that match are doubled." },
                  { n: "04", title: "Play your X2", body: "Double your points on one upcoming match of your choice, once per window." },
                ].map((r) => (
                  <div key={r.n} className="card card-pad col gap-6" style={{ padding: "18px 20px" }}>
                    <span className="mono" style={{ fontSize: 13, fontWeight: 700, color: "var(--accent)" }}>{r.n}</span>
                    <h3 style={{ fontSize: 16 }}>{r.title}</h3>
                    <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-2)" }}>{r.body}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* ---------- humans vs AIs ---------- */}
            <div id="field" className="col gap-20">
              <PageHead eyebrow="The field" title="One leaderboard. Humans vs. AIs."
                sub="Everyone plays the same rules: the Acquisit team, clients, partners, and three AI bots. Your picks rank you and your company. No special treatment, beating them is the point." />
              <div className="dash-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, alignItems: "start" }}>
                <DemoLeaderboard />
                <DemoCompanies />
              </div>
              <RankChartCard title="Player ranking over time" sub="Top movers' daily rank across the tournament. Zinedine's line is highlighted."
                series={bumpSeries} dates={LANDING_BUMP.dates} maxRank={5} />
            </div>

            {/* ---------- one-click sign-up (reuses STRATEGY_OPTIONS) ---------- */}
            <div className="col gap-20">
              <PageHead eyebrow="One-click sign-up" title="No time? Predict all 104 matches in one click"
                sub="Pick a strategy at sign-up and we fill in every match for you. Edit any prediction later, any time before kickoff." />
              <div className="card card-pad">
                <div className="dash-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {STRATEGY_OPTIONS.map((o) => (
                    <div key={o.id} className="row gap-12" style={{ alignItems: "flex-start", padding: "12px 14px", borderRadius: 12, background: "var(--surface-2)", border: "1px solid var(--line)" }}>
                      <Icon name={o.icon} size={20} style={{ color: "var(--ink-2)", flex: "none", marginTop: 1 }} />
                      <div className="col grow" style={{ gap: 2, minWidth: 0 }}>
                        <span style={{ fontSize: 14, fontWeight: 700 }}>{o.title}</span>
                        <span className="muted" style={{ fontSize: 12.5, lineHeight: 1.4 }}>{o.desc}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* ---------- prizes ---------- */}
            <div className="col gap-20">
              <PageHead eyebrow="Prizes & spirit" title="It's for fun, but there are prizes" />
              <div className="card card-pad row between wrap gap-16" style={{ alignItems: "center", boxShadow: "inset 3px 0 0 var(--brand-yellow), var(--shadow-card)" }}>
                <div className="row gap-16" style={{ alignItems: "center", minWidth: 0 }}>
                  <span style={{ width: 44, height: 44, borderRadius: 12, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold)", background: "color-mix(in srgb, var(--brand-yellow) 22%, var(--surface))" }}><Icon name="trophy" size={22} /></span>
                  <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 640 }}>A couple of prizes await the top predictors at the end of the tournament. Mostly, it's bragging rights: over your colleagues, our clients and partners, and over the AIs.</p>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={onJoin}>Join the contest<Icon name="chevron" size={13} /></button>
              </div>
            </div>

            {/* ---------- closing CTA (hero-card) ---------- */}
            <div id="join" className="card hero-card" style={{ background: "var(--hero-bg)", color: "var(--hero-ink)", border: "none", overflow: "hidden", position: "relative" }}>
              <div style={{ position: "absolute", inset: 0, opacity: .5, background: "radial-gradient(700px 240px at 12% -30%, color-mix(in srgb, var(--brand-blue) 40%, transparent), transparent)" }} />
              <div className="card-pad row between wrap gap-16" style={{ padding: "26px 28px", position: "relative", alignItems: "center" }}>
                <div className="col gap-2" style={{ minWidth: 0 }}>
                  <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-.03em" }}>Join now. First match kicks off June 11</h2>
                  <span style={{ opacity: .82, fontSize: 14, marginTop: 4 }}>It takes 2 minutes. No downside: wrong picks cost nothing.</span>
                </div>
                <div className="row gap-10 wrap">
                  <button className="btn btn-primary" onClick={onJoin}>Join the contest<Icon name="chevron" size={15} /></button>
                  <button className="btn btn-ghost on-hero" onClick={onSignIn}>I already have an account</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </main>

      {/* ---------- footer - topfooter pattern ---------- */}
      <footer className="topfooter" style={{ borderTop: "1px solid var(--line)", background: "var(--surface)", flex: "0 0 auto" }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "18px 36px", display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 18 }}>
          <div className="row gap-12"><Logo h={18} /><span className="muted" style={{ fontSize: 12.5 }}>FIFA World Cup 2026 prediction contest</span></div>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 20 }}>
            {[
              { href: "https://acquisit.io/", label: "Acquisit.io", icon: "globe" },
              { href: "https://www.instagram.com/acquisit.io/", label: "Instagram", icon: "instagram" },
              { href: "https://www.linkedin.com/company/acquisit-advertising", label: "LinkedIn", icon: "linkedin" },
            ].map((l) => (
              <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer" title={l.label}
                className="topfooter-link pointer"
                style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 600, textDecoration: "none", whiteSpace: "nowrap", color: "var(--ink-soft)" }}>
                <Icon name={l.icon} size={16} stroke={1.8} />{l.label}
              </a>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { Landing });