/* =========================================================
   WCI FRONTPAGE — React components
   ========================================================= */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- 3D Soccer / Betting SVG assets ---------- */
/* eslint-disable */
function Soccer3D({ size = 100, tilt = 0 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" style={{overflow:"visible", transform:`rotate(${tilt}deg)`}}>
      <defs>
        <radialGradient id="ball-g" cx="35%" cy="30%" r="75%">
          <stop offset="0%" stopColor="#ffffff" />
          <stop offset="55%" stopColor="#d9d9d9" />
          <stop offset="100%" stopColor="#5a5a5a" />
        </radialGradient>
        <radialGradient id="ball-shine" cx="30%" cy="22%" r="30%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.95)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </radialGradient>
        <filter id="ball-shadow"><feDropShadow dx="0" dy="10" stdDeviation="8" floodColor="#000" floodOpacity="0.55"/></filter>
      </defs>
      <g filter="url(#ball-shadow)">
        <circle cx="60" cy="60" r="48" fill="url(#ball-g)" stroke="#222" strokeWidth="1.5"/>
        {/* pentagons */}
        <polygon points="60,30 74,40 68,56 52,56 46,40" fill="#0f0f12" />
        <polygon points="32,56 44,62 42,78 28,78 22,66" fill="#0f0f12" />
        <polygon points="88,56 96,68 88,80 76,78 76,62" fill="#0f0f12" />
        <polygon points="50,82 60,78 70,82 68,98 52,98" fill="#0f0f12" />
        {/* seams */}
        <g stroke="#0f0f12" strokeWidth="1.5" fill="none" strokeLinecap="round">
          <path d="M60 30 L60 20" /><path d="M74 40 L84 36" /><path d="M46 40 L36 36" />
          <path d="M68 56 L76 62" /><path d="M52 56 L44 62" />
          <path d="M28 78 L18 82" /><path d="M88 80 L98 84" />
          <path d="M52 98 L50 108" /><path d="M68 98 L70 108" />
        </g>
        <circle cx="60" cy="60" r="48" fill="url(#ball-shine)" />
      </g>
    </svg>
  );
}

function BetTicket3D({ size = 240 }) {
  return (
    <svg width={size} height={size * 0.6} viewBox="0 0 260 156" style={{overflow:"visible"}}>
      <defs>
        <linearGradient id="tk-g" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="#FFE668"/>
          <stop offset="50%" stopColor="#F5D020"/>
          <stop offset="100%" stopColor="#C99B00"/>
        </linearGradient>
        <filter id="tk-shadow"><feDropShadow dx="0" dy="12" stdDeviation="10" floodColor="#000" floodOpacity="0.5"/></filter>
      </defs>
      <g filter="url(#tk-shadow)">
        <path d="M8 22 Q 8 10 20 10 L 240 10 Q 252 10 252 22 L 252 62
                 A 14 14 0 0 0 252 90 L 252 134 Q 252 146 240 146 L 20 146 Q 8 146 8 134 L 8 90
                 A 14 14 0 0 0 8 62 Z"
              fill="url(#tk-g)" stroke="#7a5a00" strokeWidth="1.5"/>
        <line x1="130" y1="14" x2="130" y2="142" stroke="#7a5a00" strokeDasharray="4 4" strokeWidth="1.2"/>
        <text x="24" y="40" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill="#3a2200" fontWeight="700" letterSpacing="2">PAULS PICK</text>
        <text x="24" y="72" fontFamily="'Bricolage Grotesque', sans-serif" fontWeight="900" fontSize="28" fill="#1a0e00">USA 2–1</text>
        <text x="24" y="94" fontFamily="'JetBrains Mono', monospace" fontSize="11" fill="#3a2200" fontWeight="600">vs TUR · 78%</text>
        <text x="24" y="124" fontFamily="'JetBrains Mono', monospace" fontSize="10" fill="#3a2200" fontWeight="600" letterSpacing="1.5">×2.87 ODDS</text>
        <g transform="translate(168 42)">
          <rect x="0" y="0" width="62" height="62" rx="8" fill="#1a0e00"/>
          <text x="31" y="40" textAnchor="middle" fontSize="30">🐙</text>
        </g>
        <text x="198" y="124" fontFamily="'JetBrains Mono', monospace" fontSize="9" fill="#3a2200" fontWeight="700" letterSpacing="1.5">#WCI-000042</text>
      </g>
    </svg>
  );
}

function Coin3D({ size = 120 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" style={{overflow:"visible"}}>
      <defs>
        <radialGradient id="c-g" cx="35%" cy="30%" r="80%">
          <stop offset="0%" stopColor="#FFF6C4"/>
          <stop offset="50%" stopColor="#F5D020"/>
          <stop offset="100%" stopColor="#8a6400"/>
        </radialGradient>
        <filter id="c-shadow"><feDropShadow dx="0" dy="10" stdDeviation="8" floodColor="#000" floodOpacity="0.5"/></filter>
      </defs>
      <g filter="url(#c-shadow)">
        <circle cx="60" cy="60" r="52" fill="url(#c-g)" stroke="#7a5a00" strokeWidth="2"/>
        <circle cx="60" cy="60" r="44" fill="none" stroke="#7a5a00" strokeWidth="1" strokeDasharray="2 3" opacity="0.6"/>
        <text x="60" y="70" textAnchor="middle" fontFamily="'Bricolage Grotesque', sans-serif" fontWeight="900" fontSize="34" fill="#3a2200">W</text>
        <ellipse cx="46" cy="40" rx="12" ry="6" fill="rgba(255,255,255,0.5)"/>
      </g>
    </svg>
  );
}

function Whistle3D({ size = 90 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" style={{overflow:"visible"}}>
      <defs>
        <radialGradient id="w-g" cx="30%" cy="30%" r="80%">
          <stop offset="0%" stopColor="#ddd"/><stop offset="60%" stopColor="#888"/><stop offset="100%" stopColor="#2a2a2a"/>
        </radialGradient>
        <filter id="w-shadow"><feDropShadow dx="0" dy="8" stdDeviation="6" floodColor="#000" floodOpacity="0.5"/></filter>
      </defs>
      <g filter="url(#w-shadow)">
        <path d="M 20 60 Q 20 36 50 36 L 90 36 Q 100 36 100 48 L 100 72 Q 100 84 90 84 L 60 84 Q 40 84 20 72 Z"
              fill="url(#w-g)" stroke="#1a1a1a" strokeWidth="1.5"/>
        <circle cx="46" cy="60" r="6" fill="#0a0a0a"/>
        <path d="M 86 36 Q 90 20 100 22 Q 98 30 92 36" fill="none" stroke="#F5D020" strokeWidth="3" strokeLinecap="round"/>
      </g>
    </svg>
  );
}
/* ---------- LogoOrb ---------- */
function LogoOrb() {
  return (
    <div className="orb-wrap" aria-label="World Cup Inu · Home">
      <div className="orb-halo" />
      <div className="orb-ring" />
      <div className="orb-hub">
        <img src="assets/badge_world_cup_inu_circle.png" alt="" />
      </div>
    </div>
  );
}

function HeaderWave() {
  return (
    <svg className="headerwave" viewBox="0 0 260 14" preserveAspectRatio="none">
      <defs>
        <linearGradient id="rw-grad" x1="0" x2="1">
          <stop offset="0%"   stopColor="#E8392C" />
          <stop offset="14%"  stopColor="#FF7A1F" />
          <stop offset="28%"  stopColor="#F5D020" />
          <stop offset="42%"  stopColor="#9FD634" />
          <stop offset="56%"  stopColor="#00B9B2" />
          <stop offset="70%"  stopColor="#2E6FE6" />
          <stop offset="84%"  stopColor="#8B47D6" />
          <stop offset="100%" stopColor="#E637A8" />
        </linearGradient>
      </defs>
      <path
        d="M0 8 Q 20 -4 40 8 T 80 8 T 120 8 T 160 8 T 200 8 T 240 8 T 260 8"
        stroke="url(#rw-grad)"
        strokeWidth="3"
        fill="none"
        strokeLinecap="round"
      />
    </svg>
  );
}

/* ---------- TopNav ---------- */
const NAV_LINKS_L = [
  { id: "how",         label: "How to Buy" },
  { id: "oracle-feed", label: "Oracle" },
];
const NAV_LINKS_R = [
  { id: "bets",        label: "Bets" },
  { id: "socials",     label: "Socials" },
  { id: "tokenomics",  label: "Tokenomics" },
];
/* unified nav for the Jumbotron bar — each link gets its own LED tone */
const NAV_LINKS_ALL = [
  { id: "how",         label: "Buy" },
  { id: "oracle-feed", label: "Oracle" },
  { id: "bets",        label: "Bets" },
  { id: "socials",     label: "Socials" },
  { id: "tokenomics",  label: "Contract" },
];

/* ---------- AltNav · sticky glass-pill alternative menu ---------- */
const ALT_NAV_LINKS = [
  { id: "how",         label: "Buy",        emoji: "💰", quip: "four taps. one swap." },
  { id: "oracle-feed", label: "Oracle",     emoji: "📡", quip: "paul has ink for blood." },
  { id: "bets",        label: "Bets",       emoji: "🐙", quip: "follow the octopus." },
  { id: "socials",     label: "Socials",    emoji: "📣", quip: "the tank does not sleep." },
  { id: "tokenomics",  label: "Contract",   emoji: "📜", quip: "painfully boring." },
];

