// app.jsx — main composition

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "crtIntensity": 0.6,
  "chartSeverity": 1,
  "skipBoot": false,
  "soundEnabled": false,
  "theme": "red"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booted, setBooted] = React.useState(t.skipBoot);
  const [rebooting, setRebooting] = React.useState(false);
  const [bsodStep, setBsodStep] = React.useState(0);

  // CRT intensity → CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty('--crt-intensity', t.crtIntensity);
  }, [t.crtIntensity]);

  // theme color
  React.useEffect(() => {
    document.body.classList.remove('theme-red', 'theme-amber', 'theme-green');
    document.body.classList.add(`theme-${t.theme}`);
  }, [t.theme]);

  const onBootDone = () => setBooted(true);
  const onBootSkip = () => {
    setBooted(true);
    setTweak('skipBoot', true);
  };

  const triggerReboot = () => {
    setRebooting(true);
    setBsodStep(0);
    document.body.classList.add('glitching');
    setTimeout(() => { setBsodStep(1); }, 1200);
    setTimeout(() => { setBsodStep(2); }, 2600);
    setTimeout(() => {
      // cycle theme
      const order = ['red', 'amber', 'green'];
      const next = order[(order.indexOf(t.theme) + 1) % order.length];
      setTweak('theme', next);
      document.body.classList.remove('glitching');
      setRebooting(false);
      setBsodStep(0);
      window.scrollTo({ top: 0, behavior: 'instant' });
    }, 4400);
  };

  const goSection = (id) => {
    const map = {
      monitor: 'tokenomics',
      cans: 'cope',
      mug: 'about',
      papers: 'roadmap',
      phone: 'howtobuy',
    };
    const target = map[id] || id;
    document.getElementById(target)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // keyboard nav: any key on hero scrolls down
  React.useEffect(() => {
    const onKey = (e) => {
      if (!booted || rebooting) return;
      if (e.key === ' ' || e.key === 'PageDown') {
        e.preventDefault();
        window.scrollBy({ top: window.innerHeight * 0.85, behavior: 'smooth' });
      } else if (e.key === 'PageUp') {
        e.preventDefault();
        window.scrollBy({ top: -window.innerHeight * 0.85, behavior: 'smooth' });
      } else if (e.key === 'Home') {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
      } else if (e.key === 'End') {
        e.preventDefault();
        window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [booted, rebooting]);

  return (
    <>
      {/* CRT overlay */}
      <div className="crt-shell">
        <div className="crt-scanlines"/>
        <div className="crt-rgb"/>
        <div className="crt-flicker"/>
        <div className="crt-vignette"/>
      </div>

      {!booted && <BootSequence onComplete={onBootDone} onSkip={onBootSkip}/>}

      {/* Marquee at top */}
      <div className="marquee" data-screen-label="00 marquee">
        <div className="marquee-track">
          <span className="dot">●</span><span>$RESTART · THE OFFICIAL COIN OF NOT BEING OK</span>
          <span className="dot">●</span><span>NO TEAM ALLOC · LP BURNED · 100% ON-CHAIN COPE</span>
          <span className="dot">●</span><span>WAGMI THROUGH GRITTED TEETH</span>
          <span className="dot">●</span><span>WIFE LEFT · KIDS LEFT · YOU CAN STILL BUY</span>
          <span className="dot">●</span><span>SOLANA · 0.0000420 · -89.4% (24h)</span>
          <span className="dot">●</span><span>$RESTART · THE OFFICIAL COIN OF NOT BEING OK</span>
        </div>
      </div>

      {/* HERO */}
      <section className="hero" data-screen-label="01 hero">
        <div className="hero-copy">
          <div className="eyebrow">// IT IS 4:17 AM</div>
          <h1>
            YOU LOST EVERYTHING.<br/>
            <span className="red-glow">PRESS START</span><br/>
            TO BEGIN AGAIN.
          </h1>
          <p style={{ color: 'var(--ink-dim)', fontSize: 19, maxWidth: 520, marginBottom: 28, lineHeight: 1.5 }}>
            $RESTART is the on-chain factory reset. The wife took the kids. The market took the rest. The coin is the cope, the joke, the prayer. Run it back.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="#howtobuy" className="btn-doom">BUY $RESTART</a>
            <a href="#tokenomics" className="btn-doom" style={{ borderColor: 'oklch(0.4 0 0)' }}>READ THE PAIN</a>
          </div>
          <div style={{ marginTop: 30, fontFamily: "'Press Start 2P', monospace", fontSize: 8, color: 'var(--ink-faint)', letterSpacing: '0.1em' }}>
            ▸ PRESS [SPACE] TO CONTINUE
          </div>
        </div>
        <div>
          <CrashChart severity={t.chartSeverity} running={true}/>
        </div>
      </section>

      {/* About / lore — image left, text right; image stretches to text height */}
      <section id="about" data-screen-label="02 about">
        <div className="wrap lore-layout">
          <div className="lore-img-wrap">
            <img src="images/lore-doomer.png" alt="" />
          </div>
          <div>
            <div className="eyebrow">// LORE.MD</div>
            <h2 className="red-glow">THE GUY</h2>
            <p style={{ marginTop: 18, color: 'var(--ink-dim)', fontSize: 19, lineHeight: 1.6 }}>
              He bought the top in 2021. Sold the bottom in 2022. Bought the top again in 2024 because "it's different this time." It was not different.
            </p>
            <p style={{ marginTop: 14, color: 'var(--ink-dim)', fontSize: 19, lineHeight: 1.6 }}>
              His wife took the kids and the dog. The dog is doing well, he is told. He sits in a single room with one chair, one monitor, and a candle chart that will not stop falling.
            </p>
            <p style={{ marginTop: 14, color: 'var(--ink-dim)', fontSize: 19, lineHeight: 1.6 }}>
              At 4:17 AM, he opens a new wallet. He types the contract address one character at a time. He whispers the word that means a thing only one of us can mean.
            </p>
            <p style={{ marginTop: 14, color: 'var(--red-glow)', fontSize: 19, lineHeight: 1.6 }}>
              He whispers: <strong>restart.</strong>
            </p>
          </div>
        </div>
      </section>

      <StatsStrip />

      {/* DOOMER ROOM */}
      <section id="room" data-screen-label="02 room">
        <div className="wrap">
          <div className="eyebrow">// SCENE.001 / DARK_APARTMENT</div>
          <h2 className="red-glow">LOOK AROUND. THIS IS YOUR LIFE NOW.</h2>
          <p style={{ marginTop: 14, color: 'var(--ink-dim)', maxWidth: 640 }}>
            Every object is a section. The monitor is tokenomics. The cans are the cope wall. The papers are the roadmap. The phone is how to buy. You will live here for a while.
          </p>
          <div
            className="apt-scene"
            style={{ marginTop: 32 }}
            onMouseMove={(e) => {
              const el = e.currentTarget;
              const r = el.getBoundingClientRect();
              const x = ((e.clientX - r.left) / r.width  - 0.5) * 2;
              const y = ((e.clientY - r.top)  / r.height - 0.5) * 2;
              el.style.setProperty('--mx', String(x));
              el.style.setProperty('--my', String(y));
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.setProperty('--mx', '0');
              e.currentTarget.style.setProperty('--my', '0');
            }}
          >
            <div className="apt-scene-inner">
              <img src="images/dark-apartment.png" alt="dark apartment" />
              {[
                { id: 'photo',    label: 'LORE',         section: 'about',      left: '8%',  top: '12%', w: '14%', h: '26%' },
                { id: 'monitor',  label: 'TOKENOMICS',   section: 'tokenomics', left: '34%', top: '10%', w: '34%', h: '46%' },
                { id: 'box',      label: 'COPE WALL',    section: 'cope',       left: '4%',  top: '60%', w: '20%', h: '32%' },
                { id: 'phone',    label: 'HOW TO BUY',   section: 'howtobuy',   left: '36%', top: '76%', w: '16%', h: '16%' },
                { id: 'papers',   label: 'ROADMAP',      section: 'roadmap',    left: '64%', top: '68%', w: '30%', h: '28%' },
              ].map((h) => (
                <button
                  key={h.id}
                  className="apt-hotspot"
                  style={{ left: h.left, top: h.top, width: h.w, height: h.h }}
                  onClick={() => goSection(h.section)}
                  aria-label={h.label}
                >
                  <span className="apt-tip">▸ {h.label}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <Tokenomics />
      <Roadmap />
      <HowToBuy />
      <CopeWall />

      <FAQ />

      {/* LET'S RESTART — doomer moments grid (10 wojak scenes) */}
      <section id="moments" data-screen-label="07 moments">
        <div className="wrap">
          <div className="eyebrow">// MOMENTS.LOG</div>
          <h2 className="red-glow">LET'S RESTART.</h2>
          <p style={{ marginTop: 14, color: 'var(--ink-dim)', maxWidth: 640 }}>
            Every guy has a chapter that looks like this. Pick yours. Burn it. Begin again.
          </p>
          <div className="restart-grid">
            {[
              { src: 'images/restart-01.png', label: 'SYNERGY // 11:42 AM' },
              { src: 'images/restart-02.png', label: 'PAWN SHOP // 22:08' },
              { src: 'images/restart-03.png', label: 'MIRROR // 06:13' },
              { src: 'images/restart-04.png', label: 'SHOWER // 23:51' },
              { src: 'images/restart-05.png', label: 'MISSED CALL // 03:41' },
              { src: 'images/restart-06.png', label: 'NURSERY // 02:18' },
              { src: 'images/restart-07.png', label: 'OPEN ALL NIGHT // 04:17' },
              { src: 'images/restart-08.png', label: 'BUS STOP // 21:45' },
              { src: 'images/restart-09.png', label: 'FLOOR // 04:02' },
              { src: 'images/restart-10.png', label: 'DINNER // 22:30' },
            ].map((m, i) => (
              <div key={i} className="restart-frame" data-label={m.label}>
                <img src={m.src} alt="" />
              </div>
            ))}
          </div>
        </div>
      </section>

      <RestartButton onTrigger={triggerReboot} />

      <footer data-screen-label="08 footer">
        <div style={{ marginBottom: 14 }}>
          <a href="#">X / TWITTER</a> · <a href="#">DEXSCREENER</a>
        </div>
        <div>$RESTART · 2026 · NOTHING IS FINANCIAL ADVICE · NOT YOUR CHILDREN, NOT YOUR COIN</div>
        <div style={{ marginTop: 8, color: 'var(--ink-faint)', fontSize: 14 }}>
          built at 4:17 am · all art original · placeholder room art will be replaced
        </div>
      </footer>

      {/* REBOOT OVERLAY */}
      {rebooting && (
        <div className="reboot-overlay">
          {bsodStep === 0 && (
            <div style={{ textAlign: 'center', color: 'var(--red-glow)', fontFamily: "'Press Start 2P', monospace", fontSize: 14, letterSpacing: '0.1em' }}>
              <div className="glitching">SHUTTING DOWN</div>
              <div style={{ marginTop: 18, fontSize: 10, color: 'var(--ink-dim)' }}>saving cope.dat ...</div>
            </div>
          )}
          {bsodStep === 1 && (
            <div className="reboot-bsod">
              <h2>RESTART</h2>
              <div style={{ marginBottom: 18 }}>A fatal hope has been encountered. Your portfolio has performed an illegal recovery.</div>
              <div style={{ marginBottom: 18 }}>* Press any key to terminate this life.<br/>* Press CTRL+ALT+DEL to terminate the next one too.</div>
              <div style={{ marginTop: 28, fontSize: 16, opacity: 0.8 }}>STOP: 0x0000RESTART (0xDEADBAG, 0xWIFEGON3, 0xCHILD$$$, 0xCRTGLOW)</div>
              <div style={{ marginTop: 28, fontSize: 16 }}>Beginning dump of physical hopes ...</div>
              <div style={{ marginTop: 8 }}>Physical hopes dumped. Contact your sponsor.</div>
              <div style={{ marginTop: 28 }}>Press any key to <span className="blink">_</span></div>
            </div>
          )}
          {bsodStep === 2 && (
            <div style={{ textAlign: 'center', color: 'var(--ink)', fontFamily: "'VT323', monospace", fontSize: 22 }}>
              <div className="amber-glow" style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 12, marginBottom: 24 }}>REINCARNATING ...</div>
              <div className="boot-cursor"></div>
            </div>
          )}
        </div>
      )}

      <TweaksPanel title="$RESTART · TWEAKS">
        <TweakSection label="System">
          <TweakSlider label="CRT intensity" value={t.crtIntensity} min={0} max={1.4} step={0.05} unit="" onChange={(v) => setTweak('crtIntensity', v)} />
          <TweakSlider label="Chart severity" value={t.chartSeverity} min={0.4} max={2.4} step={0.1} unit="x" onChange={(v) => setTweak('chartSeverity', v)} />
          <TweakRadio label="Colorway" value={t.theme} options={['red','amber','green']} onChange={(v) => setTweak('theme', v)} />
        </TweakSection>
        <TweakSection label="Boot">
          <TweakToggle label="Skip boot intro" value={t.skipBoot} onChange={(v) => setTweak('skipBoot', v)} />
          <TweakButton label="REPLAY BOOT" secondary onClick={() => { setBooted(false); setTweak('skipBoot', false); }} />
        </TweakSection>
        <TweakSection label="Easter eggs">
          <TweakButton label="TRIGGER REBOOT" onClick={triggerReboot} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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