/* ============================================================
   TOKENOMICS · CARTEL BRACKET · RAT WALL
   Three new sections that match the GCA ethos.
   ============================================================ */

const { useState: useS_tk, useEffect: useE_tk, useMemo: useM_tk, useRef: useR_tk } = React;
const GCA_X_URL = "https://x.com/grandcupauto";
const TK_PLACEHOLDER = "- - -";

/* ─────────────────────────────────────────────────────────────
   Donut chart — Token distribution as a chunky GTA pie
   ───────────────────────────────────────────────────────────── */
const DIST = [
  { k: "Liquidity Pool",  pct: 60,  col: "#46e5e5", note: "burnt · pump.fun" },
  { k: "Stadium Treasury",pct: 12,  col: "#ffd23a", note: "ops · marketing" },
  { k: "Crew Airdrop",    pct: 10,  col: "#ff3aa3", note: "early holders" },
  { k: "Bounty Reserve",  pct: 8,   col: "#a02bff", note: "match-day rewards" },
  { k: "Cartel Council",  pct: 6,   col: "#2bd76b", note: "vested · 12mo" },
  { k: "Snitch Burns",    pct: 4,   col: "#ff5570", note: "auto-burn · monthly" },
];

function Donut({ size = 280, hover, setHover }) {
  const r = size / 2 - 24;
  const cx = size / 2, cy = size / 2;
  const C = 2 * Math.PI * r;
  let off = 0;
  return (
    <svg className="tk-donut" viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
      <defs>
        <radialGradient id="tk-core" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#1c0a3a" />
          <stop offset="100%" stopColor="#050010" />
        </radialGradient>
        <filter id="tk-glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="3" />
        </filter>
      </defs>

      {/* tickmarks ring */}
      <g stroke="#46e5e5" strokeOpacity="0.18" strokeWidth="0.6">
        {Array.from({ length: 60 }).map((_, i) => {
          const a = (i / 60) * Math.PI * 2;
          const r1 = r + 14;
          const r2 = r + (i % 5 === 0 ? 22 : 18);
          return (
            <line key={i}
              x1={cx + Math.cos(a) * r1} y1={cy + Math.sin(a) * r1}
              x2={cx + Math.cos(a) * r2} y2={cy + Math.sin(a) * r2}
            />
          );
        })}
      </g>

      {/* slices */}
      {DIST.map((d, i) => {
        const dash = (d.pct / 100) * C;
        const isOn = hover === i;
        const offset = -off;
        const seg = (
          <g key={i}>
            <circle
              cx={cx} cy={cy} r={r}
              fill="none"
              stroke={d.col}
              strokeWidth={isOn ? 44 : 36}
              strokeDasharray={`${dash} ${C - dash}`}
              strokeDashoffset={offset}
              transform={`rotate(-90 ${cx} ${cy})`}
              style={{
                transition: "stroke-width 0.2s ease, filter 0.2s ease",
                filter: isOn ? `drop-shadow(0 0 14px ${d.col})` : "none",
                cursor: "pointer"
              }}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
            />
            {/* dark seam stroke between slices */}
            <circle
              cx={cx} cy={cy} r={r}
              fill="none"
              stroke="#0a0014" strokeWidth="2"
              strokeDasharray={`0.5 ${C - 0.5}`}
              strokeDashoffset={offset - 0.25}
              transform={`rotate(-90 ${cx} ${cy})`}
              pointerEvents="none"
            />
          </g>
        );
        off += dash;
        return seg;
      })}

      {/* hub */}
      <circle cx={cx} cy={cy} r={r - 24} fill="url(#tk-core)" stroke="rgba(255,255,255,0.12)" />

      {/* center label */}
      <g textAnchor="middle" fontFamily="'Pricedown Bl','Pricedown',sans-serif" letterSpacing="0.5">
        {hover != null ? (
          <>
            <text x={cx} y={cy - 8} fontSize="42" fill={DIST[hover].col}
                  stroke="#0a0014" strokeWidth="1.5" paintOrder="stroke fill" style={{textTransform: "lowercase"}}>
              {DIST[hover].pct}%
            </text>
            <text x={cx} y={cy + 16} fontSize="11" fill="#fff" fontFamily="JetBrains Mono" letterSpacing="2">
              {DIST[hover].k.toUpperCase()}
            </text>
            <text x={cx} y={cy + 32} fontSize="9" fill="#8c7aa3" fontFamily="JetBrains Mono" letterSpacing="2">
              {DIST[hover].note.toUpperCase()}
            </text>
          </>
        ) : (
          <>
            <text x={cx} y={cy - 12} fontSize="36" fill="#fff"
                  stroke="#0a0014" strokeWidth="1.5" paintOrder="stroke fill" style={{textTransform: "lowercase"}}>
              1b
            </text>
            <text x={cx} y={cy + 8} fontSize="11" fill="var(--vc-cyan)" fontFamily="JetBrains Mono" letterSpacing="2.5">
              TOTAL SUPPLY
            </text>
            <text x={cx} y={cy + 26} fontSize="9" fill="#8c7aa3" fontFamily="JetBrains Mono" letterSpacing="2">
              $GCA · SOLANA
            </text>
          </>
        )}
      </g>
    </svg>
  );
}

