/* $CLOWNZ — sections built from the mascot library + tweaks. */

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

// Cycle through random jeeter rows
const SHAME_REASONS = [
  "Paper hands at -3%",
  "VC unlock dump 🤡",
  "Typical shill exit",
  "Telegram pump caller",
  "Insider seed allocation",
  "Market maker drain",
  "CEX listing dump",
  "Anon dev rug suspect",
  "Bought top, sold bottom",
  "'Trust me bro' KOL",
  "Snitched on Twitter Spaces",
  "Flipped while shilling",
];
const NAMES = [
  "0xRugLord","ChadVC.eth","FloorJanitor","GloriousJeeter","Pumperino",
  "ShillTzu","BagholderXL","WenLambo69","ClownDeck","ExitLiquidity",
  "MMSnake","RetroAirdrop","SizeMatters","DegenDave","RektMaximus"
];
const TIMES = ["12s ago","1m ago","3m ago","6m ago","11m ago","18m ago","27m ago","42m ago","1h ago","2h ago"];

function shorten(addr){return addr.slice(0,6)+"…"+addr.slice(-4)}
function rndAddr(seed){
  const hex="0123456789abcdef";let s="0x";let x=seed*9301+49297;
  for(let i=0;i<40;i++){x=(x*1664525+1013904223)>>>0;s+=hex[x%16]}return s;
}
function rndAmt(seed){
  const x=((seed*2654435761)>>>0)%900000+15000;
  return "$"+x.toLocaleString();
}

/* ---------- HEADER NAV ---------- */
function Nav() {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <nav className={"nav" + (open ? " nav-open" : "")}>
      <div className="brand">
        <span className="nose"></span>
        <span className="name">$CLOWNZ</span>
      </div>
      <ul>
        <li><a href="#dashboard" onClick={close}>SCOREBOARD</a></li>
        <li><a href="#jeeters" onClick={close}>JEETERS</a></li>
        <li><a href="#circus" onClick={close}>CIRCUS</a></li>
        <li><a href="#bigtop" onClick={close}>FAIR LAUNCH</a></li>
        <li><a href="#buy" onClick={close}>HOW TO BUY</a></li>
        <li className="nav-cta-mobile"><a className="cta" href="#buy" onClick={close}>BUY $CLOWNZ →</a></li>
      </ul>
      <a className="cta nav-cta-desktop" href="#buy">BUY $CLOWNZ →</a>
      <button
        type="button"
        className="nav-toggle"
        aria-label={open ? "Close menu" : "Open menu"}
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        <span></span><span></span><span></span>
      </button>
    </nav>
  );
}

/* ---------- MARQUEE ---------- */
function Marquee() {
  const items = [
    "JEETED BY YOUR FAVOURITE INFLUENCER", "VCs IN CLOWN MAKEUP",
    "PAPER HANDS DETECTED", "ANOTHER MM JUST DRAINED A POOL",
    "TG GROUP LARPING AS COMMUNITY", "PUMP. DUMP. REPEAT.",
    "WE ARE ALL CLOWNS HERE", "THIS IS NOT FINANCIAL ADVICE",
    "🤡 NAME & SHAME 🤡"
  ];
  const row = (
    <div className="marquee-track">
      {[...items, ...items, ...items].map((t, i) => (
        <span key={i}><span className="dot"></span>{t}</span>
      ))}
    </div>
  );
  return <div className="marquee">{row}</div>;
}