function AltNav() {
  const active = useActiveSection();
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`alt-nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="alt-nav-inner">
        <a className="alt-brand" href="#hero" aria-label="World Cup Inu — home">
          <span className="ab-paul" aria-hidden="true">🐙</span>
          <span className="ab-name">WCI<i>·</i></span>
          <span className="ab-streak" aria-label="Paul's current streak">
            <span className="ab-streak-dot" aria-hidden="true" />
            <strong>8/8</strong>
            <span className="ab-streak-k">streak</span>
          </span>
        </a>

        <nav className="alt-links" aria-label="Primary">
          {ALT_NAV_LINKS.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={active === l.id ? "is-active" : ""}
              aria-current={active === l.id ? "true" : undefined}
              data-quip={l.quip}
            >
              <span className="al-emoji" aria-hidden="true">{l.emoji}</span>
              <span className="al-label">{l.label}</span>
            </a>
          ))}
        </nav>

        <div className="alt-right">
          <button className="alt-connect" type="button">Connect</button>
          <button className="alt-buy" type="button">
            <span className="alt-buy-emoji" aria-hidden="true">🐙</span>
            <span>Buy $WCI26</span>
            <span className="alt-buy-arrow" aria-hidden="true">→</span>
          </button>
        </div>
      </div>
      {/* tiny ticker that rolls under the nav for that "live betting site" energy */}
      <div className="alt-ticker" aria-hidden="true">
        <div className="alt-ticker-track">
          {Array.from({length: 4}).map((_, i) => (
            <span key={i} className="alt-ticker-row">
              <i className="att-dot" /> PAUL'S CALL · USA 2 — MEX 1
              <em>·</em> 78% CONFIDENCE
              <em>·</em> ×2.4 ODDS
              <em>·</em> NEXT PICK IN 14H
              <em>·</em> LP LOCKED 180D
              <em>·</em> 8/8 PERFECT SINCE 2010
              <em>·</em>
            </span>
          ))}
        </div>
      </div>
    </header>
  );
}

function useActiveSection() {
  const [active, setActive] = useState(null);
  useEffect(() => {
    const ids = [...NAV_LINKS_L, ...NAV_LINKS_R].map(l => l.id);
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const observer = new IntersectionObserver((entries) => {
      // pick the entry closest to the top of the viewport that is intersecting
      const visible = entries
        .filter(e => e.isIntersecting)
        .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
      if (visible.length) setActive(visible[0].target.id);
    }, { rootMargin: "-35% 0px -55% 0px", threshold: 0 });
    els.forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);
  return active;
}

/* Live UTC clock for the broadcast LIVE bar */
function useUTCClock() {
  const [t, setT] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const pad = (n) => String(n).padStart(2, "0");
  return `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())} UTC`;
}

function TopNav() {
  const active = useActiveSection();
  const clock = useUTCClock();
  return (
    <header className="topnav topnav-jumbo">
      <div className="topnav-inner">
        <span className="tj-screws" aria-hidden="true">
          <i /><i /><i /><i />
        </span>
        <span className="tj-grass" aria-hidden="true" />
        <span className="tj-purple-glow" aria-hidden="true" />

        {/* Broadcast LIVE ribbon at the very top */}
        <div className="tj-live-bar" aria-hidden="true">
          <span className="tj-live-pill"><i />LIVE</span>
          <span className="tj-live-track">
            <span className="tj-live-row">
              <span>WCI ORACLE FEED · THE INK IS WET</span>
              <em>◆</em>
              <span>PAUL'S CALL · USA 2 — TUR 1</span>
              <em>◆</em>
              <span>78% CONFIDENCE</span>
              <em>◆</em>
              <span>ROI +212%</span>
              <em>◆</em>
              <span>NEXT PICK IN 14H</span>
              <em>◆</em>
            </span>
            <span className="tj-live-row">
              <span>WCI ORACLE FEED · THE INK IS WET</span>
              <em>◆</em>
              <span>PAUL'S CALL · USA 2 — TUR 1</span>
              <em>◆</em>
              <span>78% CONFIDENCE</span>
              <em>◆</em>
              <span>ROI +212%</span>
              <em>◆</em>
              <span>NEXT PICK IN 14H</span>
              <em>◆</em>
            </span>
          </span>
          <span className="tj-live-clock">{clock}</span>
        </div>

        <div className="tj-row">
          <div className="tj-logo">
            <a className="tj-logo-disc" href="#hero" aria-label="World Cup Inu — home">
              <span className="tj-logo-glow" aria-hidden="true" />
              <img src="assets/mainlogo.png" alt="World Cup Inu" />
            </a>
            <div className="tj-logo-text">
              <span className="tj-logo-mark">World Cup Inu</span>
              <span className="tj-logo-sub">Channel 26 · 8/8 Streak</span>
            </div>
          </div>

          <nav className="tj-links" aria-label="Primary">
            {NAV_LINKS_ALL.map((l, i) => (
              <a
                key={l.id}
                href={`#${l.id}`}
                className={`tj-link ${active === l.id ? "is-active" : ""}`}
                data-tone={i}
                aria-current={active === l.id ? "true" : undefined}
              >
                <span className="tj-link-dot" aria-hidden="true" />
                <span>{l.label}</span>
              </a>
            ))}
          </nav>

          <div className="tj-cta">
            <a className="tj-social tj-social-x" href="https://x.com/WCI_26" target="_blank" rel="noreferrer noopener" aria-label="Follow on X · @WCI_26">
              <svg viewBox="0 0 48 48" aria-hidden="true">
                <path d="M30.6 6h6L25.5 18.7 38.6 42h-9.5l-7.4-10.6L13.4 42H7l11.7-13.4L6 6h9.7l6.7 9.7L30.6 6Zm-2.4 32.2h3.5L15 9.4h-3.5l16.7 28.8Z" fill="currentColor"/>
              </svg>
            </a>
            <a className="tj-social tj-social-tg" href="https://t.me/WCI_26" target="_blank" rel="noreferrer noopener" aria-label="Join Telegram · @WCI_26">
              <svg viewBox="0 0 48 48" aria-hidden="true">
                <path d="M40.4 8.4 4.7 22c-2.5.9-2.4 2.3-.4 2.9l9.1 2.8 21-13.2c1-.6 1.9-.3 1.2.4L18.6 31.7l-.7 9.5c1 0 1.5-.4 2-1l4.9-4.7 9.4 6.9c1.7 1 2.9.5 3.4-1.6l6.1-28.7c.7-2.6-.9-3.7-3.3-2.7Z" fill="currentColor"/>
              </svg>
            </a>
            <span className="tj-cta-divider" aria-hidden="true" />
            <span className="tj-connect is-soon" aria-disabled="true">Bet Now</span>
            <a className="tj-buy" href={WCI26_UNISWAP_URL} target="_blank" rel="noreferrer noopener">
              <span aria-hidden="true">🐙</span>
              <span>Buy $WCI26</span>
              <span className="tj-buy-arrow" aria-hidden="true">▶</span>
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

/* Legacy ornate TopNav with central LogoOrb + peek-tentacles — kept here so we
   can swap back during design review. Not currently rendered. */
function TopNavLegacy() {
  const active = useActiveSection();
  return (
    <header className="topnav">
      <div className="topnav-inner">
        <span className="topnav-bevel-top" aria-hidden="true" />
        <span className="topnav-bevel-bottom" aria-hidden="true" />
        {/* === Truly 3D Peek Tentacles — chunkier body, deeper rim light, ground shadow. */}
        <a className="nav-tentacle nav-tentacle-l" href="#oracle" aria-label="Wave to Paul">
          <svg viewBox="0 0 260 240" aria-hidden="true">
            <defs>
              {/* Body gradient: deep purple core with brighter side-light from the top-left */}
              <linearGradient id="navTentBodyL" x1="0.2" y1="0" x2="0.8" y2="0.4">
                <stop offset="0%"   stopColor="#3d1366" />
                <stop offset="22%"  stopColor="#5e23a3" />
                <stop offset="50%"  stopColor="#a85df0" />
                <stop offset="62%"  stopColor="#d29eff" />
                <stop offset="78%"  stopColor="#7a37c2" />
                <stop offset="100%" stopColor="#2a0a4a" />
              </linearGradient>
              {/* Rim light — pure white falling along the top edge */}
              <linearGradient id="navTentRimL" x1="0.3" y1="0" x2="0.4" y2="1">
                <stop offset="0%"  stopColor="rgba(255,255,255,0.95)" />
                <stop offset="55%" stopColor="rgba(255,255,255,0.4)" />
                <stop offset="100%" stopColor="rgba(255,255,255,0)" />
              </linearGradient>
              <radialGradient id="navTentSuckerL" cx="0.35" cy="0.3" r="0.7">
                <stop offset="0%"  stopColor="#FFF1E5" />
                <stop offset="35%" stopColor="#FFC2A8" />
                <stop offset="80%" stopColor="#D8845F" />
                <stop offset="100%" stopColor="#7E3520" />
              </radialGradient>
              <filter id="navTentGlowL" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="9" />
              </filter>
              <filter id="navTentDropL" x="-30%" y="-30%" width="160%" height="160%">
                <feGaussianBlur stdDeviation="3" />
              </filter>
            </defs>
            {/* outer ambient glow */}
            <path d="M 24 0 Q 12 56 48 96 Q 88 138 132 168 Q 174 200 232 218"
                  stroke="#B266FF" strokeWidth="58" fill="none" strokeLinecap="round"
                  opacity="0.45" filter="url(#navTentGlowL)" className="nt-glow" />
            {/* GROUND shadow (blurred, offset down + right) */}
            <path d="M 24 0 Q 12 56 48 96 Q 88 138 132 168 Q 174 200 232 218"
                  stroke="#0a031a" strokeWidth="36" fill="none" strokeLinecap="round"
                  opacity="0.9" transform="translate(7, 14)" filter="url(#navTentDropL)" />
            {/* DARK underside — depth */}
            <path d="M 24 0 Q 12 56 48 96 Q 88 138 132 168 Q 174 200 232 218"
                  stroke="#1f0738" strokeWidth="42" fill="none" strokeLinecap="round"
                  opacity="0.95" transform="translate(3, 5)" />
            {/* Main body — chunky */}
            <path d="M 24 0 Q 12 56 48 96 Q 88 138 132 168 Q 174 200 232 218"
                  stroke="url(#navTentBodyL)" strokeWidth="40" fill="none" strokeLinecap="round" />
            {/* Wet specular highlight band */}
            <path d="M 24 0 Q 12 56 48 96 Q 88 138 132 168 Q 174 200 232 218"
                  stroke="url(#navTentRimL)" strokeWidth="20" fill="none" strokeLinecap="round"
                  opacity="0.85" transform="translate(-5, -7)" />
            {/* Sharp top rim hairline */}
            <path d="M 24 0 Q 12 56 48 96 Q 88 138 132 168 Q 174 200 232 218"
                  stroke="rgba(255,255,255,0.95)" strokeWidth="2" fill="none" strokeLinecap="round"
                  opacity="0.9" transform="translate(-7, -9)" strokeDasharray="2 10" />
            {/* Suction cups — depth gradient (front cups bigger and brighter) */}
            {[[20,20,8.5],[34,56,8],[60,96,8],[100,134,8.5],[140,168,9],[180,196,9.5]].map(([cx,cy,r],i)=>(
              <g key={i} className="nt-cup">
                {/* drop shadow under each cup */}
                <ellipse cx={cx+1.5} cy={cy+r*0.7} rx={r*0.95} ry={r*0.42} fill="#0a031a" opacity="0.55" />
                {/* dark rim ring */}
                <circle cx={cx} cy={cy} r={r+1} fill="#3a0f60" opacity="0.7" />
                {/* main sucker */}
                <circle cx={cx} cy={cy} r={r} fill="url(#navTentSuckerL)" />
                {/* hole shadow */}
                <ellipse cx={cx+0.4} cy={cy+0.6} rx={r*0.4} ry={r*0.32} fill="#5A2818" opacity="0.7" />
                {/* white specular highlight */}
                <ellipse cx={cx-r*0.35} cy={cy-r*0.4} rx={r*0.3} ry={r*0.22} fill="rgba(255,255,255,0.92)" />
              </g>
            ))}
            {/* Tip ball — small ground shadow + highlight */}
            <ellipse cx="234" cy="226" rx="14" ry="6" fill="#0a031a" opacity="0.5" />
            <circle cx="234" cy="218" r="14" fill="url(#navTentBodyL)" />
            <ellipse cx="230" cy="213" rx="5" ry="3.5" fill="rgba(255,255,255,0.82)" />
          </svg>
        </a>

        <a className="nav-tentacle nav-tentacle-r" href="#pool" aria-label="Place a bet">
          <svg viewBox="0 0 260 240" aria-hidden="true">
            <defs>
              <linearGradient id="navTentBodyR" x1="0.8" y1="0" x2="0.2" y2="0.4">
                <stop offset="0%"   stopColor="#3d1366" />
                <stop offset="22%"  stopColor="#5e23a3" />
                <stop offset="50%"  stopColor="#a85df0" />
                <stop offset="62%"  stopColor="#d29eff" />
                <stop offset="78%"  stopColor="#7a37c2" />
                <stop offset="100%" stopColor="#2a0a4a" />
              </linearGradient>
              <linearGradient id="navTentRimR" x1="0.7" y1="0" x2="0.6" y2="1">
                <stop offset="0%"  stopColor="rgba(255,255,255,0.95)" />
                <stop offset="55%" stopColor="rgba(255,255,255,0.4)" />
                <stop offset="100%" stopColor="rgba(255,255,255,0)" />
              </linearGradient>
              <radialGradient id="navTentSuckerR" cx="0.35" cy="0.3" r="0.7">
                <stop offset="0%"  stopColor="#FFF1E5" />
                <stop offset="35%" stopColor="#FFC2A8" />
                <stop offset="80%" stopColor="#D8845F" />
                <stop offset="100%" stopColor="#7E3520" />
              </radialGradient>
              <filter id="navTentGlowR" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="9" />
              </filter>
              <filter id="navTentDropR" x="-30%" y="-30%" width="160%" height="160%">
                <feGaussianBlur stdDeviation="3" />
              </filter>
            </defs>
            <path d="M 236 0 Q 248 56 212 96 Q 172 138 128 168 Q 86 200 28 218"
                  stroke="#B266FF" strokeWidth="58" fill="none" strokeLinecap="round"
                  opacity="0.45" filter="url(#navTentGlowR)" className="nt-glow" />
            <path d="M 236 0 Q 248 56 212 96 Q 172 138 128 168 Q 86 200 28 218"
                  stroke="#0a031a" strokeWidth="36" fill="none" strokeLinecap="round"
                  opacity="0.9" transform="translate(-7, 14)" filter="url(#navTentDropR)" />
            <path d="M 236 0 Q 248 56 212 96 Q 172 138 128 168 Q 86 200 28 218"
                  stroke="#1f0738" strokeWidth="42" fill="none" strokeLinecap="round"
                  opacity="0.95" transform="translate(-3, 5)" />
            <path d="M 236 0 Q 248 56 212 96 Q 172 138 128 168 Q 86 200 28 218"
                  stroke="url(#navTentBodyR)" strokeWidth="40" fill="none" strokeLinecap="round" />
            <path d="M 236 0 Q 248 56 212 96 Q 172 138 128 168 Q 86 200 28 218"
                  stroke="url(#navTentRimR)" strokeWidth="20" fill="none" strokeLinecap="round"
                  opacity="0.85" transform="translate(5, -7)" />
            <path d="M 236 0 Q 248 56 212 96 Q 172 138 128 168 Q 86 200 28 218"
                  stroke="rgba(255,255,255,0.95)" strokeWidth="2" fill="none" strokeLinecap="round"
                  opacity="0.9" transform="translate(7, -9)" strokeDasharray="2 10" />
            {[[240,20,8.5],[226,56,8],[200,96,8],[160,134,8.5],[120,168,9],[80,196,9.5]].map(([cx,cy,r],i)=>(
              <g key={i} className="nt-cup">
                <ellipse cx={cx-1.5} cy={cy+r*0.7} rx={r*0.95} ry={r*0.42} fill="#0a031a" opacity="0.55" />
                <circle cx={cx} cy={cy} r={r+1} fill="#3a0f60" opacity="0.7" />
                <circle cx={cx} cy={cy} r={r} fill="url(#navTentSuckerR)" />
                <ellipse cx={cx-0.4} cy={cy+0.6} rx={r*0.4} ry={r*0.32} fill="#5A2818" opacity="0.7" />
                <ellipse cx={cx+r*0.35} cy={cy-r*0.4} rx={r*0.3} ry={r*0.22} fill="rgba(255,255,255,0.92)" />
              </g>
            ))}
            <ellipse cx="26" cy="226" rx="14" ry="6" fill="#0a031a" opacity="0.5" />
            <circle cx="26" cy="218" r="14" fill="url(#navTentBodyR)" />
            <ellipse cx="30" cy="213" rx="5" ry="3.5" fill="rgba(255,255,255,0.82)" />
          </svg>
        </a>

        <div className="nav-left">
          <span className="wordmark">WCI<span className="accent">·</span></span>
          <span className="nav-status" aria-label="Paul's current streak">
            <span className="ns-dot" aria-hidden="true" />
            <span className="ns-label">PAUL · LIVE</span>
            <span className="ns-meta">8/8 streak</span>
          </span>
        </div>
        <nav className="nav-links" aria-label="Primary">
          {NAV_LINKS_L.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={active === l.id ? "is-active" : ""}
              aria-current={active === l.id ? "true" : undefined}
            >
              {l.label}
            </a>
          ))}
          <span className="notch-gap" aria-hidden="true" />
          {NAV_LINKS_R.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={active === l.id ? "is-active" : ""}
              aria-current={active === l.id ? "true" : undefined}
            >
              {l.label}
            </a>
          ))}
        </nav>
        <div className="nav-right">
          <button className="btn-connect">Connect</button>
          <button className="btn-3d btn-buy">Buy $WCI26</button>
        </div>
        <span className="topnav-seam" />
        <span className="orb-tick left" />
        <span className="orb-tick right" />
      </div>
      <LogoOrb />
    </header>
  );
}