/* ─────────────────────────────────────────────────────────────
   Pump.fun bonding curve progress
   ───────────────────────────────────────────────────────────── */
function BondingCurve({ progress = 0.62 }) {
  const ref = useR_tk(null);
  useE_tk(() => {
    const c = ref.current; if (!c) return;
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    const W = 520, H = 160;
    c.width = W * dpr; c.height = H * dpr;
    const ctx = c.getContext("2d"); ctx.scale(dpr, dpr);
    ctx.clearRect(0,0,W,H);

    // grid
    ctx.strokeStyle = "rgba(255,255,255,0.06)";
    ctx.lineWidth = 1;
    for (let i = 0; i <= 10; i++) {
      ctx.beginPath();
      ctx.moveTo((W * i) / 10, 0); ctx.lineTo((W * i) / 10, H); ctx.stroke();
    }
    for (let i = 0; i <= 4; i++) {
      ctx.beginPath();
      ctx.moveTo(0, (H * i) / 4); ctx.lineTo(W, (H * i) / 4); ctx.stroke();
    }

    // curve — exponential bonding
    const pts = [];
    for (let i = 0; i <= 80; i++) {
      const x = (i / 80) * W;
      const v = Math.pow(i / 80, 2.4);
      pts.push([x, H - 8 - v * (H - 16)]);
    }

    // glow fill below
    const grad = ctx.createLinearGradient(0, 0, 0, H);
    grad.addColorStop(0, "rgba(255,58,163,0.45)");
    grad.addColorStop(1, "rgba(255,58,163,0)");
    ctx.beginPath();
    ctx.moveTo(0, H);
    pts.forEach(([x, y], i) => { i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); });
    ctx.lineTo(W, H); ctx.closePath();
    ctx.fillStyle = grad; ctx.fill();

    // line
    ctx.beginPath();
    pts.forEach(([x, y], i) => { i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); });
    ctx.strokeStyle = "#ff3aa3"; ctx.lineWidth = 2.5;
    ctx.shadowColor = "#ff3aa3"; ctx.shadowBlur = 14;
    ctx.stroke();
    ctx.shadowBlur = 0;

    // progress marker
    const pi = Math.floor(progress * 80);
    const [mx, my] = pts[pi];
    // vertical guide
    ctx.strokeStyle = "rgba(70,229,229,0.7)"; ctx.lineWidth = 1;
    ctx.setLineDash([4, 4]);
    ctx.beginPath(); ctx.moveTo(mx, 0); ctx.lineTo(mx, H); ctx.stroke();
    ctx.setLineDash([]);
    // dot
    ctx.beginPath(); ctx.arc(mx, my, 6, 0, Math.PI * 2);
    ctx.fillStyle = "#fff"; ctx.fill();
    ctx.strokeStyle = "#46e5e5"; ctx.lineWidth = 2; ctx.stroke();
    // graduation marker
    const [gx, gy] = pts[80];
    ctx.beginPath(); ctx.arc(gx, gy, 8, 0, Math.PI * 2);
    ctx.fillStyle = "#ffd23a"; ctx.fill();
    ctx.strokeStyle = "#0a0014"; ctx.lineWidth = 2; ctx.stroke();
  }, [progress]);

  return <canvas ref={ref} className="tk-curve" style={{ width: 520, height: 160 }} />;
}

/* ─────────────────────────────────────────────────────────────
   Tokenomics Section
   ───────────────────────────────────────────────────────────── */
