// flippy-app.jsx — entrypoint. Composes the whole landing page.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "skipBoot": false,
  "acid": "#b9ff1f",
  "palette": ["#b9ff1f", "#0a0d0a", "#1b240f"],
  "intensity": "high",
  "grid": true,
  "scanlines": true,
  "ca": "",
  "buyUrl": "https://pump.fun"
}/*EDITMODE-END*/;

function applyTweakVars(t) {
  const root = document.documentElement;
  root.style.setProperty("--acid", t.acid);
  // derive related variants from acid hex (just lighten/darken roughly)
  // For now we map to direct overrides
  if (Array.isArray(t.palette)) {
    root.style.setProperty("--acid", t.palette[0]);
    root.style.setProperty("--void", t.palette[1]);
    root.style.setProperty("--olive-deep", t.palette[2]);
  }
  document.body.dataset.grid = t.grid ? "on" : "off";
  document.body.dataset.scanlines = t.scanlines ? "on" : "off";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [booted, setBooted] = useState(false);
  const [bootKey, setBootKey] = useState(0);

  // apply variable changes whenever tweaks change
  useEffect(() => { applyTweakVars(t); }, [t]);

  // hook for tweaks replay button
  useEffect(() => {
    const fn = () => { setBooted(false); setBootKey((k) => k + 1); };
    window.addEventListener("flippy:replay-boot", fn);
    return () => window.removeEventListener("flippy:replay-boot", fn);
  }, []);

  const onBuy = useCallback(() => {
    if (t.buyUrl) window.open(t.buyUrl, "_blank");
  }, [t.buyUrl]);

  return (
    <div style={{ display: "contents" }}>
      <ScrollProgress />
      <CursorLight />
      <LightningStorm />
      <DisableRightClick />
      {!booted && (
        <BootSequence
          key={bootKey}
          skip={t.skipBoot}
          onDone={() => setBooted(true)}
        />
      )}

      <div className={`page ${t.scanlines ? "" : "no-scan"}`}>
        <PaintSplashes />
        <StatusBar />
        <Navbar onBuy={onBuy} />
        <Hero onBuy={onBuy} />

        <MarqueeStrip items={[
          "JOIN THE PSYCHO'S",
          "STAY SHARP. STAY LOUD. STAY PSYCHO.",
          "THE TAKEOVER STARTS NOW",
          "$FLIPPY  /  SOLANA",
          "WE FLIP THE GAME",
          "UNHINGED COMMUNITY"
        ]} />

        <Manifesto />
        <Features />
        <PsychoSquad />
        <Tokenomics />
        <PsychoGear />
        <Roadmap />
        <Faq />

        <MarqueeStrip reverse items={[
          "PSYCHO BY NATURE",
          "LEGEND BY CHOICE",
          "THERE IS NO PLAN B",
          "BUY · HOLD · POST · RAID",
          "★★★★★"
        ]} />

        <FinalCTA onBuy={onBuy} />
      </div>

      <FlippyTweaks t={t} setTweak={setTweak} />
      <AmbientAudio />
    </div>
  );
}

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