/* ---------- Countdown ---------- */
function useCountdown(targetISO) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const target = new Date(targetISO).getTime();
  const delta = Math.max(0, target - now);
  const d = Math.floor(delta / 86400000);
  const h = Math.floor((delta % 86400000) / 3600000);
  const m = Math.floor((delta % 3600000) / 60000);
  const s = Math.floor((delta % 60000) / 1000);
  const pad = (n) => String(n).padStart(2, "0");
  return { d: pad(d), h: pad(h), m: pad(m), s: pad(s) };
}

function Countdown({ target, state }) {
  const { d, h, m, s } = useCountdown(target);
  const liveLabel = state === "live"
    ? <><span style={{color:"var(--coral)"}}>● LIVE</span> · USA 1 · TUR 0 · 67'</>
    : (
      <>
        <span className="cd-eyebrow-mark">⚽</span>
        <span className="cd-eyebrow-text">
          <span className="cd-eyebrow-line1">Until World Cup Kickoff</span>
          <span className="cd-eyebrow-line2">Mexico City · Match 1 · Jun 11</span>
        </span>
      </>
    );
  return (
    <div className="countdown">
      <div className="countdown-left">{liveLabel}</div>
      <div className="countdown-digits">
        <span>{d}<span className="unit">D</span></span>
        <span className="colon">:</span>
        <span>{h}<span className="unit">H</span></span>
        <span className="colon">:</span>
        <span>{m}<span className="unit">M</span></span>
        <span className="colon">:</span>
        <span>{s}<span className="unit">S</span></span>
      </div>
    </div>
  );
}

/* ---------- PaulHero (premium cinematic stage) ---------- */
function PaulHero() {
  // Cursor-tracked parallax: tilt the model wrapper subtly toward the cursor.
  useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth  - 0.5) * 2;  // -1..1
      const y = (e.clientY / window.innerHeight - 0.5) * 2;
      document.documentElement.style.setProperty("--ph-cx", x);
      document.documentElement.style.setProperty("--ph-cy", y);
    };
    window.addEventListener("mousemove", onMove, { passive: true });
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section className="paul-hero v2" data-screen-label="00 Paul Hero">
      {/* Deep cinematic backdrop */}
      <div className="ph-bg">
        <div className="ph-mesh" />
        <div className="ph-stars-fine" />
        <div className="ph-aurora ph-aurora-1" />
        <div className="ph-aurora ph-aurora-2" />
        <div className="ph-nebula ph-nebula-1" />
        <div className="ph-nebula ph-nebula-2" />
        <div className="ph-vignette" />
      </div>

      {/* Volumetric god ray from above */}
      <div className="ph-godray" />

      {/* Animated horizon light streak */}
      <div className="ph-sweep" />

      {/* Iridescent stage floor */}
      <div className="ph-floor" />
      <div className="ph-floor-grid" />

      {/* Pedestal halo + spotlight + ground shadow */}
      <div className="ph-pedestal" />
      <div className="ph-spotlight" />
      <div className="ph-shadow" />

      {/* Sparkle orbs */}
      <span className="ph-sparkle s1" />
      <span className="ph-sparkle s2" />
      <span className="ph-sparkle s3" />
      <span className="ph-sparkle s4" />
      <span className="ph-sparkle s5" />
      <span className="ph-sparkle s6" />
      <span className="ph-sparkle s7" />
      <span className="ph-sparkle s8" />

      {/* Conic rim glow ring behind model */}
      <div className="ph-rim-glow" />

      {/* HUD — top bar */}
      <div className="ph-hud-top">
        <span className="ph-hud-pill">
          <span className="dot" /> <b>LIVE</b> · PAUL.v8
        </span>
        <span className="ph-hud-divider" />
        <span className="ph-hud-stat">
          <i>CONFIDENCE</i><b>88.0%</b>
        </span>
        <span className="ph-hud-divider" />
        <span className="ph-hud-stat">
          <i>STREAK</i><b>7</b>
        </span>
        <span className="ph-hud-divider" />
        <span className="ph-hud-stat">
          <i>ORACLE</i><b>CHAINLINK</b>
        </span>
      </div>

      {/* The 3D model — popout */}
      <div className="ph-model-wrap">
        <model-viewer
          src="uploads/Paul3d_web.glb"
          alt="Paul, the Oracle"
          camera-controls
          interaction-prompt="none"
          autoplay
          shadow-intensity="0"
          exposure="1.2"
          tone-mapping="aces"
          environment-image="neutral"
          camera-orbit="0deg 78deg 3.0m"
          field-of-view="30deg"
          min-camera-orbit="auto auto 2.0m"
          max-camera-orbit="auto auto 4.5m"
          disable-zoom
          style={{
            width: "100%",
            height: "100%",
            background: "transparent",
            "--poster-color": "transparent",
          }}
        />
      </div>

      {/* HUD — bottom scroll cue */}
      <div className="ph-scroll">
        <span className="ph-scroll-line" />
        <span className="ph-scroll-text">SCROLL TO ENTER</span>
        <span className="ph-arrow">↓</span>
      </div>
    </section>
  );
}


function Hero({ countdownTarget, state, oracleCopy }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-split">
        <div className="hero-type">
          <div className="hero-eyebrow eyebrow">
            <span className="dot" /> The Oracle · Live {oracleCopy === "aspirational" ? "*" : ""}
          </div>
          <h1 className="hero-h1">
            <span className="rainbow-under">PAUL PICKS.</span><br/>
            YOU PROFIT.
          </h1>
          <p className="lead">
            The only meme coin with a {oracleCopy === "aspirational"
              ? <em>Chainlink-verified*</em>
              : <em>Chainlink-verified</em>} oracle. 3/3 tax. 0% house edge.
            <b style={{color:"var(--t1)"}}> 104 matches. 39 days. 1 octopus.</b>
          </p>
          <div className="hero-cta-row">
            <button className="btn-3d is-soon" type="button" disabled aria-disabled="true">🐙 Follow Paul's Pick</button>
            <a className="btn-3d btn-ghost" href={WCI26_UNISWAP_URL} target="_blank" rel="noreferrer noopener">Buy $WCI26 on Uniswap ↗</a>
          </div>
        </div>
        <div className="hero-paul fishtank-mode">
          {/* === FISHTANK === */}
          <div className="tank">
            <div className="tank-glass" aria-hidden="true" />
            <div className="tank-water" aria-hidden="true">
              <span className="bubble b1" /><span className="bubble b2" />
              <span className="bubble b3" /><span className="bubble b4" />
              <span className="bubble b5" /><span className="bubble b6" />
              <span className="caustic" />
            </div>
            <div className="tank-frame" aria-hidden="true">
              <span className="tf-corner tl" /><span className="tf-corner tr" />
              <span className="tf-corner bl" /><span className="tf-corner br" />
              <span className="tf-rivet r1" /><span className="tf-rivet r2" />
              <span className="tf-rivet r3" /><span className="tf-rivet r4" />
            </div>
            <div className="tank-base" aria-hidden="true">
              <span className="tb-front" />
              <span className="tb-side" />
              <span className="tb-shadow" />
            </div>
            <div className="tank-light" aria-hidden="true">
              <span className="tl-fixture" />
              <span className="tl-beam" />
            </div>

            {/* halos behind paul, inside tank */}
            <div className="paul-halo" />
            <div className="paul-halo-2" />

            {/* big juggle balls floating inside the tank water */}
            <span className="juggle-ball jb-1" />
            <span className="juggle-ball jb-2" />
            <span className="juggle-ball jb-3" />

            {/* PAUL — much bigger, inside the tank */}
            <img className="paul-img" src="assets/paul_hero_USA.png" alt="Paul the shiba, kicking a soccer ball" />

            {/* glass reflection on top of everything */}
            <div className="tank-reflect" aria-hidden="true" />
          </div>

          {/* decorative props pushed outside the tank, lower */}
          <div className="hero-deco ticket"><BetTicket3D size={210} /></div>
          <div className="hero-deco coin"><Coin3D size={108} /></div>
          <div className="hero-deco whistle"><Whistle3D size={84} /></div>
          <div className="hero-deco ball-1"><Soccer3D size={92} tilt={-8} /></div>

          {/* confidence chip — top right */}
          <div className="paul-chip-conf">
            <span className="chip chip-gold">
              <span className="dot" style={{background:"#1a0e00", boxShadow:"none"}}/> 78% Confidence
            </span>
          </div>

          {/* Paul's Ledger streak card — bottom right */}
          <div className="hero-ledger">
            <div className="hl-label">Paul's Ledger · Live</div>
            <div className="hl-streak">
              <span className="hl-num">7</span>
              <span className="hl-sub">in a row</span>
            </div>
            <div className="hl-row">
              <span className="hl-w">W</span><span className="hl-w">W</span><span className="hl-w">W</span>
              <span className="hl-w">W</span><span className="hl-w">W</span><span className="hl-w">W</span>
              <span className="hl-w">W</span><span className="hl-l">L</span>
            </div>
          </div>
        </div>
      </div>
      <Countdown target={countdownTarget} state={state} />
    </section>
  );
}