function Tokenomics({ token, price }) {
  const [hover, setHover] = useS_tk(null);
  const [copied, setCopied] = useS_tk(false);
  const copyCA = () => {
    navigator.clipboard?.writeText(TK_PLACEHOLDER);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  return (
    <section className="section tokenomics" data-screen-label="09 Tokenomics">
      <window.SectionStage
        variant="solo-right"
        shape="strip"
        accent="cyan"
        num="09"
        eyebrow="cartel ledger"
        title={<><span className="ac-cyan">token</span>omics.</>}
        sub="who holds the bag. where the bag goes."
        bg="assets/hero-desktop.jpg"
        bgPos="center"
        charRight="assets/char-chairman.png"
        charPop={18}
        height={500}
      />

      <div className="tk-grid">

        {/* Donut + legend */}
        {false && (
        <div className="tk-block tk-donut-block">
          <div className="tk-block-head">
            <div className="bb-cap">▸ distribution</div>
            <div className="tk-block-title">supply · split</div>
          </div>
          <div className="tk-donut-wrap">
            <Donut hover={hover} setHover={setHover} />
            <ul className="tk-legend-list">
              {DIST.map((d, i) => (
                <li
                  key={i}
                  className={`tk-legend-item ${hover === i ? "on" : ""}`}
                  onMouseEnter={() => setHover(i)}
                  onMouseLeave={() => setHover(null)}
                >
                  <span className="sw" style={{ background: d.col }} />
                  <span className="lab">{d.k.toLowerCase()}</span>
                  <span className="pct">{d.pct}%</span>
                  <span className="note">{d.note}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        )}

        {/* Bonding curve + pump.fun video */}
        <div className="tk-block tk-curve-block">
          <div className="tk-block-head">
            <div className="bb-cap">▸ bonding curve</div>
            <div className="tk-block-title">pump.fun · graduation</div>
          </div>

          <img
            className="tk-pumpvid"
            src="assets/pumpfun-coin-burst.png"
            alt=""
            aria-hidden="true"
          />

          <div className="tk-curve-wrap">
            <div className="tk-curve-placeholder" aria-label="bonding curve pending">
              <span>{TK_PLACEHOLDER}</span>
            </div>
            <div className="tk-curve-stats">
              <div className="tk-curve-stat"><div className="k">MARKET CAP</div><div className="v gold">{TK_PLACEHOLDER}</div></div>
              <div className="tk-curve-stat"><div className="k">PROGRESS</div><div className="v cyan">{TK_PLACEHOLDER}</div></div>
              <div className="tk-curve-stat"><div className="k">TO GRADUATION</div><div className="v pink">{TK_PLACEHOLDER}</div></div>
              <div className="tk-curve-stat"><div className="k">HOLDERS</div><div className="v">{TK_PLACEHOLDER}</div></div>
              <div className="tk-curve-stat"><div className="k">TX (24H)</div><div className="v">{TK_PLACEHOLDER}</div></div>
              <div className="tk-curve-stat"><div className="k">DEV HOLDS</div><div className="v go">{TK_PLACEHOLDER}</div></div>
            </div>
            <div className="tk-curve-foot">
              ▸ {TK_PLACEHOLDER}
            </div>
          </div>
        </div>

        {/* Tax / security card */}
        {false && (<>
        <div className="tk-block tk-tax">
          <div className="tk-block-head">
            <div className="bb-cap">▸ rules of the street</div>
            <div className="tk-block-title">tax · trust · timeline</div>
          </div>
          <div className="tk-tax-grid">
            <div className="tk-tax-row">
              <div className="k">buy tax</div>
              <div className="v go">0%</div>
              <div className="sub">no skim. ever.</div>
            </div>
            <div className="tk-tax-row">
              <div className="k">sell tax</div>
              <div className="v go">0%</div>
              <div className="sub">cartel doesn&apos;t tax the exit.</div>
            </div>
            <div className="tk-tax-row">
              <div className="k">lp lock</div>
              <div className="v cyan">∞ · burnt</div>
              <div className="sub">no key. no escape.</div>
            </div>
            <div className="tk-tax-row">
              <div className="k">mint authority</div>
              <div className="v">revoked</div>
              <div className="sub">supply is set in concrete.</div>
            </div>
            <div className="tk-tax-row">
              <div className="k">freeze authority</div>
              <div className="v">revoked</div>
              <div className="sub">no wallet gets frozen.</div>
            </div>
            <div className="tk-tax-row">
              <div className="k">top 10 holders</div>
              <div className="v gold">18.4%</div>
              <div className="sub">healthy spread.</div>
            </div>
          </div>
        </div>

        {/* Roadmap */}
        <div className="tk-block tk-road">
          <div className="tk-block-head">
            <div className="bb-cap">▸ heist timeline</div>
            <div className="tk-block-title">roadmap · 4 phases</div>
          </div>
          <ol className="tk-road-list">
            <li className="done">
              <span className="ph">phase 01</span>
              <span className="lbl">deploy · pump.fun</span>
              <span className="sub">contract live · 5 juni · lp seeded</span>
              <span className="tag">✓ complete</span>
            </li>
            <li className="now">
              <span className="ph">phase 02</span>
              <span className="lbl">group stage · turf war</span>
              <span className="sub">wanted-poster generator · 48 crew claims</span>
              <span className="tag live">● active</span>
            </li>
            <li>
              <span className="ph">phase 03</span>
              <span className="lbl">knockouts · bounty escalation</span>
              <span className="sub">2x → 4x → 8x bounty multipliers · cartel bracket locks</span>
              <span className="tag">▸ jul 04</span>
            </li>
            <li>
              <span className="ph">phase 04</span>
              <span className="lbl">final heist · grand cup auto throne</span>
              <span className="sub">winning cartel gets victory-lap poster · top-10 paper-hands burn</span>
              <span className="tag">▸ jul 19</span>
            </li>
          </ol>
        </div>

        </>)}

        {/* CA / socials block */}
        <div className="tk-block tk-contract">
          <div className="tk-block-head">
            <div className="bb-cap">▸ contract address</div>
            <div className="tk-block-title">copy · the only ca</div>
          </div>
          <div className="tk-ca">
            <span className="lbl">CA</span>
            <span className="val">{TK_PLACEHOLDER}</span>
            <button className="copy-btn" onClick={copyCA}>{copied ? "✓ copied" : "copy"}</button>
          </div>
          <div className="tk-socials">
            <a className="tk-soc x" href={GCA_X_URL} target="_blank" rel="noopener noreferrer"><span className="ic">𝕏</span> twitter / x</a>
            <span className="tk-soc tg muted"><span className="ic">✆</span> {TK_PLACEHOLDER}</span>
            <span className="tk-soc pf muted"><span className="ic">▣</span> {TK_PLACEHOLDER}</span>
            <span className="tk-soc ds muted"><span className="ic">📈</span> {TK_PLACEHOLDER}</span>
            <span className="tk-soc sc muted"><span className="ic">⛓</span> {TK_PLACEHOLDER}</span>
          </div>
          <a className="btn-sunset lg" href={GCA_X_URL} target="_blank" rel="noopener noreferrer" style={{ width: "100%", marginTop: 16, textAlign: "center" }}>
            ▸ follow grand cup auto on x
          </a>
          <div className="tk-disclaim">
            $GCA - parody memecoin content for entertainment purposes only. not financial advice.
            no affiliation, partnership, endorsement, sponsorship, or official status is claimed with
            Rockstar Games, Take-Two Interactive, FIFA, any tournament, team, league, or rights holder.
            not "inspired by Rockstar." this is a memecoin. it may go to zero. trade responsibly.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   CARTEL BRACKET — 48 crews rebranded as Grand Cup Auto cartels
   ───────────────────────────────────────────────────────────── */
const CARTEL_BRACKET = [
  // round of 16 left side
  { stage: "r16", left: { code: "BRA", cartel: "carioca cartel",    col: "#009c3b" }, right: { code: "MAR", cartel: "casablanca crew", col: "#c1272d" }, winner: "left" },
  { stage: "r16", left: { code: "FRA", cartel: "paris syndicate",   col: "#0055a4" }, right: { code: "POR", cartel: "lisbon connect",   col: "#006600" }, winner: "left" },
  { stage: "r16", left: { code: "ARG", cartel: "buenos crew",       col: "#75aadb" }, right: { code: "NGA", cartel: "lagos lords",      col: "#008751" }, winner: null  },
  { stage: "r16", left: { code: "ESP", cartel: "madrid cartel",     col: "#aa151b" }, right: { code: "GER", cartel: "berlin mob",       col: "#ffce00" }, winner: null  },
];

const QFINALS = [
  { left: { code: "BRA", cartel: "carioca cartel",  col: "#009c3b" }, right: { code: "FRA", cartel: "paris syndicate", col: "#0055a4" }, winner: null },
  { left: { code: "ARG", cartel: "buenos crew",     col: "#75aadb" }, right: { code: "ESP", cartel: "madrid cartel",   col: "#aa151b" }, winner: null },
];

const SFINAL = [
  { left: { code: "???", cartel: "tbd", col: "#444" }, right: { code: "???", cartel: "tbd", col: "#444" }, winner: null }
];

function CartelMatch({ m, big = false, allegiance, onAlly }) {
  const Wpx = big ? 280 : 220;
  return (
    <div className={`cb-match ${big ? "big" : ""}`} style={{ minWidth: Wpx }}>
      <button
        className={`cb-team ${m.winner === "left" ? "won" : ""} ${allegiance === m.left.code ? "ally" : ""}`}
        style={{ "--c": m.left.col }}
        onClick={() => onAlly && onAlly(m.left.code)}
      >
        <span className="cb-c">{m.left.code}</span>
        <span className="cb-name">{m.left.cartel}</span>
        {allegiance === m.left.code && <span className="cb-ally-tag">★ allied</span>}
      </button>
      <div className="cb-vs">VS</div>
      <button
        className={`cb-team ${m.winner === "right" ? "won" : ""} ${allegiance === m.right.code ? "ally" : ""}`}
        style={{ "--c": m.right.col }}
        onClick={() => onAlly && onAlly(m.right.code)}
      >
        <span className="cb-c">{m.right.code}</span>
        <span className="cb-name">{m.right.cartel}</span>
        {allegiance === m.right.code && <span className="cb-ally-tag">★ allied</span>}
      </button>
    </div>
  );
}

function CartelBracket() {
  const [ally, setAlly] = useS_tk("BRA");

  return (
    <section className="section cartel-bracket" data-screen-label="06 Cartel Bracket">
      <window.SectionStage
        variant="solo-left"
        shape="strip"
        accent="pink"
        num="06"
        eyebrow="pick your allegiance"
        title={<>cartel <span className="ac">bracket.</span></>}
        sub="5 cartels enter. bounty pots run the city."
        bg="assets/scene-golden-boot-chase.png"
        bgPos="center"
        charLeft="assets/char-wag.png"
        charPop={18}
        height={500}
      />

      <div className="cb-wrap">
        <div className="cb-bar">
          <span className="bb-cap">▸ your allegiance</span>
          <span className="cb-ally-current">{ally} · {
              [...CARTEL_BRACKET, ...QFINALS].flatMap(m => [m.left, m.right]).find(t => t.code === ally)?.cartel || "-"
          }</span>
          <span className="cb-bar-sep" />
          <span className="cb-bar-meta">✦ 1,284 allied · 6 cartels alive</span>
        </div>

        <div className="cb-grid">
          {/* Round of 16 left */}
          <div className="cb-col">
            <div className="cb-col-lbl">round of 16</div>
            <div className="cb-stack">
              {CARTEL_BRACKET.map((m, i) => (
                <CartelMatch key={i} m={m} allegiance={ally} onAlly={setAlly} />
              ))}
            </div>
          </div>

          {/* Quarter */}
          <div className="cb-col">
            <div className="cb-col-lbl">quarter finals</div>
            <div className="cb-stack">
              {QFINALS.map((m, i) => (
                <CartelMatch key={i} m={m} allegiance={ally} onAlly={setAlly} />
              ))}
            </div>
          </div>

          {/* Semis */}
          <div className="cb-col">
            <div className="cb-col-lbl">semi · final</div>
            <div className="cb-stack">
              {SFINAL.map((m, i) => (
                <CartelMatch key={i} m={m} big allegiance={ally} onAlly={setAlly} />
              ))}
            </div>
          </div>

          {/* Throne */}
          <div className="cb-col cb-throne">
            <div className="cb-col-lbl">grand cup auto throne</div>
            <div className="cb-trophy">
              <img src="assets/scene-evidence-locker.png" alt="" className="cb-trophy-bg" />
              <div className="cb-trophy-stamp">
                <div className="t">july 19</div>
                <div className="s">final heist</div>
                <div className="prize">winner takes grand cup auto</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   RAT WALL OF SHAME — live snitch leaderboard
   ───────────────────────────────────────────────────────────── */
const OLD_RATS = [
  { rank: 1, alias: "TIME_TRAVELLER_69",  aka: "8h4...2Wq1", sold: 12_400_000, ts: "47 sec ago",  match: "BRA 2-1 ARG · 67'",  crime: "paper-handed during a goal" },
  { rank: 2, alias: "FUDDED_MILK",        aka: "Kp2...nN9b", sold: 8_700_000,  ts: "3 min ago",   match: "ENG vs FRA · 88'",   crime: "sold the whole bag on the whistle" },
  { rank: 3, alias: "REGRET_EVERY_DAY",   aka: "Z9k...4Vx7", sold: 6_200_000,  ts: "11 min ago",  match: "GER vs ESP · 21'",   crime: "panic-sold red card aftermath" },
  { rank: 4, alias: "DIAMOND_FUMBLED",    aka: "Q3w...e2Ld", sold: 4_500_000,  ts: "22 min ago",  match: "BRA vs ARG · pre-match", crime: "got cold feet at kickoff" },
  { rank: 5, alias: "WHALE_OF_SHAME",     aka: "T7c...y1Mz", sold: 3_800_000,  ts: "34 min ago",  match: "MEX vs USA · 90'+", crime: "didn't trust the cartel" },
  { rank: 6, alias: "PAPER_BAG_LARRY",    aka: "Fg6...rE4n", sold: 2_900_000,  ts: "51 min ago",  match: "JPN vs NED · ht",   crime: "sold halftime for a 1.8x" },
  { rank: 7, alias: "SNITCH_ON_MYSELF",   aka: "V1d...8Ya0", sold: 1_700_000,  ts: "1 hr ago",    match: "ITA vs CRO · 56'",  crime: "leaked own bag to telegram" },
];

function LegacyRatWall() {
  return (
    <section className="section ratwall" data-screen-label="04 Rat Wall of Shame">
      <window.SectionStage
        variant="duo"
        shape="chamfer"
        accent="coral"
        num="04"
        eyebrow="gca · rat scanner"
        title={<>rat <span className="ac">wall.</span></>}
        sub="snitches get posted. on-chain. eternal."
        bg="assets/scene-evidence-locker.png"
        bgPos="center"
        charLeft="assets/char-paperhands.png"
        charRight="assets/char-referee.png"
        charPop={16}
        height={500}
      />

      <div className="rw-wrap">
        <div className="rw-strip">
          <div className="rw-strip-label">
            <span className="d" /> gca · rat scanner · live
          </div>
          <div className="rw-strip-track">
            {[0,1].map(k => (
              <React.Fragment key={k}>
                {RATS.map((r, i) => (
                  <span key={k+":"+i} className="rw-pip">
                    <b>{r.alias}</b>
                    <span className="rw-sep">·</span>
                    <span className="rw-crime">{r.crime}</span>
                    <span className="rw-sep">·</span>
                    <span className="rw-tm">sold {(r.sold/1e6).toFixed(1)}m · {r.ts}</span>
                  </span>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="rw-grid">
          {RATS.map((r) => (
            <div key={r.rank} className={`rw-card ${r.rank === 1 ? "top" : ""}`} data-reveal style={{ "--i": r.rank }}>
              <div className="rw-num">#{String(r.rank).padStart(2, "0")}</div>
              <div className="rw-stamp">snitch</div>
              <div className="rw-photo">
                <div className="rw-photo-pin pin-tl" />
                <div className="rw-photo-pin pin-tr" />
                <div className="rw-photo-inner">
                  <div className="rw-photo-bars">
                    {[0,1,2].map(i => <span key={i} />)}
                  </div>
                  <div className="rw-photo-alias">{r.alias.toLowerCase().replace(/_/g, " ")}</div>
                </div>
                <div className="rw-photo-red" />
              </div>
              <div className="rw-meta">
                <div className="rw-aka mono">{r.aka}</div>
                <div className="rw-stat">
                  <div className="k">sold</div>
                  <div className="v alert">{(r.sold / 1e6).toFixed(1)}m</div>
                </div>
                <div className="rw-stat">
                  <div className="k">during</div>
                  <div className="v">{r.match}</div>
                </div>
                <div className="rw-stat">
                  <div className="k">verdict</div>
                  <div className="v alert">{r.crime}</div>
                </div>
                <div className="rw-ts mono">{r.ts}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="rw-foot">
          <div className="bb-cap">▸ stream</div>
          source: solana rpc · sells &gt; 100k tokens · auto-posts every 24h ·
          <span className="rw-foot-cta">▸ verify on-chain</span>
        </div>
      </div>
    </section>
  );
}

const RAT_LAUNCH_AT = new Date("2026-06-11T19:00:00Z");

const RATS = [
  { rank: 1, alias: "TIME_TRAVELLER_69",  aka: "8h4...2Wq1", sold: 12_400_000, ts: "queued", match: "World Cup kickoff", crime: "pre-sold before the first whistle", mood: "panic whale", heat: 98, img: "assets/ratwall-a-1.jpg" },
  { rank: 2, alias: "RED_CARD_RENE",      aka: "Kp2...nN9b", sold: 8_700_000,  ts: "queued", match: "opening match", crime: "blamed the ref, sold the bag", mood: "crooked whistle", heat: 91, img: "assets/ratwall-a-2.jpg" },
  { rank: 3, alias: "VIP_EXIT_VINNY",     aka: "Z9k...4Vx7", sold: 6_200_000,  ts: "queued", match: "Miami host city", crime: "asked for alpha, clicked sell", mood: "fake insider", heat: 86, img: "assets/ratwall-a-3.jpg" },
  { rank: 4, alias: "VAR_BASEMENT",       aka: "Q3w...e2Ld", sold: 4_500_000,  ts: "queued", match: "VAR review", crime: "rewatched the chart and folded", mood: "screen rat", heat: 79, img: "assets/ratwall-a-4.jpg" },
  { rank: 5, alias: "PAPER_BAG_LARRY",    aka: "T7c...y1Mz", sold: 3_800_000,  ts: "queued", match: "group stage", crime: "hid the sell button in a lunch bag", mood: "old fan", heat: 74, img: "assets/ratwall-b-1.jpg" },
  { rank: 6, alias: "BOOKIE_SIDE_EXIT",   aka: "Fg6...rE4n", sold: 2_900_000,  ts: "queued", match: "odds desk", crime: "took the odds and ran", mood: "street bookie", heat: 68, img: "assets/ratwall-b-2.jpg" },
  { rank: 7, alias: "STADIUM_SQUEAK",     aka: "V1d...8Ya0", sold: 1_700_000,  ts: "queued", match: "security gate", crime: "tried to leave before kickoff", mood: "gate panic", heat: 61, img: "assets/ratwall-b-3.jpg" },
];

function formatRatCountdown(now) {
  const diff = Math.max(0, RAT_LAUNCH_AT.getTime() - now);
  const totalMinutes = Math.floor(diff / 60000);
  return {
    days: Math.floor(totalMinutes / 1440),
    hours: Math.floor((totalMinutes % 1440) / 60),
    mins: totalMinutes % 60,
    live: diff === 0,
  };
}

function RatWall() {
  const [now, setNow] = useS_tk(Date.now());
  useE_tk(() => {
    const t = setInterval(() => setNow(Date.now()), 30000);
    return () => clearInterval(t);
  }, []);

  const countdown = formatRatCountdown(now);
  const queuedVolume = RATS.reduce((sum, r) => sum + r.sold, 0);

  return (
    <section id="rat-wall" className="section ratwall" data-screen-label="04 Rat Wall of Shame" data-rat-wall-version="world-cup-launch-v2">
      <window.SectionStage
        variant="duo"
        shape="chamfer"
        accent="coral"
        num="04"
        eyebrow="gca / rat scanner"
        title={<>rat <span className="ac">wall.</span></>}
        sub="arms at World Cup kickoff. tied to real live events as the tournament unfolds."
        bg="assets/scene-evidence-locker.png"
        bgPos="center"
        charLeft="assets/char-paperhands.png"
        charRight="assets/char-referee.png"
        charPop={16}
        height={500}
      />

      <div className="rw-wrap">
        <div className="rw-launch" data-reveal>
          <div className="rw-launch-copy">
            <div className="bb-cap">pre-launch scanner</div>
            <h3>goes live when the World Cup kicks off.</h3>
            <p>
              Until kickoff, the wall is only rehearsing with suspect files. Once the
              tournament starts, selected football players and live match moments can
              become Rat Wall cases tied to what happens on the pitch.
            </p>
            <div className="rw-launch-tags">
              <span>Mexico City kickoff</span>
              <span>sell tracker armed</span>
              <span>top rats auto-ranked</span>
            </div>
          </div>
          <div className="rw-countdown" aria-label="Rat Wall countdown to World Cup kickoff">
            <div className="rw-count-cell"><b>{countdown.days}</b><span>days</span></div>
            <div className="rw-count-cell"><b>{String(countdown.hours).padStart(2, "0")}</b><span>hours</span></div>
            <div className="rw-count-cell"><b>{String(countdown.mins).padStart(2, "0")}</b><span>mins</span></div>
            <div className={`rw-armed ${countdown.live ? "live" : ""}`}>
              {countdown.live ? "wall live" : "scanner armed"}
            </div>
          </div>
          <div className="rw-launch-radar" aria-hidden="true">
            <span />
            <span />
            <span />
          </div>
        </div>

        <div className="rw-strip">
          <div className="rw-strip-label">
            <span className="d" /> rat wall launch feed
          </div>
          <div className="rw-strip-track">
            {[0,1].map(k => (
              <React.Fragment key={k}>
                {RATS.map((r, i) => (
                  <span key={k+":"+i} className="rw-pip">
                    <b>{r.alias}</b>
                    <span className="rw-sep">/</span>
                    <span className="rw-crime">{r.crime}</span>
                    <span className="rw-sep">/</span>
                    <span className="rw-tm">queued {(r.sold/1e6).toFixed(1)}m / {r.match}</span>
                  </span>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>

        <div className="rw-grid">
          {RATS.map((r) => (
            <div key={r.rank} className={`rw-card ${r.rank === 1 ? "top" : ""}`} data-reveal style={{ "--i": r.rank }}>
              <div className="rw-card-topline">
                <div className="rw-num">#{String(r.rank).padStart(2, "0")}</div>
                <div className="rw-heat">{r.heat}% heat</div>
              </div>
              <div className="rw-stamp">{countdown.live ? "posted" : "armed"}</div>
              <div className="rw-photo">
                <div className="rw-photo-pin pin-tl" />
                <div className="rw-photo-pin pin-tr" />
                <img src={r.img} alt="" loading="lazy" />
                <div className="rw-photo-scan" />
                <div className="rw-photo-red" />
              </div>
              <div className="rw-alias">{r.alias.toLowerCase().replace(/_/g, " ")}</div>
              <div className="rw-meta">
                <div className="rw-aka mono">{r.aka}</div>
                <div className="rw-stat">
                  <div className="k">queued sell</div>
                  <div className="v alert">{(r.sold / 1e6).toFixed(1)}m</div>
                </div>
                <div className="rw-stat">
                  <div className="k">trigger</div>
                  <div className="v">{r.match}</div>
                </div>
                <div className="rw-stat">
                  <div className="k">verdict</div>
                  <div className="v alert">{r.crime}</div>
                </div>
                <div className="rw-mood">{r.mood}</div>
                <div className="rw-ts mono">{r.ts}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="rw-foot">
          <div className="bb-cap">stream rules</div>
          demo files now / live source at kickoff / queued sample volume {(queuedVolume / 1e6).toFixed(1)}m / sells over 100k tokens
          <span className="rw-foot-cta">open rat scanner</span>
        </div>
      </div>
    </section>
  );
}

const CARTEL_STORY_DECK = [
  {
    id: "vice",
    name: "Vice Kings",
    token: "$VICE",
    zone: "CONCACAF / 6 countries",
    family: "Purple Crown",
    color: "#b174ff",
    asset: "assets/cartel-stories/vice-kings-character-story-v2-1080x1920.png",
    matchRule: "Arms on North America match days",
    bounty: "clips, quote raids, match memes",
    trigger: "kickoff, first goal, final whistle",
  },
  {
    id: "jade",
    name: "Jade Triad",
    token: "$JADE",
    zone: "Asia / Pacific routes",
    family: "Emerald Dragon",
    color: "#46e5e5",
    asset: "assets/cartel-stories/jade-triad-character-story-v2-1080x1920.png",
    matchRule: "Arms when Asia Pacific teams go live",
    bounty: "edits, reaction clips, highlight remixes",
    trigger: "lineups, goal swing, full time",
  },
  {
    id: "muertos",
    name: "Los Muertos",
    token: "$MUERTOS",
    zone: "Latin America / death row",
    family: "Red Skull",
    color: "#ff735c",
    asset: "assets/cartel-stories/los-muertos-character-story-v2-1080x1920.png",
    matchRule: "Arms on Latin derby nights",
    bounty: "poster drops, red-card memes, street art",
    trigger: "rival match, penalty, upset",
  },
  {
    id: "mamba",
    name: "Mamba Syndicate",
    token: "$MAMBA",
    zone: "Africa / danger route",
    family: "Green Fang",
    color: "#5be684",
    asset: "assets/cartel-stories/mamba-syndicate-character-story-v2-1080x1920.png",
    matchRule: "Arms when underdogs start moving",
    bounty: "short clips, creator stunts, fan edits",
    trigger: "first shot, equalizer, comeback",
  },
  {
    id: "bratva",
    name: "Bratva",
    token: "$BRATVA",
    zone: "Europe / cold book",
    family: "Gold Crest",
    color: "#ffd23a",
    asset: "assets/cartel-stories/bratva-character-story-v2-1080x1920.png",
    matchRule: "Arms on heavyweight Europe fixtures",
    bounty: "threads, callouts, rivalry edits",
    trigger: "team sheet, knockout pressure, final whistle",
  },
];

function CartelBracketV2() {
  const [active, setActive] = useS_tk(0);
  const touchX = useR_tk(null);
  const cartel = CARTEL_STORY_DECK[active];
  const next = () => setActive((active + 1) % CARTEL_STORY_DECK.length);
  const prev = () => setActive((active - 1 + CARTEL_STORY_DECK.length) % CARTEL_STORY_DECK.length);
  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchX.current == null) return;
    const dx = e.changedTouches[0].clientX - touchX.current;
    touchX.current = null;
    if (Math.abs(dx) < 36) return;
    dx < 0 ? next() : prev();
  };

  return (
    <section className="section cartel-bracket cb2-section" data-screen-label="06 Cartel Bounty Deck">
      <window.SectionStage
        variant="solo-left"
        shape="strip"
        accent="pink"
        num="06"
        eyebrow="five cartel bounty families"
        title={<>cartel <span className="ac">bounty deck.</span></>}
        sub="Swipe the family files. Each cartel token funds its own real-match bounty pot while the full system feeds $GCA."
        bg="assets/scene-golden-boot-chase.png"
        bgPos="center"
        charLeft="assets/char-wag.png"
        charPop={18}
        height={500}
      />

      <div className="cb2-wrap" style={{ "--cartel": cartel.color }}>
        <div className="cb2-top">
          <div>
            <div className="cb2-kicker mono">live match bounty routing</div>
            <h3>{cartel.name}</h3>
            <p>Click a family or swipe the story card. When a real World Cup match goes live, matching cartel contracts can open on Pump.fun GO.</p>
          </div>
          <div className="cb2-status">
            <span>active family</span>
            <b>{cartel.token}</b>
          </div>
        </div>

        <div className="cb2-frame">
          <div
            className="cb2-story"
            onTouchStart={onTouchStart}
            onTouchEnd={onTouchEnd}
            aria-label={`${cartel.name} story card`}
          >
            <button className="cb2-nav prev" onClick={prev} aria-label="Previous cartel">‹</button>
            <img src={cartel.asset} alt={`${cartel.name} character story`} loading="lazy" />
            <button className="cb2-nav next" onClick={next} aria-label="Next cartel">›</button>
            <div className="cb2-story-stamp">swipe file</div>
          </div>

          <div className="cb2-panel">
            <div className="cb2-panel-head">
              <span className="mono">{String(active + 1).padStart(2, "0")} / 05</span>
              <b>{cartel.family}</b>
            </div>
            <div className="cb2-name">{cartel.name}</div>
            <div className="cb2-token">{cartel.token}</div>

            <div className="cb2-logic">
              <div>
                <span>territory</span>
                <b>{cartel.zone}</b>
              </div>
              <div>
                <span>real match trigger</span>
                <b>{cartel.matchRule}</b>
              </div>
              <div>
                <span>bounty jobs</span>
                <b>{cartel.bounty}</b>
              </div>
              <div>
                <span>event hooks</span>
                <b>{cartel.trigger}</b>
              </div>
            </div>

            <div className="cb2-flow">
              <div><span>match goes live</span></div>
              <i />
              <div><span>cartel pot opens</span></div>
              <i />
              <div><span>holders hunt bounties</span></div>
            </div>

            <div className="cb2-note">
              Claim rule: submitting wallet must hold $GCA or one Cartel token. No bag, no bounty.
            </div>
          </div>
        </div>

        <div className="cb2-tabs" role="tablist" aria-label="Cartel story cards">
          {CARTEL_STORY_DECK.map((c, i) => (
            <button
              key={c.id}
              className={`cb2-tab ${active === i ? "on" : ""}`}
              style={{ "--tab": c.color }}
              onClick={() => setActive(i)}
              role="tab"
              aria-selected={active === i}
            >
              <span>{String(i + 1).padStart(2, "0")}</span>
              <b>{c.name}</b>
              <em>{c.token}</em>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Tokenomics = Tokenomics;
window.CartelBracket = CartelBracketV2;
window.RatWall = RatWall;