/* ---------- HERO ---------- */
function Hero({ tweaks }) {
  const [price, setPrice] = useState(0.04269);
  const [change, setChange] = useState(420.69);
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    const id = setInterval(() => {
      setPrice(p => Math.max(0.001, p * (1 + (Math.random() - 0.45) * 0.05)));
      setChange(c => c + (Math.random() - 0.5) * 5);
    }, 1500);
    return () => clearInterval(id);
  }, []);
  const contract = "0xC10WNZ420BAGH0LDER69deadbeefC0FFEE1234CAFE";
  return (
    <header className="hero" id="top">
      <div className="hero-bg"><div className="spotlight"></div></div>
      <div className="hero-inner">
        <span className="eyebrow"><span className="blink"></span>LIVE • THE GREATEST SHOW IN WEB3</span>
        <h1>
          <span className="dollar">$</span>CLOWN<br/>ZZZ!
        </h1>
        <div className="tagline">The only honest memecoin in Web3 — <em>we're all clowns here.</em></div>
        <p className="sub">Exposing the shills, jeeters, VCs, and market makers one dump at a time. Powered entirely by paper hands and second-hand humiliation.</p>
        <div className="hero-ctas">
          <a className="btn-primary" href="#buy">BUY $CLOWNZ <span className="arrow">→</span></a>
          <a className="btn-ghost" href="#jeeters">SEE WHO JEETED</a>
          <div className="socials">
            <a href="#" title="X">𝕏</a>
            <a href="#" title="Telegram">TG</a>
            <a href="#" title="Dexscreener">DX</a>
            <a href="#" title="Discord">DC</a>
          </div>
        </div>
        <div className="contract-row">
          <span className="label">CA</span>
          <code>{contract}</code>
          <button className="copy-btn" onClick={()=>{navigator.clipboard?.writeText(contract);setCopied(true);setTimeout(()=>setCopied(false),1200)}}>{copied?"COPIED":"COPY"}</button>
        </div>
      </div>

      <div className="hero-side">
        <div className="ticker-card">
          <div className="head">
            <h4>$CLOWNZ / USD</h4>
            <span className="live"><span className="pulse"></span>LIVE</span>
          </div>
          <div className="ticker-price">${price.toFixed(5)}</div>
          <div className="ticker-change">▲ +{change.toFixed(2)}% (24h) — pure clownery</div>
          <div className="ticker-grid">
            <div><div className="k">Mkt Cap</div><div className="v">$42.69M</div></div>
            <div><div className="k">24h Vol</div><div className="v">$13.37M</div></div>
            <div><div className="k">Liquidity</div><div className="v">$1.42M</div></div>
            <div><div className="k">Holders</div><div className="v">13,370</div></div>
          </div>
        </div>

        <div className="mascot-wrap">
          <div className="ring"></div>
          <div className="juggle">
            <div className="ball b1">$</div>
            <div className="ball b2">RUG</div>
            <div className="ball b3">$</div>
            <div className="ball b4">VC</div>
          </div>
          <video
            className="hero-video"
            src="closeup-vid.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            onMouseEnter={e => { const v = e.currentTarget; v.muted = false; v.play().catch(()=>{}); }}
            onMouseLeave={e => { e.currentTarget.muted = true; }}
          />
          <div className="nameplate" aria-hidden="true">
            <span className="nameplate-kicker">★ STARRING ★</span>
            <span className="nameplate-name">BOZO <em>BELFORT</em></span>
            <span className="nameplate-sub">CEO of Clowning, Inc.</span>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---------- DASHBOARD ---------- */
function Dashboard() {
  const [stats, setStats] = useState({
    price: 0.04269, vol: 13371337, holders: 13370, fdv: 42690000,
    rug: 73, paper: 88, vc: 91
  });
  const [flashKey, setFlashKey] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setStats(s => ({
        ...s,
        price: Math.max(0.001, s.price * (1+(Math.random()-0.45)*0.04)),
        vol: s.vol + Math.floor(Math.random()*50000),
        holders: s.holders + (Math.random()>0.5?1:0),
        fdv: s.fdv * (1+(Math.random()-0.45)*0.02),
        rug: 60 + Math.floor(Math.random()*30),
        paper: 70 + Math.floor(Math.random()*25),
        vc: 80 + Math.floor(Math.random()*15),
      }));
      setFlashKey(k=>k+1);
    }, 2200);
    return () => clearInterval(id);
  }, []);
  const fmt = n => n>=1e6?`$${(n/1e6).toFixed(2)}M`:n>=1e3?`$${(n/1e3).toFixed(1)}K`:`$${n.toFixed(0)}`;
  return (
    <section id="dashboard" className="confetti-bg">
      <div className="section-head">
        <span className="kicker">★ THE CARNIVAL SCOREBOARD ★</span>
        <h2>STEP RIGHT UP, <em>JEETER!</em></h2>
        <p>Live numbers, gauges, and spinning wheels. Watch the value of your bags evaporate in real-time, in the most entertaining format possible.</p>
      </div>
      <div className="dashboard">
        <span className="scoreboard-tag">★ LIVE SCOREBOARD ★</span>
        <div className="scoreboard-grid">
          <div className="score-cell" key={"p"+flashKey}>
            <div className="label">Price</div>
            <div className="value">${stats.price.toFixed(5)}</div>
            <div className="delta up">▲ +{(Math.random()*30+5).toFixed(2)}%</div>
          </div>
          <div className="score-cell">
            <div className="label">24h Volume</div>
            <div className="value">{fmt(stats.vol)}</div>
            <div className="delta up">▲ +69.42%</div>
          </div>
          <div className="score-cell">
            <div className="label">Holders</div>
            <div className="value">{stats.holders.toLocaleString()}</div>
            <div className="delta down">▼ -3 jeeted</div>
          </div>
          <div className="score-cell">
            <div className="label">FDV</div>
            <div className="value">{fmt(stats.fdv)}</div>
            <div className="delta up">▲ to the BIG TOP</div>
          </div>
          <div className="score-cell">
            <div className="label">Liquidity</div>
            <div className="value">$1.42M</div>
            <div className="delta">🔒 LP Burned</div>
          </div>
          <div className="score-cell">
            <div className="label">Total Jeeted</div>
            <div className="value" style={{color:"var(--red)"}}>$2.1M</div>
            <div className="delta down">▼ 419 clowns</div>
          </div>
        </div>
        <div className="gauges">
          <div className="gauge">
            <h5>RUG-O-METER</h5>
            <div className="gauge-bar"><div className="fill" style={{width:stats.rug+"%"}}></div></div>
            <div className="num">{stats.rug}%</div>
            <div className="meta">probability the next big launch rugs you</div>
            <div className="spin-wheel"></div>
          </div>
          <div className="gauge">
            <h5>PAPER HANDS INDEX</h5>
            <div className="gauge-bar"><div className="fill" style={{width:stats.paper+"%"}}></div></div>
            <div className="num">{stats.paper}%</div>
            <div className="meta">of holders sell within 24h of a 2x</div>
            <div className="spin-wheel"></div>
          </div>
          <div className="gauge">
            <h5>VC UNLOCK ANXIETY</h5>
            <div className="gauge-bar"><div className="fill" style={{width:stats.vc+"%"}}></div></div>
            <div className="num">{stats.vc}%</div>
            <div className="meta">of supply waiting to dump on retail</div>
            <div className="spin-wheel"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- JEETERS LEADERBOARD ---------- */
function JeetersBoard() {
  const seedRows = useMemo(() => Array.from({length: 8}, (_, i) => ({
    rank: i+1,
    name: NAMES[i % NAMES.length],
    addr: rndAddr(i+7),
    amt: rndAmt(i*3+2),
    time: TIMES[i % TIMES.length],
    reason: SHAME_REASONS[i % SHAME_REASONS.length],
  })), []);
  const [rows, setRows] = useState(seedRows);
  const audioRef = useRef(null);

  // Keep adding new jeeters at the top
  useEffect(() => {
    let n = 100;
    const id = setInterval(() => {
      setRows(prev => {
        const newRow = {
          rank: 0,
          name: NAMES[Math.floor(Math.random()*NAMES.length)],
          addr: rndAddr(n),
          amt: rndAmt(n),
          time: "just now",
          reason: SHAME_REASONS[Math.floor(Math.random()*SHAME_REASONS.length)],
        };
        n++;
        const next = [newRow, ...prev].slice(0, 9);
        return next.map((r,i)=>({...r,rank:i+1, time: i===0 ? "just now" : (i<=3 ? `${i*2}m ago` : TIMES[i % TIMES.length])}));
      });
    }, 5000);
    return () => clearInterval(id);
  }, []);

  function honk(){
    try{
      const ctx = new (window.AudioContext||window.webkitAudioContext)();
      const o = ctx.createOscillator();
      const g = ctx.createGain();
      o.type="square";o.frequency.value=180;
      g.gain.value=.08;
      o.connect(g);g.connect(ctx.destination);
      o.start();
      o.frequency.exponentialRampToValueAtTime(80, ctx.currentTime+.25);
      g.gain.exponentialRampToValueAtTime(.0001, ctx.currentTime+.4);
      o.stop(ctx.currentTime+.4);
    }catch(e){}
  }

  return (
    <section id="jeeters">
      <div className="section-head">
        <span className="kicker">⚠ NAME & SHAME ⚠</span>
        <h2>JEETERS <em>LEADERBOARD</em></h2>
        <p>Updated live. Every significant sell is logged, ranked, and immortalized. Top jeeter receives the coveted Biggest Clown crown — and our eternal pity.</p>
      </div>
      <div className="jeeters">
        <div className="hdr">
          <h3>🤡 BIGGEST CLOWNS THIS HOUR</h3>
          <div className="legend">
            <span className="crown">👑</span> = Crowned Top Jeeter
            <span style={{marginLeft:14, color:"#fff"}}>HOVER A 📯 TO HONK</span>
          </div>
        </div>
        <div style={{
          display:"grid", gridTemplateColumns:"60px 1fr 160px 130px 1fr 80px",
          padding:"10px 22px", background:"#1a0b2e",
          fontFamily:"Bungee, system-ui", fontSize:"11px",
          color:"var(--yellow)", letterSpacing:".1em"
        }}>
          <div>RANK</div><div>CLOWN</div><div>AMOUNT JEETED</div><div>TIME</div><div>REASON</div><div style={{textAlign:"right"}}>HONK</div>
        </div>
        {rows.map((r,i)=>(
          <div className={"jeet-row "+(i===0?"top":"")} key={r.addr+r.rank}>
            <div className="rank">#{r.rank}</div>
            <div className="who">
              <div className="avatar"><JeeterAvatar seed={i+r.amt.length} /></div>
              <div>
                <div className="name">
                  {r.name}
                  {i===0 && <span className="crown-badge" style={{marginLeft:8}}>👑 BIGGEST CLOWN</span>}
                </div>
                <div className="wallet">{shorten(r.addr)}</div>
              </div>
            </div>
            <div className="amt">{r.amt}</div>
            <div className="time">{r.time}</div>
            <div className="reason">"{r.reason}"</div>
            <button className="horn" onMouseEnter={honk} onClick={honk} title="HONK">📯</button>
          </div>
        ))}
        <div style={{padding:"16px 22px", textAlign:"center", color:"var(--bone-2)", fontSize:13, fontFamily:"JetBrains Mono"}}>
          + 4,182 more clowns. <a href="#" style={{color:"var(--yellow)"}}>VIEW THE FULL HALL OF SHAME →</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- THE CIRCUS ---------- */
function Circus() {
  const clowns = [
    { kind:"vc", title:"THE VC CLOWN", desc:"Allocations at $0.001. Talks 'long-term alignment' on podcasts. Wallet unlocked at 6:00 AM, dumped by 6:04.", stats:{ supply:"22%", honesty:"3/100" }},
    { kind:"shill", title:"THE PAID SHILL", desc:"\"Not financial advice\" in tiny font. \"100x gem\" in giant font. The disclosed disclosure is undisclosed.", stats:{ rate:"$2k/post", honesty:"7/100" }},
    { kind:"mm", title:"THE MARKET MAKER", desc:"Two-sided liquidity, one-sided ethics. Spreads so wide you could park a circus tent in them.", stats:{ takerage:"5%", honesty:"12/100" }},
    { kind:"cex", title:"THE CEX EXTRACTOR", desc:"Listing fee: your soul. Withdrawals: paused. Customer support: a parking cone in a clown suit.", stats:{ fee:"BIG", honesty:"4/100" }},
    { kind:"pump", title:"THE PUMP & DUMP CREW", desc:"Telegram of 30,000 'whales' all named Sergio. Coordinated entries, accidental exits, mysterious early bags.", stats:{ groups:"47", honesty:"1/100" }},
  ];
  return (
    <section id="circus">
      <div className="section-head">
        <span className="kicker">🎪 THE CIRCUS 🎪</span>
        <h2>WELCOME TO THE <em>BIG SHOW</em></h2>
        <p>Five archetypes. One ruined market. We're not naming names — but you know who they are. (We are also naming names.)</p>
      </div>
      <div className="circus-grid">
        {clowns.map(c => (
          <div key={c.kind} className={"clown-card c-"+c.kind}>
            <div className="portrait">
              <span className="badge">{c.kind.toUpperCase()}</span>
              <ClownPortrait kind={c.kind} />
            </div>
            <h4>{c.title}</h4>
            <p>{c.desc}</p>
            <div className="stats">
              {Object.entries(c.stats).map(([k,v])=>(
                <span key={k}>{k.toUpperCase()}: <span className="v">{v}</span></span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="manifesto">
        <h3>THE $CLOWNZ MANIFESTO</h3>
        <p>Web3 was supposed to be open, fair, and built by the people. Instead, we got <strong>insider seed rounds</strong>, <strong>paid 'organic' shills</strong>, <strong>infinite-mint stablecoins</strong>, and <strong>'community-owned' tokens</strong> where the community owns 4%.</p>
        <p>$CLOWNZ doesn't pretend. We're a memecoin. We will probably go to zero. The difference is — we'll do it <strong>honestly</strong>, in front of you, with a <strong>red nose on</strong>, while pointing at every single bad actor on the way down.</p>
        <p>This is satire-as-infrastructure. Every jeeter logged. Every wallet exposed. Every VC unlock turned into a public spectacle. The only way out is through — laughing.</p>
        <p style={{fontFamily:"'Bungee', system-ui", fontSize:18, color:"var(--yellow)", marginTop:18}}>WE ARE ALL CLOWNS. AT LEAST WE'RE HONEST ABOUT IT. 🤡</p>
      </div>
    </section>
  );
}

/* ---------- BIG TOP / TOKENOMICS ---------- */
function BigTop() {
  const tokens = [
    { name:"Uniswap V4 Hook Pool", pct:100, color:"#ff2d55", desc:"100% of supply lives inside the Flaunch V4 hook contract. No team wallet. No treasury wallet. No 'strategic reserve' wallet. The pool IS the supply." },
  ];
  // Donut math (single slice for the dramatic 100%)
  const r = 80, c = 2*Math.PI*r;
  return (
    <section id="bigtop">
      <div className="section-head">
        <span className="kicker">🎟 STEP RIGHT UP 🎟</span>
        <h2>THE <em>BIG TOP</em></h2>
        <p>A Flaunch.gg fair launch on Base. No presale. No allocations. No clown VCs. The whole supply is in the V4 hook from second one.</p>
      </div>
      <div className="bigtop">
        <span className="poster-tag">ONE NIGHT ONLY • FAIR LAUNCH</span>
        <h2>$CLOWNZ FAIR LAUNCH</h2>
        <div className="sub">★ FLAUNCH.GG ★ BASE CHAIN ★ START MCAP $9.5K ★ 100% IN V4 HOOK ★</div>
        <div className="row">
          <div className="donut">
            <svg viewBox="0 0 200 200">
              <circle cx="100" cy="100" r={r} fill="none" stroke="#eee" strokeWidth="36"/>
              <circle cx="100" cy="100" r={r} fill="none" stroke="#ff2d55" strokeWidth="36" strokeDasharray={`${c} 0`}/>
            </svg>
            <div className="center">
              <div>
                <div className="total">100%</div>
                <div className="label">IN THE HOOK</div>
              </div>
            </div>
          </div>
          <div className="tokenomics-list">
            <div className="token-item">
              <div className="swatch" style={{background:"#ffd60a"}}></div>
              <div>
                <div className="name">FAIR LAUNCH ON FLAUNCH.GG</div>
                <div className="desc">No presale. No private round. No "advisors". Anyone with a Base wallet can clown in at the same price.</div>
              </div>
              <div className="pct" style={{fontSize:14}}>FAIR</div>
            </div>
            <div className="token-item">
              <div className="swatch" style={{background:"#39ff14"}}></div>
              <div>
                <div className="name">START MCAP: $9,500</div>
                <div className="desc">Nine and a half thousand dollars. That's the entire opening market cap. If you're getting in at $50M FDV, you're already the clown.</div>
              </div>
              <div className="pct" style={{fontSize:14}}>$9.5K</div>
            </div>
            <div className="token-item">
              <div className="swatch" style={{background:"#ff2bd6"}}></div>
              <div>
                <div className="name">UNISWAP V4 HOOK SYSTEM</div>
                <div className="desc">Full supply lives inside the Flaunch V4 hook contract. No team wallet to dump. No treasury multisig. If we rug, we'd have to rug ourselves.</div>
              </div>
              <div className="pct" style={{fontSize:14}}>V4</div>
            </div>
            <div className="token-item">
              <div className="swatch" style={{background:"#00e5ff"}}></div>
              <div>
                <div className="name">BASE CHAIN</div>
                <div className="desc">Cheap fees. Fast blocks. Maximum velocity for jeeters to humiliate themselves in real time on the leaderboard.</div>
              </div>
              <div className="pct" style={{fontSize:14}}>BASE</div>
            </div>
          </div>
        </div>
        <div className="guarantees">
          <div className="guarantee"><div className="icon">🎪</div><div className="t">FLAUNCH FAIR LAUNCH</div><div className="d">Bonding-curve fair launch. No insider allocs. No locked team supply. Pure circus.</div></div>
          <div className="guarantee"><div className="icon">🪝</div><div className="t">100% IN V4 HOOK</div><div className="d">Whole supply sits in the Uniswap V4 hook from t=0. There is no other wallet.</div></div>
          <div className="guarantee"><div className="icon">🔵</div><div className="t">BASE NATIVE</div><div className="d">Deployed on Base. No bridge. No wrapper. No "coming to Solana soon".</div></div>
          <div className="guarantee"><div className="icon">📜</div><div className="t">NO TEAM TOKENS</div><div className="d">We don't have an unlock schedule. We can't dump on you. The math doesn't allow it.</div></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- HOW TO BUY ---------- */
function HowToBuy() {
  const steps = [
    { n:1, t:"GET ON BASE", d:"Any EVM wallet — MetaMask, Rabby, Coinbase Wallet — switched to Base mainnet. Bridge in some ETH if you don't already have it." },
    { n:2, t:"OPEN FLAUNCH.GG", d:"Find the $CLOWNZ token page on Flaunch. Fair launch starts at a $9.5K market cap. Yes, that low. No, you didn't miss it (yet)." },
    { n:3, t:"BUY VIA BANKRBOT OR UNISWAP", d:"Tag @bankrbot on X to ape directly, or swap on Uniswap V4 against the Flaunch hook pool. Contract address goes here once it's live." },
    { n:4, t:"DON'T JEET", d:"Sell within 24h and you'll be immortalized on the leaderboard with a horn-honk for every visitor. The crown is real. The shame is real." },
  ];
  return (
    <section id="buy" style={{paddingBottom:60}}>
      <div className="section-head">
        <span className="kicker">🎟 HOW TO BUY ON BASE 🎟</span>
        <h2>JOIN THE <em>CIRCUS</em></h2>
        <p>Fair launch on Flaunch.gg. Buy with BANKRBOT or directly through the Uniswap V4 hook pool. Four steps, zero excuses.</p>
      </div>
      <div className="steps">
        {steps.map(s=>(
          <div className="step" key={s.n}>
            <div className="num">{s.n}</div>
            <h4>{s.t}</h4>
            <p>{s.d}</p>
          </div>
        ))}
      </div>

      <div style={{
        maxWidth:1200, margin:"40px auto 0",
        display:"grid", gridTemplateColumns:"1fr 1fr", gap:18
      }} className="buy-cards">
        <a href="#" className="step" style={{borderColor:"var(--green)", borderStyle:"solid", display:"block", textDecoration:"none"}}>
          <div className="num" style={{background:"var(--green)"}}>🤖</div>
          <h4 style={{color:"var(--green)"}}>BUY WITH BANKRBOT</h4>
          <p>Tag <strong style={{color:"var(--bone)"}}>@bankrbot</strong> on X with your buy command. Onchain in seconds. The lazy-degen express lane to the leaderboard.</p>
          <div style={{marginTop:14, fontFamily:"'Bungee', system-ui", fontSize:13, color:"var(--green)"}}>OPEN BANKRBOT →</div>
        </a>
        <a href="#" className="step" style={{borderColor:"var(--magenta)", borderStyle:"solid", display:"block", textDecoration:"none"}}>
          <div className="num" style={{background:"var(--magenta)", color:"#fff"}}>🦄</div>
          <h4 style={{color:"var(--magenta)"}}>SWAP ON UNISWAP</h4>
          <p>Direct swap against the <strong style={{color:"var(--bone)"}}>Flaunch V4 hook pool</strong> on Base. Paste the contract, set slippage, click swap, post chart in TG.</p>
          <div style={{marginTop:14, fontFamily:"'Bungee', system-ui", fontSize:13, color:"var(--magenta)"}}>OPEN UNISWAP →</div>
        </a>
      </div>
      <div style={{
        maxWidth:1200, margin:"22px auto 0", padding:"14px 18px",
        background:"#000", border:"2px dashed var(--yellow)", borderRadius:12,
        fontFamily:"'JetBrains Mono'", fontSize:12, color:"var(--bone-2)", textAlign:"center"
      }}>
        CONTRACT ADDRESS: <span style={{color:"var(--yellow)"}}>TBA AT LAUNCH</span> — only trust the address posted on this site & official $CLOWNZ X. Imposters incoming.
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const qa = [
    ["Is $CLOWNZ a scam?", "Every memecoin is, in some sense, a scam. The difference is we say so on the homepage. Read the manifesto."],
    ["Will it go to zero?", "Statistically, yes. So will most of your portfolio. At least with $CLOWNZ you'll get a leaderboard ranking out of it."],
    ["Why am I on the Jeeters board?", "Because you sold. The contract sees all. The clown remembers."],
    ["Do you have a CEX listing?", "We're talking to several extractors. Negotiations are going about as well as you'd expect."],
    ["This is offensive to professional clowns.", "We agree. Real clowns deserve better than being compared to VCs. We apologize to the International Clown Hall of Fame."],
  ];
  return (
    <section id="faq">
      <div className="section-head">
        <span className="kicker">❓ FREQUENTLY ASKED ❓</span>
        <h2>THINGS YOU <em>SHOULDN'T</em> ASK</h2>
      </div>
      <div className="faq">
        {qa.map(([q,a],i)=>(
          <details key={i} open={i===0}>
            <summary>{q}</summary>
            <p>{a}</p>
          </details>
        ))}
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer>
      <div className="curtain-strip"></div>
      <div className="foot-warn">
        ⚠ THIS IS NOT FINANCIAL ADVICE. THIS IS <em>FINANCIAL COMEDY.</em> ⚠
      </div>
      <div className="foot-grid">
        <div className="foot-brand">
          <div className="name">$CLOWNZ</div>
          <p>The greatest show in Web3. Brought to you by paper hands, public humiliation, and the eternal optimism of degenerate gamblers everywhere.</p>
        </div>
        <div>
          <h5>THE CIRCUS</h5>
          <ul>
            <li><a href="#dashboard">Scoreboard</a></li>
            <li><a href="#jeeters">Hall of Shame</a></li>
            <li><a href="#circus">Manifesto</a></li>
            <li><a href="#bigtop">Tokenomics</a></li>
          </ul>
        </div>
        <div>
          <h5>JOIN</h5>
          <ul>
            <li><a href="#">𝕏 / Twitter</a></li>
            <li><a href="#">Telegram</a></li>
            <li><a href="#">Discord</a></li>
            <li><a href="#">Dexscreener</a></li>
          </ul>
        </div>
        <div>
          <h5>TOOLS</h5>
          <ul>
            <li><a href="#">Jeeter Lookup</a></li>
            <li><a href="#">VC Unlock Calendar</a></li>
            <li><a href="#">Shill Detector (beta)</a></li>
            <li><a href="#">Honk Sound Pack</a></li>
          </ul>
        </div>
      </div>
      <div style={{
        maxWidth:1200, margin:"30px auto 0",
        padding:"22px",
        textAlign:"center",
        fontFamily:"'Bagel Fat One', 'Sigmar One', system-ui",
        fontSize:"clamp(22px, 3.4vw, 44px)",
        color:"var(--red)",
        textShadow:"-2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, 5px 5px 0 var(--yellow), 10px 10px 0 #000",
        transform:"rotate(-1.5deg) skewX(-3deg)",
        letterSpacing:".01em"
      }}>
        YOU WILL GET RUGGED. THE QUESTION IS BY WHOM.
      </div>
      <div className="foot-bottom">
        <span>© 2026 $CLOWNZ — A Comedy Production. Not a security. Not a promise. Definitely a clown.</span>
        <span>BUILT WITH 🤡 AND CONTEMPT FOR VCs</span>
      </div>
    </footer>
  );
}

/* ---------- TWEAKS ---------- */
function ClownzTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="CLOWNZ TWEAKS">
      <TweakSection title="Mascot">
        <TweakRadio
          label="Mood"
          value={tweaks.mood}
          options={[
            { value:"smug", label:"Smug" },
            { value:"scheming", label:"Scheming" },
            { value:"rugged", label:"Rugged" },
          ]}
          onChange={v => setTweak("mood", v)}
        />
        <TweakToggle label="Bigger mascot" value={tweaks.bigMascot} onChange={v => setTweak("bigMascot", v)} />
      </TweakSection>
      <TweakSection title="Vibe">
        <TweakToggle label="Confetti rain" value={tweaks.confetti} onChange={v => setTweak("confetti", v)} />
        <TweakToggle label="Spotlights" value={tweaks.spotlights} onChange={v => setTweak("spotlights", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------- CONFETTI RAIN ---------- */
function ConfettiRain() {
  const pieces = useMemo(() => Array.from({length: 40}, (_, i) => ({
    id: i,
    left: Math.random()*100,
    delay: Math.random()*8,
    dur: 6+Math.random()*8,
    color: ["#ff2d55","#ffd60a","#39ff14","#00e5ff","#ff2bd6","#fff7e8"][i%6],
    rot: Math.random()*360,
    shape: i%3,
  })), []);
  return (
    <div style={{position:"fixed",inset:0,pointerEvents:"none",zIndex:5,overflow:"hidden"}}>
      <style>{`
        @keyframes cfall {
          to { transform: translateY(110vh) rotate(720deg); }
        }
      `}</style>
      {pieces.map(p => (
        <div key={p.id} style={{
          position:"absolute",
          left:p.left+"%", top:"-20px",
          width:p.shape===2?14:10, height:p.shape===2?6:14,
          background:p.color,
          borderRadius:p.shape===0?"50%":p.shape===1?"2px":"1px",
          transform:`rotate(${p.rot}deg)`,
          animation:`cfall ${p.dur}s linear ${p.delay}s infinite`,
          opacity:.85,
        }}/>
      ))}
    </div>
  );
}

/* ---------- APP ---------- */
function App() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "mood": "smug",
    "bigMascot": false,
    "confetti": true,
    "spotlights": true
  }/*EDITMODE-END*/);
  return (
    <div>
      <Nav />
      <Marquee />
      <Hero tweaks={tweaks}/>
      <Marquee />
      <Dashboard />
      <JeetersBoard />
      <Circus />
      <BigTop />
      <HowToBuy />
      <FAQ />
      <Footer />
      {tweaks.confetti && <ConfettiRain />}
      <ClownzTweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

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