// sections.jsx — content sections (tokenomics, roadmap, how to buy, cope wall, faq, restart)

function StatsStrip() {
  const [days, setDays] = React.useState(0);
  const [holders, setHolders] = React.useState(4287);
  const [losses, setLosses] = React.useState(14213422);
  const [rugs, setRugs] = React.useState(127);

  React.useEffect(() => {
    const t = setInterval(() => {
      setHolders((h) => h + (Math.random() < 0.6 ? 1 : 0));
      setLosses((l) => l + Math.floor(20 + Math.random() * 200));
      if (Math.random() < 0.02) setDays(0);
    }, 1500);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="stats-strip">
      <div className="stat">
        <span className="v tabular">{days}</span>
        <span className="k">DAYS SINCE LAST RUG</span>
      </div>
      <div className="stat">
        <span className="v tabular">{holders.toLocaleString()}</span>
        <span className="k">HOLDERS WHO RESTARTED</span>
      </div>
      <div className="stat">
        <span className="v tabular">${(losses/1e6).toFixed(2)}M</span>
        <span className="k">COMBINED LOSSES REPRESENTED</span>
      </div>
      <div className="stat">
        <span className="v tabular">{rugs}</span>
        <span className="k">PRIOR LIVES ENDED</span>
      </div>
    </div>
  );
}

function CopyCA() {
  const [copied, setCopied] = React.useState(false);
  const ca = 'restartXXXXXrestartXXXXXrestartXXXXXrestartXXXX';
  const onCopy = () => {
    navigator.clipboard?.writeText(ca);
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };
  return (
    <div className="ca-box">
      <span style={{ color: 'var(--red-glow)', fontFamily: "'Press Start 2P', monospace", fontSize: 8, letterSpacing: '0.08em' }}>CA</span>
      <span className="ca-val tabular">{ca}</span>
      <button className="ca-copy" onClick={onCopy}>{copied ? 'COPIED' : 'COPY'}</button>
    </div>
  );
}

function Tokenomics() {
  return (
    <section id="tokenomics">
      <div className="wrap">
        <div className="eyebrow">// TOKENOMICS.SYS</div>
        <h2 className="red-glow">THE NUMBERS THAT WILL ALSO RUIN YOU</h2>
        <p style={{ marginTop: 14, color: 'var(--ink-dim)', maxWidth: 640 }}>
          A clean cap. No team allocation (we lost ours). LP burned because we don't have keys to anything anymore anyway.
        </p>
        <div className="grid-cards">
          <div className="card">
            <span className="num">1,000,000,000</span>
            <span className="lbl">TOTAL SUPPLY</span>
            <p className="desc">One billion. The same number you mentally added to your portfolio every time you bought a pre-sale.</p>
          </div>
          <div className="card">
            <span className="num">0% / 0%</span>
            <span className="lbl">BUY / SELL TAX</span>
            <p className="desc">No tax. The IRS has been notified that there is nothing left to tax.</p>
          </div>
          <div className="card">
            <span className="num">100%</span>
            <span className="lbl">LP BURNED</span>
            <p className="desc">Liquidity locked forever. So is the dev's emotional state.</p>
          </div>
          <div className="card">
            <span className="num">0%</span>
            <span className="lbl">TEAM WALLET</span>
            <p className="desc">We took our team allocation in life lessons and child support owed.</p>
          </div>
        </div>
        <CopyCA />
      </div>
    </section>
  );
}

function Roadmap() {
  return (
    <section id="roadmap">
      <div className="wrap">
        <div className="eyebrow">// ROADMAP.LOG</div>
        <h2 className="red-glow">PHASE LOG</h2>
        <p style={{ marginTop: 14, color: 'var(--ink-dim)', maxWidth: 640 }}>
          We don't believe in roadmaps. Here is one anyway because they make you click buy.
        </p>
        <div className="terminal">
          <div className="row"><span className="prompt">$</span> phase --status</div>
          <div className="row"><span className="ok">[ OK ]</span> PHASE 0 · acquire problems · <span className="dim">complete</span></div>
          <div className="row"><span className="ok">[ OK ]</span> PHASE 1 · launch &amp; LP burn · <span className="dim">complete</span></div>
          <div className="row"><span className="ok">[ OK ]</span> PHASE 2 · CT raid + first rug attempt repelled · <span className="dim">complete</span></div>
          <div className="row"><span className="pending">[WORK]</span> PHASE 3 · 10k holders / CMC / CG · <span className="dim">in progress</span></div>
          <div className="row"><span className="pending">[WORK]</span> PHASE 4 · doomer arcade game (web) · <span className="dim">scoped</span></div>
          <div className="row"><span className="pending">[····]</span> PHASE 5 · CEX listing or therapy · <span className="dim">whichever first</span></div>
          <div className="row"><span className="pending">[····]</span> PHASE 6 · win the kids back · <span className="dim">stretch goal</span></div>
          <div className="row"><span className="err">[FAIL]</span> PHASE 7 · become rich · <span className="dim">retry / abort</span></div>
          <div className="row" style={{ marginTop: 14 }}><span className="prompt">$</span> <span className="boot-cursor" style={{ background: 'var(--green)' }}></span></div>
        </div>
      </div>
    </section>
  );
}

function HowToBuy() {
  const steps = [
    { n: '01', t: 'GET A WALLET', d: 'Install a Solana wallet. Phantom, Solflare — whatever your last therapist did not warn you about.' },
    { n: '02', t: 'FUND IT WITH SOL', d: 'Buy SOL on a CEX, send it. Or sell something. The TV. The ring. We have all done it.' },
    { n: '03', t: 'GO TO A DEX', d: 'Open Raydium or pump.fun. Paste the contract address above. Verify it character by character. We will wait.' },
    { n: '04', t: 'SLIPPAGE = 1%', d: 'Higher if it fails. Lower if you still have hope. Confirm the swap.' },
    { n: '05', t: 'WAIT', d: 'Tx confirms. You are now a holder. Take a screenshot. Frame it next to the divorce papers.' },
  ];
  return (
    <section id="howtobuy">
      <div className="wrap">
        <div className="eyebrow">// HOWTOBUY.TXT</div>
        <h2 className="red-glow">FIVE STEPS TO YOUR NEXT MISTAKE</h2>
        <div className="steps">
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CopeWall() {
  const messages = [
    { who: 'ANON_4AM', m: 'down 92% but spiritually up 4%. we restart.' },
    { who: 'EXITLIQ',  m: 'told my wife it was a long term hold. she is a long term ex now.' },
    { who: 'WAGMINOT', m: 'sold my plasma to add. felt nothing. green candle though.' },
    { who: 'JPEG_ORPHAN', m: 'kid asked what i do for work. said "i restart things." not a lie.' },
    { who: 'CRT_GHOST', m: 'this UI is the only warm light in my apartment thank you' },
    { who: 'RUGSURVIVOR_77', m: 'eighth coin this month. first one i believe in. (i say this every time)' },
    { who: 'NIGHTSHIFT', m: 'AC hum + crashing chart + cold pizza = my love language' },
    { who: 'DOOMERMAXI', m: 'i dont need a green candle. i need a hug. but a green candle would help.' },
    { who: 'ANON_2008', m: 'started in 2017. still starting. RESTART.' },
  ];
  return (
    <section id="cope">
      <div className="wrap">
        <div className="eyebrow">// COPE_WALL.DB</div>
        <h2 className="red-glow">THE WALL OF COPE</h2>
        <p style={{ marginTop: 14, color: 'var(--ink-dim)', maxWidth: 640 }}>
          Anonymous notes from holders. Read at your own emotional discretion.
        </p>
        <div className="cope-wall">
          {messages.map((m, i) => (
            <div className="cope-msg" key={i}>
              <div className="who">@{m.who}</div>
              <div>"{m.m}"</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Is this financial advice?', a: 'No. It is the opposite of advice. It is what happens when you ignore advice for ten years.' },
    { q: 'Will it pump?', a: 'It is a Solana memecoin. It will do all four directions in a single afternoon.' },
    { q: 'Why a doomer aesthetic?', a: 'Because optimism in this market is a tell. We charge admission to honesty.' },
    { q: 'Can I get my money back?', a: 'No. But you can get a different amount of money back, in either direction. Such is the way.' },
  ];
  return (
    <section id="faq">
      <div className="wrap">
        <div className="eyebrow">// FAQ.HLP</div>
        <h2 className="red-glow">QUESTIONS NOBODY WANTS THE ANSWER TO</h2>
        <div className="grid-cards" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
          {items.map((it, i) => (
            <div className="card" key={i}>
              <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: 'var(--amber)', marginBottom: 10, letterSpacing: '0.04em' }}>?</div>
              <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: 'var(--ink)', marginBottom: 10, lineHeight: 1.5, letterSpacing: '0.02em' }}>{it.q}</div>
              <div style={{ fontFamily: "'VT323', monospace", fontSize: 17, color: 'var(--ink-dim)', lineHeight: 1.5 }}>&gt; {it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RestartButton({ onTrigger }) {
  return (
    <section className="restart-section" id="restart">
      <div className="wrap">
        <div className="eyebrow">// SYSTEM</div>
        <h2 className="red-glow" style={{ marginBottom: 18 }}>WHEN IT GETS TOO BAD</h2>
        <p style={{ color: 'var(--ink-dim)', maxWidth: 540, margin: '0 auto 56px' }}>
          A factory reset. New colorway, new stats, same pain. Press it. We dare you.
        </p>
        <button className="restart-btn" onClick={onTrigger}>RESTART</button>
        <div style={{ marginTop: 64, fontFamily: "'Press Start 2P', monospace", fontSize: 8, color: 'var(--ink-faint)', letterSpacing: '0.1em' }}>
          ⚠ THIS WILL REINCARNATE THE SITE
        </div>
      </div>
    </section>
  );
}

window.StatsStrip = StatsStrip;
window.CopyCA = CopyCA;
window.Tokenomics = Tokenomics;
window.Roadmap = Roadmap;
window.HowToBuy = HowToBuy;
window.CopeWall = CopeWall;
window.FAQ = FAQ;
window.RestartButton = RestartButton;