/* ---------- Ticker ---------- */
const TICKER_ITEMS = [
  { ico: "🐋", text: (<>0x1A…e4F bet <b>42 WCI</b> on TUR · <span className="acc-gold">3m ago</span></>) },
  { ico: "🔥", text: (<>Paul hit <b>7 in a row</b> — <span className="acc-lime">82% ROI</span></>) },
  { ico: "💰", text: (<>0xA3F…0912 claimed <span className="acc-gold">$1,240</span></>) },
  { ico: "🐙", text: (<>New Cope Card minted: <b>"I had them at 2–0"</b></>) },
  { ico: "📈", text: (<>Total handle this weekend: <span className="acc-gold">$412,870</span></>) },
  { ico: "🇲🇽", text: (<>MEX fans up <span className="acc-lime">34%</span> vs last matchday</>) },
  { ico: "⚡", text: (<>Whale <b>0x88…eA12</b> staked <span className="acc-gold">20K WCI</span> on DRAW</>) },
  { ico: "🎯", text: (<>Paul's confidence ticked <span className="acc-coral">-4%</span> · USA vs TUR</>) },
];

function Ticker() {
  const items = [...TICKER_ITEMS, ...TICKER_ITEMS];
  return (
    <div className="ticker" data-screen-label="02 Ticker">
      <div className="ticker-track">
        {items.map((it, i) => (
          <React.Fragment key={i}>
            <span className="ticker-item">
              <span className="tick-ico">{it.ico}</span> {it.text}
            </span>
            <span className="tick-sep" />
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* ---------- Oracle Headline ---------- */
function OracleHeadline() {
  return (
    <section
      className="oracle-headline"
      aria-label="The Oracle is back"
      data-screen-label="03 The Oracle Is Back"
    >
      <h2 className="oh-h">
        <span className="oh-l1">THE</span>
        <span className="oh-l2">ORACLE</span>
        <span className="oh-l3">
          <span className="oh-is">IS</span>
          <span className="oh-dead">
            DEAD
            <svg className="oh-strike" viewBox="0 0 200 24" preserveAspectRatio="none" aria-hidden="true">
              <path d="M 4 18 Q 60 8 100 12 T 196 6"
                    stroke="#ff5b3d" strokeWidth="6" fill="none" strokeLinecap="round" />
            </svg>
          </span>
        </span>
        <span className="oh-l4">BACK.</span>
      </h2>
    </section>
  );
}

/* ---------- Oracle ---------- */
/* ---------- How To Buy · "Paul will guide you" ---------- */
const HTB_STEPS = [
  { n: "1", icon: "🦊", t: "Get a wallet",     d: "MetaMask, Rabby, Rainbow. Whatever. The tank doesn't judge." },
  { n: "2", icon: "≡",  t: "Bring some ETH",   d: "Bridge, Coinbase, friend who owes you twenty bucks." },
  { n: "3", icon: "↻",  t: "Swap for $WCI26",    d: "Open Uniswap, paste the contract, set 3% slippage." },
  { n: "4", icon: "🐙", t: "Hold. Bet. Cope.", d: "Follow Paul's pick. Stake. Mint Cope Card. Repeat." },
];

function HowToBuy() {
  return (
    <section id="how" className="how-to-buy" data-screen-label="03 How to Buy">
      <div className="htb-panel" aria-hidden="true" />
      <div className="htb-grid">
        <div className="htb-art">
          <span className="htb-bill htb-bill-1">$1</span>
          <span className="htb-bill htb-bill-10">$10</span>
          <span className="htb-bill htb-bill-100">$100</span>
          <img className="htb-img" src="assets/paul-buy.png" alt="Paul on the shiba's head, holding a fan of dollar bills" />
          <div className="htb-receipt" aria-hidden="true">
            <div className="htb-receipt-row">
              <span className="htb-r-k">TOTAL</span>
              <span className="htb-r-v">$10.00</span>
            </div>
            <div className="htb-receipt-row">
              <span className="htb-r-k">$WCI26</span>
              <span className="htb-r-v">= 12,500</span>
            </div>
            <div className="htb-receipt-row">
              <span className="htb-r-k">STATUS</span>
              <span className="htb-r-ok">CONFIRMED ✓</span>
            </div>
          </div>
        </div>

        <div className="htb-copy">
          <div className="htb-eyebrow">
            <span className="htb-eyebrow-dot" />
            How to buy · 90 seconds
          </div>
          <h2 className="h2 htb-h2">
            Paul will guide you<br/>
            <span className="htb-strike">whether you want him to or not.</span>
          </h2>
          <p className="htb-lead">Four taps. One swap. Welcome to the tank.</p>

          <div className="htb-steps">
            {HTB_STEPS.map((s, i) => (
              <div className="htb-step" key={i}>
                <div className="htb-step-num">{s.n}</div>
                <div className="htb-step-body">
                  <div className="htb-step-row">
                    <span className="htb-step-icon" aria-hidden="true">{s.icon}</span>
                    <span className="htb-step-title">{s.t}</span>
                  </div>
                  <p className="htb-step-text">{s.d}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="htb-ctas">
            <a className="htb-cta htb-cta-buy" href={WCI26_UNISWAP_URL} target="_blank" rel="noreferrer noopener"><span aria-hidden="true">🦄</span>Buy on Uniswap <span className="htb-arrow">↗</span></a>
            <button className="htb-cta htb-cta-chart" type="button"><span aria-hidden="true">📈</span>View Chart</button>
          </div>
          <div className="htb-foot">
            <span>No presale</span>
            <i className="htb-foot-dot" />
            <span>No team allocation</span>
            <i className="htb-foot-dot" />
            <span>Liquidity locked 180d</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Pari-Mutuel ---------- */
function PariMutuel() {
  const [pick, setPick] = useState("home");
  const [stake, setStake] = useState(250);
  // Seed pool (WCI)
  const pool = { home: 256000, draw: 58000, away: 98870 };
  const total = pool.home + pool.draw + pool.away;
  const pct = {
    home: (pool.home / total) * 100,
    draw: (pool.draw / total) * 100,
    away: (pool.away / total) * 100,
  };
  const newPool = { ...pool, [pick]: pool[pick] + stake };
  const newTotal = newPool.home + newPool.draw + newPool.away;
  const payout = stake > 0 ? ((newTotal / newPool[pick]) * stake) : 0;
  const profit = payout - stake;
  const names = { home: "USA", draw: "Draw", away: "TUR" };
  const labels = { home: "Home", draw: "Draw", away: "Away" };

  return (
    <section id="pool" className="section parimutuel" data-screen-label="05 Pari-Mutuel">
      <div className="pm-header">
        <span className="eyebrow">How the pool works</span>
        <h2 className="h2">Every bet goes in one pot.<br/>Winners split it. The house takes <span style={{color:"var(--lime)"}}>0%</span>.</h2>
      </div>
      <div className="pm-inner">
        <div className="pm-illo">
          <div className="paul-halo" />
          <div className="pm-jar-left" />
          <div className="pm-jar-right" />
          <img src="assets/chibi_pauls_pick_two_jars.png" alt="Paul with two jars of footballs" />
        </div>
        <div className="pm-demo">
          <div className="card" style={{padding:28, display:"grid", gap:20}}>
            <div className="pm-pool-size">
              <span>Pool · live</span>
              <b className="mono">{total.toLocaleString()} <span style={{fontSize:12, color:"var(--t3)"}}>$WCI26</span></b>
            </div>

            {/* Bar variant (default) */}
            <div className="pm-bar">
              <div className="pm-seg home" style={{flex: pct.home}}>{pct.home.toFixed(0)}%</div>
              <div className="pm-seg draw" style={{flex: pct.draw}}>{pct.draw.toFixed(0)}%</div>
              <div className="pm-seg away" style={{flex: pct.away}}>{pct.away.toFixed(0)}%</div>
            </div>

            {/* Jars variant */}
            <div className="pm-jars">
              {["home","draw","away"].map(team => (
                <div className="pm-jar" key={team} data-team={team}>
                  <div className="pm-jar-fill" style={{height: `${pct[team]}%`}} />
                  <div className="pm-jar-label">{names[team].toUpperCase()} · {pct[team].toFixed(0)}%</div>
                </div>
              ))}
            </div>

            {/* Scales variant */}
            <div className="pm-scales">
              {["home","draw","away"].map(team => (
                <div className="pm-scale" key={team} data-team={team}>
                  <div className="pm-scale-bar">
                    <div className="pm-scale-fill" style={{height: `${pct[team]}%`}} />
                  </div>
                  <div className="pm-scale-base" />
                  <div className="pm-scale-pct mono">{pct[team].toFixed(0)}%</div>
                  <div className="pm-scale-team">{names[team]}</div>
                </div>
              ))}
            </div>

            <div className="pm-outcomes">
              {["home","draw","away"].map(p => (
                <button
                  key={p}
                  className={`btn-outcome ${pick === p ? "active" : ""}`}
                  data-pick={p}
                  onClick={() => setPick(p)}
                >
                  <span className="ot-label mono">{labels[p]}</span>
                  <span className="ot-name">{names[p]}</span>
                  <span className="ot-odds mono">×{(newTotal / newPool[p]).toFixed(2)}</span>
                </button>
              ))}
            </div>

            <div className="pm-stake-row">
              <div>
                <div className="pm-stake-label">Your stake</div>
                <div className="pm-stake-val mono">{stake.toLocaleString()} <span style={{fontSize:14, color:"var(--t3)"}}>$WCI26</span></div>
                <input
                  type="range"
                  className="pm-slider"
                  min={10}
                  max={10000}
                  step={10}
                  value={stake}
                  onChange={e => setStake(+e.target.value)}
                />
              </div>
              <div className="pm-payout">
                <div className="pm-payout-label">If Paul's right</div>
                <div className="pm-payout-val mono">{payout.toFixed(0)}</div>
                <div className="pm-payout-sub mono">
                  +{profit.toFixed(0)} profit · {((profit/stake)*100).toFixed(0)}% ROI
                </div>
              </div>
            </div>

            <div className="pm-trust">
              <span className="chip chip-lime">0% House Edge</span>
              <span className="chip">Settled on-chain</span>
              <span className="chip">Chainlink · pari-mutuel</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
/* ---------- Host Nations Squad ---------- */
function HostNations() {
  const matches = [
    { id: "usa", flag: "🇺🇸", name: "USA",    away: "MEX", awayFlag: "🇲🇽", pool: "128K", picks: "14",  odds: "×2.4", conf: 78, paulpick: true,  status: "live" },
    { id: "mex", flag: "🇲🇽", name: "Mexico", away: "CAN", awayFlag: "🇨🇦", pool: "96K",  picks: "11",  odds: "×3.1", conf: 56, status: "today" },
    { id: "can", flag: "🇨🇦", name: "Canada", away: "ENG", awayFlag: "🏴", pool: "42K",  picks: "6",   odds: "×5.8", conf: 28, status: "tmrw" },
    { id: "global", flag: "🌍", name: "Global Pool", away: "ALL", awayFlag: "★", pool: "412K", picks: "104", odds: "ALL",  conf: 92, status: "open" },
  ];
  return (
    <section id="bets" className="squad" data-screen-label="05 Betting Desk">
      <div className="squad-inner">
        <div className="squad-art">
          <div className="pitch-rings" />
          <div className="pitch-rings inner" />
          <div className="spotlight" />
          <img className="squad-img" src="assets/squad_betting_table.png" alt="Paul with moose, eagle, and jaguar mascots at betting table" />
          <div className="squad-flag-chip squad-chip-usa">
            <span className="stripe" /><span className="flag">🇺🇸</span> USA · <span style={{color:"var(--lime)"}}>+34%</span>
          </div>
          <div className="squad-flag-chip squad-chip-mex">
            <span className="stripe" /><span className="flag">🇲🇽</span> MEX · <span style={{color:"var(--lime)"}}>LIVE</span> <span className="dot-pulse"/>
          </div>
          <div className="squad-flag-chip squad-chip-can">
            <span className="stripe" /><span className="flag">🇨🇦</span> CAN · <span style={{color:"var(--gold)"}}>T-51d</span>
          </div>
          {/* extra floating odds chips for that "betting dashboard" feel */}
          <div className="bet-float-chip bet-float-odds">
            <span className="bfc-k">×2.4</span><span className="bfc-v">USA WIN</span>
          </div>
          <div className="bet-float-chip bet-float-conf">
            <span className="bfc-k" style={{color:"var(--gold)"}}>78%</span><span className="bfc-v">CONFIDENCE</span>
          </div>
        </div>
        <div className="squad-right">
          <div className="eyebrow">
            <span className="dot-pulse" style={{display:"inline-block",marginRight:8}} />
            Paul's Betting Desk · LIVE
          </div>
          <h2 className="h2">Don't think.<br/><span className="rainbow-under">Follow the octopus.</span></h2>

          <blockquote className="bet-quote">
            <span className="bq-mark" aria-hidden="true">“</span>
            Do not bet against the Octopus on a Tuesday.<br/>
            <em>I do not know why. I just know.</em>
            <span className="bq-attr">— Paul, probably</span>
          </blockquote>

          {/* track-record stats */}
          <div className="bet-stats">
            <div className="bs-cell">
              <div className="bs-v">8<span className="bs-vsm">/8</span></div>
              <div className="bs-k">picks · 2010</div>
            </div>
            <div className="bs-divider" />
            <div className="bs-cell">
              <div className="bs-v">3.4<span className="bs-vsm">×</span></div>
              <div className="bs-k">avg odds</div>
            </div>
            <div className="bs-divider" />
            <div className="bs-cell">
              <div className="bs-v" style={{color:"var(--lime)"}}>+212<span className="bs-vsm">%</span></div>
              <div className="bs-k">paper ROI</div>
            </div>
          </div>

          {/* match / bet cards */}
          <div className="nation-cards">
            {matches.map(m => (
              <button className={`nation-card ${m.paulpick ? "is-pauls-pick" : ""}`} key={m.id} data-n={m.id}>
                {m.paulpick && <span className="nc-paul-tag">🐙 PAUL'S PICK</span>}
                {m.status === "live" && <span className="nc-status nc-status-live"><i/>LIVE</span>}
                {m.status === "today" && <span className="nc-status nc-status-today">TODAY · 18:00</span>}
                {m.status === "tmrw"  && <span className="nc-status nc-status-tmrw">TMRW · 21:00</span>}
                {m.status === "open"  && <span className="nc-status nc-status-open">OPEN POOL</span>}

                <div className="nc-match">
                  <span className="nc-team">
                    <span className="nation-flag">{m.flag}</span>
                    <span className="nc-team-name">{m.name}</span>
                  </span>
                  <span className="nc-vs">vs</span>
                  <span className="nc-team nc-away">
                    <span className="nation-flag">{m.awayFlag}</span>
                    <span className="nc-team-name">{m.away}</span>
                  </span>
                </div>

                <div className="nc-conf-row">
                  <div className="nc-conf-bar"><div className="nc-conf-fill" style={{width: `${m.conf}%`}} /></div>
                  <span className="nc-conf-pct">{m.conf}%</span>
                </div>

                <div className="nc-meta">
                  <span><span className="m-val">{m.picks}</span> picks</span>
                  <span><span className="m-val">{m.pool}</span> pool</span>
                  <span className="nc-odds">{m.odds}</span>
                </div>

                <span className="nc-bet-cta">Tap to bet <span aria-hidden="true">→</span></span>
              </button>
            ))}
          </div>

          <div className="squad-cta-row">
            <button className="btn-3d is-soon" type="button" disabled aria-disabled="true">🎯 Place Your Bet</button>
            <button className="btn-3d btn-ghost is-soon" type="button" disabled aria-disabled="true">📊 View All Picks ↗</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Scroll Tentacles — animated SVG following scroll ---------- */
function ScrollTentacles() {
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setScrollY(window.scrollY));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);

  // Wave phase from scroll
  const phase = scrollY * 0.004;
  const sway = (i) => Math.sin(phase + i * 1.3) * 40;
  const swayY = (i) => Math.cos(phase + i * 0.9) * 24;

  // Build a wavy tentacle path with suckers
  const tentacle = (originX, originY, length, sideX, sideY, hue, taper) => {
    const segs = 18;
    const pts = [];
    for (let i = 0; i <= segs; i++) {
      const t = i / segs;
      const baseX = originX + sideX * t * length;
      const baseY = originY + sideY * t * length;
      const wob = Math.sin(phase * 1.4 + i * 0.8) * 30 * t;
      const wob2 = Math.cos(phase * 1.1 + i * 0.6) * 20 * t;
      pts.push([baseX + wob, baseY + wob2]);
    }
    let d = `M ${pts[0][0]} ${pts[0][1]}`;
    for (let i = 1; i < pts.length; i++) {
      const [px, py] = pts[i - 1], [cx, cy] = pts[i];
      d += ` Q ${(px+cx)/2 + Math.sin(phase+i)*8} ${(py+cy)/2 + Math.cos(phase+i)*8} ${cx} ${cy}`;
    }
    return { d, pts, taper };
  };

  const W = typeof window !== "undefined" ? window.innerWidth : 1440;
  const H = typeof window !== "undefined" ? window.innerHeight : 900;

  const t1 = tentacle(-40, H * 0.35 + swayY(0), 320, 1, 0.4, 0, 14);
  const t2 = tentacle(W + 40, H * 0.55 + swayY(1), 360, -1, -0.3, 1, 16);
  const t3 = tentacle(-30, H * 0.78 + swayY(2), 280, 1, -0.2, 2, 12);
  const t4 = tentacle(W + 20, H * 0.18 + swayY(3), 240, -1, 0.5, 3, 10);

  const TentaclePath = ({ data, idx }) => {
    const { d, pts, taper } = data;
    return (
      <g>
        <path d={d} stroke={`url(#tent-grad-${idx})`} strokeWidth={taper} fill="none"
              strokeLinecap="round" opacity="0.92"
              filter="url(#tent-glow)" />
        <path d={d} stroke="rgba(255,255,255,0.18)" strokeWidth={Math.max(2, taper*0.35)}
              fill="none" strokeLinecap="round"
              transform={`translate(0 -${taper*0.25})`} />
        {pts.filter((_, i) => i % 2 === 0 && i > 1).map((p, i) => (
          <circle key={i} cx={p[0]} cy={p[1] + taper*0.35}
                  r={Math.max(1.2, taper * 0.12 - i * 0.18)}
                  fill="rgba(255,200,230,0.55)" />
        ))}
      </g>
    );
  };

  return (
    <div className="scroll-tentacles" aria-hidden="true">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          {[0,1,2,3].map(i => (
            <linearGradient key={i} id={`tent-grad-${i}`} x1="0" x2="1">
              <stop offset="0%"  stopColor="#5e2ba8" stopOpacity="0.0"/>
              <stop offset="20%" stopColor="#7d3ec9" stopOpacity="0.95"/>
              <stop offset="60%" stopColor="#a05fe6" stopOpacity="1"/>
              <stop offset="100%" stopColor="#c082ff" stopOpacity="0.6"/>
            </linearGradient>
          ))}
          <filter id="tent-glow">
            <feGaussianBlur stdDeviation="3" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>
        <TentaclePath data={t1} idx={0} />
        <TentaclePath data={t2} idx={1} />
        <TentaclePath data={t3} idx={2} />
        <TentaclePath data={t4} idx={3} />
      </svg>
    </div>
  );
}

/* ---------- Tokenomics — "painfully boring" ---------- */
const WCI26_CONTRACT = "0x80171b59e47EB9c385af40b09Cc345d79Ea40Ba8";
const WCI26_CONTRACT_SHORT = WCI26_CONTRACT.slice(0, 6) + "…" + WCI26_CONTRACT.slice(-4);
const WCI26_UNISWAP_URL = `https://app.uniswap.org/#/swap?outputCurrency=${WCI26_CONTRACT}&use=V2`;
const WCI26_ETHERSCAN_URL = `https://etherscan.io/token/${WCI26_CONTRACT}`;

function Tokenomics() {
  const [copied, setCopied] = useState(false);
  const onCopy = () => {
    try { navigator.clipboard.writeText(WCI26_CONTRACT); } catch (e) {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  return (
    <section id="tokenomics" className="tokenomics" data-screen-label="07 Tokenomics">
      <div className="tk-panel" aria-hidden="true" />
      <div className="tk-grid">
        <div className="tk-copy">
          <div className="tk-eyebrow">
            <span className="tk-eyebrow-dot" />
            Tokenomics · Read-only
          </div>
          <h2 className="h2 tk-h2">
            The contract is<br/>
            <span className="tk-italic-gold">painfully boring.</span>
          </h2>
          <p className="tk-lead">
            Three numbers. One supply. Zero allocation for octopus-shaped VCs.
          </p>
          <p className="tk-comment">
            <span className="tk-comment-arrow">↳</span> boring on purpose. built different anyway.
          </p>
          <div className="tk-contract-bar">
            <span className="tk-contract-label">Contract</span>
            <code className="tk-contract-addr" title={WCI26_CONTRACT}>{WCI26_CONTRACT_SHORT}</code>
            <button className="tk-contract-copy" onClick={onCopy} type="button">
              {copied ? "Copied!" : "Copy"}
            </button>
            <a className="tk-contract-scan" href={WCI26_ETHERSCAN_URL} target="_blank" rel="noreferrer noopener">
              Etherscan <span aria-hidden="true">↗</span>
            </a>
          </div>
        </div>

        <div className="tk-art">
          <span className="tk-tag tk-tag-tax">TAX · 3/3</span>
          <img className="tk-art-img" src="assets/tokens.png" alt="The squad standing on a stack of $WCI26 coins" />
          <span className="tk-tag tk-tag-lp">LP LOCKED · 1 YEAR</span>
          <span className="tk-tag tk-tag-vc">VCs · 0%</span>
        </div>
      </div>
    </section>
  );
}
function FinalCTA() {
  return (
    <section className="final-cta" data-screen-label="06 Final CTA">
      {/* selfie sits outside .final-cta-inner so it pins to the bottom-right of the
          section (and therefore the bottom of the page), not to the centered content column */}
      <img className="final-cta-selfie" src="assets/paul-selfie.png" alt="The squad's selfie — Paul, shiba, eagle, jaguar and moose mugging for the camera" />
      <div className="final-cta-inner">
        <div className="final-cta-copy">
          <div className="eyebrow" style={{marginBottom:18}}>Jun 11 · Mexico City</div>
          <h2>
            SEE YOU IN<br/>
            <span className="rainbow-under" style={{position:"relative", display:"inline-block"}}>MEXICO CITY.</span>
          </h2>
          <p className="lead">The first pick. The first confession. The first Cope Card.</p>
          <div className="final-cta-row">
            <a className="btn-3d" href={WCI26_UNISWAP_URL} target="_blank" rel="noreferrer noopener">🐙 Buy $WCI26</a>
            <button className="btn-3d btn-ghost is-soon" type="button" disabled aria-disabled="true">→ Go to Dashboard</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Peek Tentacle ---------- */
/* ---------- Section Divider ---------- */
function SectionDivider() {
  return (
    <div className="section-divider" aria-hidden="true">
      <span className="sd-halo" />
      <span className="sd-line sd-line-l" />
      <span className="sd-glyph" />
      <span className="sd-line sd-line-r" />
    </div>
  );
}

function PeekTentacle() {
  const [show, setShow] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const scrolledRef = useRef(false);
  useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 200) scrolledRef.current = true;
    };
    window.addEventListener("scroll", onScroll);
    const t = setTimeout(() => {
      if (!scrolledRef.current && !dismissed) setShow(true);
    }, 30000);
    return () => { clearTimeout(t); window.removeEventListener("scroll", onScroll); };
  }, [dismissed]);
  if (dismissed) return null;
  return (
    <div className={`peek-tentacle ${show ? "show" : ""}`}>
      <div className="tent-body">
        <p>You gonna fade the streak?</p>
        <div className="tent-actions">
          <button className="btn-3d">Place Pick →</button>
          <button className="tent-dismiss" onClick={() => { setShow(false); setDismissed(true); }}>dismiss</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Tweaks Panel ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "state": "between",
  "hero": "split",
  "pm": "bar",
  "temp": "default",
  "countdownTarget": "2026-06-11T18:00:00-06:00",
  "oracleCopy": "aspirational"
}/*EDITMODE-END*/;

function TweaksPanel({ edits, setEdits }) {
  const [editMode, setEditMode] = useState(false);
  const [open, setOpen] = useState(true);

  useEffect(() => {
    const onMsg = (e) => {
      const t = e.data && e.data.type;
      if (t === "__activate_edit_mode") { setEditMode(true); setOpen(true); }
      if (t === "__deactivate_edit_mode") { setEditMode(false); setOpen(false); }
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const set = (k, v) => {
    const next = { ...edits, [k]: v };
    setEdits(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  if (!editMode) return null;

  const Opt = ({ k, v, label }) => (
    <button className={edits[k] === v ? "active" : ""} onClick={() => set(k, v)}>{label}</button>
  );

  return (
    <>
      {!open && (
        <button className="tweaks-toggle" onClick={() => setOpen(true)}>
          🐙 Tweaks
        </button>
      )}
      <div className={`tweaks ${open ? "open" : ""}`}>
        <h3>
          Tweaks
          <button onClick={() => setOpen(false)}>✕</button>
        </h3>

        <div className="tweak-group">
          <div className="tweak-label">App State</div>
          <div className="tweak-opts">
            <Opt k="state" v="prelaunch"     label="Pre-launch" />
            <Opt k="state" v="between"       label="Between" />
            <Opt k="state" v="live"          label="Live" />
            <Opt k="state" v="oracle-offline" label="Oracle off" />
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Hero layout</div>
          <div className="tweak-opts">
            <Opt k="hero" v="split"    label="Split" />
            <Opt k="hero" v="centered" label="Centered" />
            <Opt k="hero" v="stacked"  label="Stacked" />
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Pari-mutuel visual</div>
          <div className="tweak-opts">
            <Opt k="pm" v="bar"    label="Bar chart" />
            <Opt k="pm" v="jars"   label="Two jars" />
            <Opt k="pm" v="scales" label="Split scales" />
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Color temperature</div>
          <div className="tweak-opts">
            <Opt k="temp" v="default" label="Balanced" />
            <Opt k="temp" v="deep"    label="Deep purple" />
            <Opt k="temp" v="rainbow" label="FIFA rainbow" />
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Oracle copy</div>
          <div className="tweak-opts">
            <Opt k="oracleCopy" v="live"         label="Oracle Live" />
            <Opt k="oracleCopy" v="aspirational" label="Gate B pending" />
          </div>
        </div>

        <div className="tweak-group">
          <div className="tweak-label">Countdown target</div>
          <div className="tweak-opts" style={{flexDirection:"column", alignItems:"stretch"}}>
            <button
              className={edits.countdownTarget === "2026-06-11T18:00:00-06:00" ? "active" : ""}
              onClick={() => set("countdownTarget", "2026-06-11T18:00:00-06:00")}
            >Real kickoff · Jun 11 2026</button>
            <button
              className={edits.countdownTarget.startsWith("fake:") ? "active" : ""}
              onClick={() => {
                const t = new Date(Date.now() + 2 * 86400000 + 5 * 3600000).toISOString();
                set("countdownTarget", "fake:" + t);
              }}
            >Demo · T-2d 5h</button>
          </div>
          <input
            className="tweak-input"
            style={{marginTop:8}}
            value={edits.countdownTarget}
            onChange={e => set("countdownTarget", e.target.value)}
          />
        </div>
      </div>
    </>
  );
}


/* =========================================================
   STADIUM JUMBOTRON — promo video as massive scoreboard
   ========================================================= */
function StadiumJumbotron() {
  const videoRef = useRef(null);
  const [muted, setMuted] = useState(true);
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.play().catch(() => {});
  }, []);

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const pad = (n) => String(n).padStart(2, "0");
  const liveTs = `${pad(now.getUTCHours())}:${pad(now.getUTCMinutes())}:${pad(now.getUTCSeconds())} UTC`;

  const toggleMute = () => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  };

  return (
    <section id="jumbotron" className="jumbotron" data-screen-label="03 Stadium Jumbotron">
      <div className="jumbo-header">
        <div className="eyebrow">⚡ ESTADIO AZTECA · MEXICO CITY · MATCHDAY 1</div>
        <h2 className="h2" style={{marginTop:18}}>Live from the tank.</h2>
        <p className="lead" style={{margin:"22px auto 0"}}>
          90,000 seats. One octopus. The biggest screen in football is showing exactly one thing.
        </p>
      </div>

      <div className="jumbo-frame">
        <span className="jumbo-bolt-bl" />
        <span className="jumbo-bolt-br" />

        <div className="jumbo-led jumbo-led-left">$WCI26 · $WCI26 · $WCI26 · PAUL · $WCI26 · ORACLE · $WCI26</div>

        <div className="jumbo-screen">
          <video
            ref={videoRef}
            src="assets/promo.mp4"
            poster="uploads/PHead Web-63193eff.png"
            autoPlay
            loop
            muted={muted}
            playsInline
            preload="auto"
          />

          {/* broadcast-style LIVE ribbon across the top of the screen */}
          <div className="jumbo-live-bar" aria-hidden="true">
            <span className="jlb-pill"><span className="jlb-dot" /> LIVE</span>
            <span className="jlb-marquee">
              <span className="jlb-track">
                <span className="jlb-item">$WCI26 · ORACLE FEED · THE INK IS WET 🐙</span>
                <span className="jlb-item">PAUL'S CALL · USA 2 — TUR 1 · 78% CONFIDENCE</span>
                <span className="jlb-item">DEGENS WATCHING · 412,870 · HUFFING HOPIUM</span>
                <span className="jlb-item">VEGAS LEFT THE CHAT · STREAK 7W</span>
                <span className="jlb-item">$WCI26 · ORACLE FEED · THE INK IS WET 🐙</span>
                <span className="jlb-item">PAUL'S CALL · USA 2 — TUR 1 · 78% CONFIDENCE</span>
                <span className="jlb-item">DEGENS WATCHING · 412,870 · HUFFING HOPIUM</span>
                <span className="jlb-item">VEGAS LEFT THE CHAT · STREAK 7W</span>
              </span>
            </span>
            <span className="jlb-clock">{liveTs}</span>
          </div>

          <div className="jumbo-chrome jumbo-chrome-tr">CH · 26 · WCI</div>

          <div className="jumbo-chrome jumbo-chrome-bl">
            <div className="jumbo-score-box">
              <span className="jumbo-flag">🇺🇸</span>
              <span className="jumbo-team">USA</span>
              <span className="jumbo-num">2</span>
            </div>
            <div className="jumbo-score-box">
              <span className="jumbo-num">1</span>
              <span className="jumbo-team">TUR</span>
              <span className="jumbo-flag">🇹🇷</span>
            </div>
          </div>
          <div className="jumbo-chrome jumbo-chrome-br">PAUL'S CALL · 78%</div>

          <button
            onClick={toggleMute}
            style={{
              position:"absolute", bottom:60, right:18, zIndex:6,
              background:"rgba(0,0,0,0.7)", border:"1px solid rgba(245,208,32,0.4)",
              borderRadius:8, padding:"6px 12px", color:"var(--gold)",
              fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em",
              cursor:"pointer", pointerEvents:"auto", textTransform:"uppercase"
            }}
            aria-label={muted ? "Unmute" : "Mute"}
          >
            {muted ? "🔇 UNMUTE" : "🔊 MUTE"}
          </button>
        </div>
      </div>

      <div className="jumbo-statbar-wrap">
        <div className="jumbo-statbar">
          {[
            { lbl: "Ink Spilled",   val: "8.2 GAL",    quip: "all over the chart",  tone: "lime" },
            { lbl: "Rugs Dodged",   val: "47",          quip: "since Paul launched", tone: "magenta" },
            { lbl: "Paul's BAC",    val: "0.18",        quip: "that's why he picks", tone: "coral" },
            { lbl: "Vibes",          val: "IMMACULATE", quip: "100 / 100",            tone: "gold" },
          ].map((s, i) => (
            <div key={i} className={`jumbo-stat tone-${s.tone}`}>
              <span className="js-screw tl" />
              <span className="js-screw tr" />
              <span className="js-screw bl" />
              <span className="js-screw br" />
              <span className="js-led" />
              <div className="js-screen">
                <div className="js-scan" aria-hidden="true" />
                <div className="lbl">{s.lbl}</div>
                <div className="val">{s.val}</div>
                <div className="quip">{s.quip}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

    </section>
  );
}

/* =========================================================
   ORACLE DATA FEED — terminal-style live readout
   ========================================================= */
const FEED_TEMPLATES = [
  { tag: "info", txt: '<span class="hex">0x4Ae…91f2</span> opened position · <span class="num">{n} $WCI26</span> on <span class="num">USA</span>' },
  { tag: "ok",   txt: 'Chainlink feed sync · block <span class="num">#{b}</span> · ok' },
  { tag: "bet",  txt: '<span class="hex">0x9c…d041</span> matched · <span class="num">{n} $WCI26</span> ↗ DRAW' },
  { tag: "warn", txt: 'mempool spike · gas <span class="num">{g} gwei</span>' },
  { tag: "info", txt: 'Paul confidence ↑ <span class="num">{c}%</span> · vector recompiled' },
  { tag: "ok",   txt: 'pool settled · <span class="num">{n} $WCI26</span> distributed to <span class="num">{w} winners</span>' },
  { tag: "err",  txt: '<span class="hex">0xff…0001</span> bet rejected · oracle latency' },
  { tag: "bet",  txt: '🐋 whale alert · <span class="hex">0x12…ab</span> · <span class="num">{n} $WCI26</span> on TUR' },
  { tag: "info", txt: 'Cope Card minted · <span class="num">#{m}</span> · rarity: <span class="num">EPIC</span>' },
  { tag: "ok",   txt: 'multisig signature 3/5 · treasury tick' },
];
const TAG_LABELS = { info:"INFO", ok:"OK", warn:"WARN", err:"ERR", bet:"BET" };

function OracleDataFeed() {
  const [lines, setLines] = useState([]);
  const idRef = useRef(0);

  useEffect(() => {
    const tick = () => {
      const tpl = FEED_TEMPLATES[Math.floor(Math.random() * FEED_TEMPLATES.length)];
      const now = new Date();
      const t = now.toTimeString().slice(0,8);
      const txt = tpl.txt
        .replace("{n}", (Math.random()*900+50).toFixed(0))
        .replace("{b}", (19_840_000 + Math.floor(Math.random()*50)).toLocaleString())
        .replace("{g}", (12 + Math.random()*30).toFixed(1))
        .replace("{c}", (60 + Math.random()*30).toFixed(1))
        .replace("{w}", Math.floor(Math.random()*200+10))
        .replace("{m}", Math.floor(Math.random()*9999));
      setLines(prev => {
        const next = [{ id: idRef.current++, time: t, tag: tpl.tag, txt }, ...prev];
        return next.slice(0, 16);
      });
    };
    tick(); tick(); tick();
    const iv = setInterval(tick, 1100);
    return () => clearInterval(iv);
  }, []);

  // Animated gauge
  const [gauge, setGauge] = useState(78);
  useEffect(() => {
    const iv = setInterval(() => {
      setGauge(g => {
        const next = g + (Math.random() - 0.5) * 6;
        return Math.max(55, Math.min(94, next));
      });
    }, 1400);
    return () => clearInterval(iv);
  }, []);

  // Gauge arc geometry
  const radius = 110;
  const cx = 150, cy = 140;
  const startA = Math.PI * 0.85; // ~153deg
  const endA   = Math.PI * 0.15; // ~27deg (going clockwise)
  const arcSweep = (Math.PI * 2 - (startA - endA));
  const valA = startA - (gauge / 100) * arcSweep;
  const valX = cx + radius * Math.cos(valA);
  const valY = cy + radius * Math.sin(valA);
  const startX = cx + radius * Math.cos(startA);
  const startY = cy + radius * Math.sin(startA);

  return (
    <section id="oracle-feed" className="oracle-feed" data-screen-label="07 Oracle Feed">
      <div className="cmd-header">
        <div className="eyebrow">🔗 CHAINLINK · BLOCK FEED · LIVE</div>
        {/* === Dramatic dead/back headline — 3 rows === */}
        <h2 className="oh-h" style={{marginTop:24}}>
          <span className="oh-r1">THE ORACLE</span>
          <span className="oh-r2">
            <span className="oh-is">IS</span>
            <span className="oh-dead">
              DEAD
              <svg className="oh-strike" viewBox="0 0 200 24" preserveAspectRatio="none" aria-hidden="true">
                <path d="M 4 18 Q 60 8 100 12 T 196 6"
                      stroke="#ff5b3d" strokeWidth="6" fill="none" strokeLinecap="round" />
              </svg>
            </span>
          </span>
          <span className="oh-r3">BACK.</span>
        </h2>

        <p className="lead oh-sub">
          Paul died <b>October 2010</b>. <em className="oh-acc-gold">8 of 8 perfect.</em><br />
          Ethereum revived him. <b>Mussels?</b> Nah. Now he runs on gas.
        </p>

        <div className="oh-chips" role="list" aria-label="Tags">
          <span className="chip oh-chip" role="listitem">such oracle.</span>
          <span className="chip oh-chip" role="listitem">very comeback.</span>
          <span className="chip oh-chip" role="listitem">wow ledger.</span>
        </div>
      </div>

      <div className="tank-wrap">
        {/* The fish tank — Paul fills it edge to edge */}
        <div className="fishtank">
          {/* Back wall: deep gradient + grid */}
          <div className="tank-backwall" />

          {/* Water volume */}
          <div className="tank-water">
            <div className="tank-caustics" />
            <div className="tank-caustics tank-caustics-2" />
            {/* Bubbles */}
            {Array.from({length: 28}).map((_, i) => (
              <span key={i} className="tank-bubble" style={{
                left: `${(i * 3.6) % 96 + 1}%`,
                width: `${3 + (i % 6) * 2}px`,
                height: `${3 + (i % 6) * 2}px`,
                animationDelay: `${(i * 0.43) % 9}s`,
                animationDuration: `${6 + (i % 5) * 1.6}s`,
              }} />
            ))}
            {/* Floating particles */}
            {Array.from({length: 18}).map((_, i) => (
              <span key={`p${i}`} className="tank-particle" style={{
                left: `${(i * 5.7) % 98}%`,
                top: `${(i * 7.3) % 96}%`,
                animationDelay: `${(i * 0.6) % 12}s`,
                animationDuration: `${14 + (i % 6) * 3}s`,
              }} />
            ))}
            {/* Volumetric god rays */}
            <div className="tank-rays" />
          </div>

          {/* Paul — fills the tank edge to edge, top to bottom */}
          <div className="tank-paul">
            <img src="uploads/PHead Web-63193eff.png" alt="Paul, the Oracle" />
          </div>

          {/* Front glass: meniscus, rim, highlights, smudges */}
          <div className="tank-glass-front">
            <div className="tank-meniscus" />
            <div className="tank-rim-top" />
            <div className="tank-rim-bottom" />
            <div className="tank-shine tank-shine-1" />
            <div className="tank-shine tank-shine-2" />
            <div className="tank-edge tank-edge-l" />
            <div className="tank-edge tank-edge-r" />
            <div className="tank-corner tank-corner-tl" />
            <div className="tank-corner tank-corner-tr" />
            <div className="tank-corner tank-corner-bl" />
            <div className="tank-corner tank-corner-br" />
          </div>

          {/* Lab HUD — corner readouts */}
          <div className="tank-hud tank-hud-tl">
            <span className="hk">SPECIMEN</span>
            <span className="hv">PAUL.v8 · ORACLE</span>
            <span className="hk" style={{marginTop:8}}>STATUS</span>
            <span className="hv hv-ok">●&nbsp;BROADCASTING</span>
          </div>

          <div className="tank-hud tank-hud-tr">
            <span className="hk">CONFIDENCE</span>
            <span className="hv hv-num">{gauge.toFixed(1)}%</span>
            <span className="hk" style={{marginTop:8}}>SIGNAL</span>
            <div className="hv hv-bars">
              <span /><span /><span /><span /><span />
            </div>
          </div>

          <div className="tank-hud tank-hud-bl">
            <span className="hk">PH&nbsp;·&nbsp;TEMP&nbsp;·&nbsp;O₂</span>
            <span className="hv">7.3 · 24.8°C · 96%</span>
          </div>

          <div className="tank-hud tank-hud-br">
            <span className="hk">UPTIME</span>
            <span className="hv">214d 06:42:18</span>
          </div>

          {/* Targeting reticle */}
          <svg className="tank-target" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
            <circle cx="200" cy="200" r="120" fill="none" stroke="var(--gold)" strokeWidth="1" strokeDasharray="4 8" opacity="0.45" />
            <circle cx="200" cy="200" r="170" fill="none" stroke="var(--gold)" strokeWidth="0.5" opacity="0.3" />
            <line x1="200" y1="40" x2="200" y2="80" stroke="var(--gold)" strokeWidth="1" opacity="0.55" />
            <line x1="200" y1="320" x2="200" y2="360" stroke="var(--gold)" strokeWidth="1" opacity="0.55" />
            <line x1="40" y1="200" x2="80" y2="200" stroke="var(--gold)" strokeWidth="1" opacity="0.55" />
            <line x1="320" y1="200" x2="360" y2="200" stroke="var(--gold)" strokeWidth="1" opacity="0.55" />
          </svg>

          {/* Scan line */}
          <div className="tank-scanline" />

          {/* Stat tape across the bottom */}
          <div className="tank-tape">
            <div className="tape-track">
              {Array.from({length: 3}).map((_, k) => (
                <div className="tape-row" key={k}>
                  <span><b>{gauge.toFixed(1)}%</b> CONFIDENCE</span>
                  <span>HIT RATE <b>87.5%</b></span>
                  <span>STREAK <b>7</b></span>
                  <span>ROI <b>+212%</b></span>
                  <span>BLOCK <b>#19,847,221</b></span>
                  <span>TPS <b>14.8</b></span>
                  <span>GAS <b>22.4 GWEI</b></span>
                  <span>LATENCY <b>412MS</b></span>
                  <span>PEERS <b>128</b></span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PROBABILITY BRACKET — interactive tree
   ========================================================= */
const BRACKET_TEAMS = [
  { id:"USA", flag:"🇺🇸", x: 60,  y: 40,  pct: 78, paul:"Hat for the home team. The Eagle rises." },
  { id:"MEX", flag:"🇲🇽", x: 60,  y: 110, pct: 64, paul:"Aztec home advantage. 90k voices." },
  { id:"BRA", flag:"🇧🇷", x: 60,  y: 180, pct: 71, paul:"Samba. Always samba." },
  { id:"ARG", flag:"🇦🇷", x: 60,  y: 250, pct: 68, paul:"Defending champion energy." },
  { id:"FRA", flag:"🇫🇷", x: 60,  y: 320, pct: 62, paul:"Mbappé moves in mysterious ways." },
  { id:"GER", flag:"🇩🇪", x: 60,  y: 390, pct: 54, paul:"Group of death. Tank says yes." },
  { id:"ESP", flag:"🇪🇸", x: 60,  y: 460, pct: 59, paul:"Tiki-taka renaissance." },

  // QF
  { id:"USA-q", flag:"🇺🇸", label:"USA", x: 280, y: 75,  pct: 71 },
  { id:"BRA-q", flag:"🇧🇷", label:"BRA", x: 280, y: 215, pct: 66 },
  { id:"FRA-q", flag:"🇫🇷", label:"FRA", x: 280, y: 355, pct: 58 },
  { id:"ESP-q", flag:"🇪🇸", label:"ESP", x: 280, y: 460, pct: 51 },

  // SF
  { id:"BRA-s", flag:"🇧🇷", label:"BRA", x: 500, y: 145, pct: 59 },
  { id:"ESP-s", flag:"🇪🇸", label:"ESP", x: 500, y: 410, pct: 47 },

  // Final
  { id:"BRA-f", flag:"🇧🇷", label:"BRA", x: 720, y: 235, pct: 54 },

  // Champion
  { id:"BRA-c", flag:"🇧🇷", label:"BRA", x: 940, y: 235, pct: 100, champ:true },
];
const BRACKET_LINES = [
  ["USA","USA-q"],["MEX","USA-q"],
  ["BRA","BRA-q"],["ARG","BRA-q"],
  ["FRA","FRA-q"],["GER","FRA-q"],
  ["ESP","ESP-q"],
  ["USA-q","BRA-s"],["BRA-q","BRA-s"],
  ["FRA-q","ESP-s"],["ESP-q","ESP-s"],
  ["BRA-s","BRA-f"],["ESP-s","BRA-f"],
  ["BRA-f","BRA-c"],
];

/* =========================================================
   SOCIALS — Telegram / X / Instagram / TikTok
   3D cards with WC26 rainbow pattern bg, brand color accents
   ========================================================= */
const SOCIAL_PLATFORMS = [
  {
    key: "tg",
    name: "Telegram",
    handle: "@WCI_26",
    href: "https://t.me/WCI_26",
    cta: "Join the chat",
    blurb: "Where Paul leaks his picks 60 seconds before the oracle.",
    color: "#229ED9",
    color2: "#1681B0",
    icon: (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        <path d="M40.4 8.4 4.7 22c-2.5.9-2.4 2.3-.4 2.9l9.1 2.8 21-13.2c1-.6 1.9-.3 1.2.4L18.6 31.7l-.7 9.5c1 0 1.5-.4 2-1l4.9-4.7 9.4 6.9c1.7 1 2.9.5 3.4-1.6l6.1-28.7c.7-2.6-.9-3.7-3.3-2.7Z" fill="#fff"/>
      </svg>
    ),
  },
  {
    key: "x",
    name: "X",
    handle: "@WCI_26",
    href: "https://x.com/WCI_26",
    cta: "Follow on X",
    blurb: "Real-time roasts, public picks, public confessions.",
    color: "#1f1f24",
    color2: "#000",
    icon: (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        <path d="M30.6 6h6L25.5 18.7 38.6 42h-9.5l-7.4-10.6L13.4 42H7l11.7-13.4L6 6h9.7l6.7 9.7L30.6 6Zm-2.4 32.2h3.5L15 9.4h-3.5l16.7 28.8Z" fill="#fff"/>
      </svg>
    ),
  },
  {
    key: "ig",
    name: "Instagram",
    handle: "",
    href: null,
    cta: "Follow on IG",
    blurb: "Paul's photo diary. Mascot reels. Cope card drops.",
    color: "#E1306C",
    color2: "#833AB4",
    icon: (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        <rect x="7" y="7" width="34" height="34" rx="9" stroke="#fff" strokeWidth="3.2" fill="none"/>
        <circle cx="24" cy="24" r="7.5" stroke="#fff" strokeWidth="3.2" fill="none"/>
        <circle cx="34.5" cy="13.5" r="2.4" fill="#fff"/>
      </svg>
    ),
  },
  {
    key: "tt",
    name: "TikTok",
    handle: "",
    href: null,
    cta: "Watch Paul",
    blurb: "Match-day reactions, slow-mo jar picks, midnight confessions.",
    color: "#1f1f24",
    color2: "#000",
    icon: (
      <svg viewBox="0 0 48 48" aria-hidden="true">
        {/* layered cyan/pink TikTok glyph */}
        <g>
          <path d="M30 5h-5v25.5a5.5 5.5 0 1 1-5.5-5.5h.5v-5h-.5a10.5 10.5 0 1 0 10.5 10.5V18.4a14.6 14.6 0 0 0 8 2.4v-5a9.5 9.5 0 0 1-8-7.8V5Z" fill="#25F4EE" transform="translate(-1.5,1.5)"/>
          <path d="M30 5h-5v25.5a5.5 5.5 0 1 1-5.5-5.5h.5v-5h-.5a10.5 10.5 0 1 0 10.5 10.5V18.4a14.6 14.6 0 0 0 8 2.4v-5a9.5 9.5 0 0 1-8-7.8V5Z" fill="#FE2C55" transform="translate(1.5,-1.5)"/>
          <path d="M30 5h-5v25.5a5.5 5.5 0 1 1-5.5-5.5h.5v-5h-.5a10.5 10.5 0 1 0 10.5 10.5V18.4a14.6 14.6 0 0 0 8 2.4v-5a9.5 9.5 0 0 1-8-7.8V5Z" fill="#fff"/>
        </g>
      </svg>
    ),
  },
];

function SocialsSection() {
  return (
    <section id="socials" className="socials" data-screen-label="08 Socials">
      <div className="socials-bg" aria-hidden="true" />

      {/* === BIG STAGE: full-width field, squad standing on grass,
                phone on the right, copy overlaid on the left === */}
      <div className="ss-stage">
        {/* Copy overlaid on the left side of the stage */}
        <div className="ss-copy">
          <div className="eyebrow">📡 PAUL'S CHANNELS · LIVE</div>
          <h2 className="h2" style={{marginTop:14}}>
            Follow the<br/>octopus.<br/>
            <span style={{color:"var(--gold)"}}>Fade him at your<br/>own risk.</span>
          </h2>
        </div>

        {/* Soccer field — perspective grass + chalk lines */}
        <div className="ss-field" aria-hidden="true">
          <div className="ss-grass" />
          <svg className="ss-lines" viewBox="0 0 1600 420" preserveAspectRatio="none">
            <defs>
              <linearGradient id="ssLineFade" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="rgba(255,255,255,0)" />
                <stop offset="0.35" stopColor="rgba(255,255,255,0.95)" />
                <stop offset="1" stopColor="rgba(255,255,255,0.85)" />
              </linearGradient>
              <linearGradient id="ssLineFadeFaint" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="rgba(255,255,255,0)" />
                <stop offset="0.4" stopColor="rgba(255,255,255,0.7)" />
                <stop offset="1" stopColor="rgba(255,255,255,0.55)" />
              </linearGradient>
            </defs>
            {/* halfway line */}
            <line x1="-50" y1="120" x2="1650" y2="120" stroke="url(#ssLineFadeFaint)" strokeWidth="3.5" />
            {/* center circle */}
            <ellipse cx="800" cy="260" rx="280" ry="78" fill="none" stroke="url(#ssLineFade)" strokeWidth="4.5" />
            <circle cx="800" cy="260" r="6" fill="rgba(255,255,255,0.95)" />
            <line x1="800" y1="120" x2="800" y2="420" stroke="url(#ssLineFadeFaint)" strokeWidth="3" />
            {/* penalty boxes */}
            <path d="M 80 200 L 360 200 L 420 380 L 20 380 Z" fill="none" stroke="url(#ssLineFade)" strokeWidth="3.5" />
            <path d="M 1240 200 L 1520 200 L 1580 380 L 1180 380 Z" fill="none" stroke="url(#ssLineFade)" strokeWidth="3.5" />
          </svg>
        </div>

        {/* Goal at the back of the field — sits behind the squad. A cardboard
            "Socials" sign hangs from the crossbar by twine. */}
        <div className="ss-goal" aria-hidden="true">
          <svg className="ss-goal-svg" viewBox="0 0 800 320" preserveAspectRatio="xMidYMax meet">
            <defs>
              <pattern id="ssGoalNet" patternUnits="userSpaceOnUse" width="22" height="22">
                <path d="M 0 0 L 22 22" stroke="rgba(255,255,255,0.55)" strokeWidth="0.7" fill="none" />
                <path d="M 22 0 L 0 22"  stroke="rgba(255,255,255,0.55)" strokeWidth="0.7" fill="none" />
              </pattern>
              <linearGradient id="ssGoalPost" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%"   stopColor="#fafafa" />
                <stop offset="50%"  stopColor="#e6e6e3" />
                <stop offset="100%" stopColor="#bdbdba" />
              </linearGradient>
            </defs>
            {/* perspective net — slight trapezoid going back */}
            <path d="M 96 36 L 704 36 L 728 296 L 72 296 Z" fill="url(#ssGoalNet)" />
            {/* faint side panels of the net */}
            <path d="M 72 296 L 96 36 L 96 36 L 96 296 Z" fill="rgba(255,255,255,0.06)" />
            <path d="M 728 296 L 704 36 L 704 36 L 704 296 Z" fill="rgba(255,255,255,0.06)" />
            {/* crossbar */}
            <rect x="72" y="22" width="656" height="14" fill="url(#ssGoalPost)" stroke="rgba(0,0,0,0.45)" strokeWidth="0.6" rx="2" />
            {/* left post */}
            <rect x="72" y="22" width="14" height="276" fill="url(#ssGoalPost)" stroke="rgba(0,0,0,0.45)" strokeWidth="0.6" rx="2" />
            {/* right post */}
            <rect x="714" y="22" width="14" height="276" fill="url(#ssGoalPost)" stroke="rgba(0,0,0,0.45)" strokeWidth="0.6" rx="2" />
            {/* twine to the cardboard sign — anchored at the left side of the crossbar */}
            <path d="M 130 32 L 175 96" stroke="#9a6f44" strokeWidth="1.6" fill="none" />
            <path d="M 235 32 L 175 96" stroke="#9a6f44" strokeWidth="1.6" fill="none" />
          </svg>
          <div className="ss-goal-sign">Socials</div>
        </div>

        {/* Crack in the grass where the tentacle bursts through */}
        <div className="ss-crack" aria-hidden="true">
          <svg viewBox="0 0 360 100" preserveAspectRatio="none">
            <defs>
              <radialGradient id="ssCrackG" cx="0.5" cy="0.5" r="0.6">
                <stop offset="0" stopColor="#0a0420" stopOpacity="1" />
                <stop offset="0.55" stopColor="#1a0938" stopOpacity="0.85" />
                <stop offset="1" stopColor="#1a0938" stopOpacity="0" />
              </radialGradient>
            </defs>
            {/* dark crater */}
            <ellipse cx="180" cy="58" rx="180" ry="44" fill="url(#ssCrackG)" />
            {/* jagged crack lines */}
            <path d="M 28 60 L 80 50 L 120 64 L 150 52 L 180 60" stroke="#000" strokeWidth="3" fill="none" opacity="0.55" />
            <path d="M 332 58 L 280 48 L 240 62 L 210 50 L 180 58" stroke="#000" strokeWidth="3" fill="none" opacity="0.55" />
            <path d="M 100 70 L 140 86 L 180 78 L 220 88 L 260 70" stroke="#000" strokeWidth="2" fill="none" opacity="0.4" />
            {/* tossed grass divots around the rim */}
            <ellipse cx="60" cy="44" rx="9" ry="3" fill="#2a6a32" opacity="0.8" />
            <ellipse cx="100" cy="38" rx="6" ry="2" fill="#2a6a32" opacity="0.7" />
            <ellipse cx="280" cy="42" rx="8" ry="3" fill="#2a6a32" opacity="0.8" />
            <ellipse cx="320" cy="36" rx="5" ry="2" fill="#2a6a32" opacity="0.65" />
          </svg>
        </div>

        {/* The squad — paul + mascots STANDING ON THE FIELD (no card) */}
        <img
          className="ss-squad"
          src="assets/paul-socials.png"
          alt="The World Cup Inu squad standing on the field — Shiba, Paul, Moose, Eagle, Jaguar."
        />

      </div>

      {/* === Follow strip — premium pill buttons that flow out of the stage === */}
      <div className="socials-strip" aria-label="Paul's social channels">
        {SOCIAL_PLATFORMS.map(p => {
          const isLive = !!p.href;
          const Tag = isLive ? "a" : "div";
          const linkProps = isLive
            ? { href: p.href, target: "_blank", rel: "noreferrer noopener" }
            : { "aria-disabled": "true" };
          return (
            <Tag
              key={p.key}
              className={`social-pill sp-${p.key} ${isLive ? "" : "is-soon"}`}
              style={{
                "--sp-color":  p.color,
                "--sp-color2": p.color2,
              }}
              aria-label={`${p.name}${p.handle ? " — " + p.handle : " — coming soon"}`}
              {...linkProps}
            >
              <span className="sp-tint" aria-hidden="true" />
              <span className="sp-icon">{p.icon}</span>
              <span className="sp-info">
                <span className="sp-name">{p.name}</span>
                <span className="sp-handle">{p.handle || "Coming soon"}</span>
              </span>
              <span className="sp-arrow" aria-hidden="true">{isLive ? "↗" : "·"}</span>
            </Tag>
          );
        })}
      </div>
    </section>
  );
}

/* =========================================================
   HOLOGRAPHIC COPE CARD — 3D flip + holo border
   ========================================================= */
function CopeCardSection() {
  const [flipped, setFlipped] = useState(false);
  useEffect(() => {
    const iv = setInterval(() => setFlipped(f => !f), 5000);
    return () => clearInterval(iv);
  }, []);

  return (
    <section id="cope" className="cope" data-screen-label="09 Cope Cards">
      <div className="cope-stage">
        <div className="cope-card-wrap" onClick={() => setFlipped(f => !f)}>
          <div className={"cope-card" + (flipped ? " flipped" : "")}>
            <div className="cope-face">
              <div className="cope-front">
                <div className="cope-bar">
                  <span>WCI · COPE #4291</span>
                  <span style={{color:"var(--fifa-magenta)"}}>◆ MYTHIC</span>
                </div>
                <div className="cope-match">
                  <div className="cope-team">
                    <span className="flag">🇺🇸</span>
                    <span className="nm">USA</span>
                  </div>
                  <div className="cope-score">2 — 1</div>
                  <div className="cope-team">
                    <span className="flag">🇹🇷</span>
                    <span className="nm">TUR</span>
                  </div>
                </div>
                <div className="cope-paul">
                  <img src="assets/paul_cooked.png" alt="Paul cooked" />
                </div>
                <div className="cope-roast">
                  "I had them at 2-0. The plumbing was off."
                </div>
                <div className="cope-meta">
                  <span>JUN · 11 · 2026</span>
                  <span className="rare">1 of 1</span>
                </div>
              </div>
            </div>
            <div className="cope-face back">
              <div className="cope-back">
                <h4>THE LEDGER</h4>
                <div className="row"><span className="k">Holder</span><span className="v">0x4Ae…91f2</span></div>
                <div className="row"><span className="k">Position</span><span className="v">420 $WCI26</span></div>
                <div className="row"><span className="k">Pick</span><span className="v">USA · 78%</span></div>
                <div className="row"><span className="k">Result</span><span className="v coral">L</span></div>
                <div className="row"><span className="k">ROI</span><span className="v coral">−100%</span></div>
                <div className="row"><span className="k">Roast Score</span><span className="v gold">9.4 / 10</span></div>
                <div className="row"><span className="k">Mint</span><span className="v">#4291 / 9999</span></div>
                <div className="cope-qr">
                  <svg viewBox="0 0 80 80">
                    {Array.from({length: 16}).map((_, i) => {
                      const x = (i % 4) * 20;
                      const y = Math.floor(i / 4) * 20;
                      return Array.from({length: 16}).map((_, j) => {
                        const px = x + (j % 4) * 5;
                        const py = y + Math.floor(j / 4) * 5;
                        const seed = (i * 17 + j * 31 + 7) % 5;
                        if (seed < 2) return null;
                        return <rect key={`${i}-${j}`} x={px} y={py} width="5" height="5" fill="#fff" />;
                      });
                    })}
                    <rect x="0"  y="0"  width="20" height="20" fill="none" stroke="#fff" strokeWidth="3"/>
                    <rect x="60" y="0"  width="20" height="20" fill="none" stroke="#fff" strokeWidth="3"/>
                    <rect x="0"  y="60" width="20" height="20" fill="none" stroke="#fff" strokeWidth="3"/>
                    <rect x="6"  y="6"  width="8"  height="8"  fill="#fff"/>
                    <rect x="66" y="6"  width="8"  height="8"  fill="#fff"/>
                    <rect x="6"  y="66" width="8"  height="8"  fill="#fff"/>
                  </svg>
                  <span className="ttl">Mint on<br/>OpenSea ↗</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="cope-side">
          <div className="eyebrow">◆ ERC-721A · COPE CARDS</div>
          <h2 className="h2">Every L mints a card.<br/>Every card tells on you.</h2>
          <p className="lead" style={{marginTop:18}}>
            Holographic foil. On-chain roast. Auto-minted after every match.
            Rarity scales with how spectacularly you got cooked.
          </p>
          <div className="cope-rarity">
            <div className="cope-rar common">
              <div className="nm">Common</div>
              <div className="ct">7,412</div>
            </div>
            <div className="cope-rar rare">
              <div className="nm">Rare</div>
              <div className="ct">1,840</div>
            </div>
            <div className="cope-rar epic">
              <div className="nm">Epic</div>
              <div className="ct">412</div>
            </div>
            <div className="cope-rar mythic">
              <div className="nm">Mythic</div>
              <div className="ct">17</div>
            </div>
          </div>
          <div style={{display:"flex", gap:12, marginTop:24}}>
            <button className="btn-3d">🐙 MINT MY COPE</button>
            <button className="btn-3d btn-3d-ghost">OPENSEA ↗</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   PARTICLE LAYER — canvas fixed bg, drifting confetti dots
   ========================================================= */
function ParticleLayer() {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const COLORS = ["#E8392C","#FF7A1F","#F5D020","#9FD634","#00B9B2","#2E6FE6","#8B47D6","#E637A8"];
    let w = canvas.width = window.innerWidth;
    let h = canvas.height = window.innerHeight;
    const onResize = () => {
      w = canvas.width = window.innerWidth;
      h = canvas.height = window.innerHeight;
    };
    window.addEventListener('resize', onResize);

    const N = Math.min(80, Math.floor((w * h) / 22000));
    const parts = Array.from({length: N}, () => ({
      x: Math.random() * w,
      y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.25,
      vy: -0.15 - Math.random() * 0.4,
      r: 1.2 + Math.random() * 2.4,
      c: COLORS[Math.floor(Math.random() * COLORS.length)],
      a: 0.3 + Math.random() * 0.5,
      tw: Math.random() * Math.PI * 2,
    }));

    let raf = 0;
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;

    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      for (const p of parts) {
        p.x += p.vx;
        p.y += p.vy;
        p.tw += 0.04;
        if (p.y < -10) { p.y = h + 10; p.x = Math.random() * w; }
        if (p.x < -10) p.x = w + 10;
        if (p.x > w + 10) p.x = -10;
        const flicker = 0.5 + 0.5 * Math.sin(p.tw);
        ctx.globalAlpha = p.a * flicker;
        ctx.fillStyle = p.c;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
        // glow
        ctx.globalAlpha = p.a * flicker * 0.3;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalAlpha = 1;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); };
  }, []);

  return <canvas ref={canvasRef} className="particles" aria-hidden="true" />;
}

/* ---------- App ---------- */
function App() {
  const [edits, setEdits] = useState(TWEAK_DEFAULTS);

  // Apply body data-* attrs
  useEffect(() => {
    document.body.dataset.state = edits.state;
    document.body.dataset.hero = edits.hero;
    document.body.dataset.pm = edits.pm;
    document.body.dataset.temp = edits.temp;
  }, [edits.state, edits.hero, edits.pm, edits.temp]);

  // Sticky nav hide-on-scroll-down
  useEffect(() => {
    let lastY = 0;
    const onScroll = () => {
      const y = window.scrollY;
      if (y > lastY && y > 200) document.body.classList.add("nav-hidden");
      else document.body.classList.remove("nav-hidden");
      lastY = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Resolve countdown target (strip fake: prefix)
  const target = edits.countdownTarget.startsWith("fake:")
    ? edits.countdownTarget.slice(5)
    : edits.countdownTarget;

  return (
    <>
      <div className="page-bg" />
      <div className="page-ambient" aria-hidden="true" />
      <div className="grain" />
      <TopNav />
      <ParticleLayer />
      <ScrollTentacles />
      <main className="page">
        <Hero countdownTarget={target} state={edits.state} oracleCopy={edits.oracleCopy} />
        <Ticker />
        <StadiumJumbotron />
        <SectionDivider />
        <HowToBuy />
        <SectionDivider />
        <OracleDataFeed />
        <SectionDivider />
        <SocialsSection />
        <SectionDivider />
        <Tokenomics />
        <SectionDivider />
        <HostNations />
        <FinalCTA />
      </main>
      <PeekTentacle />
      <TweaksPanel edits={edits} setEdits={setEdits} />
    </>
  );
}

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