// app.jsx — composition + tweaks for The Pit
const { useState: useStateA, useEffect: useEffectA } = React;

// Accent options. Default is electric safety yellow #FFCB05 (brief-locked).
const ACCENTS = {
  "Safety Yellow": "#FFCB05",
  "Hot Red":       "#FF3B2E",
  "Acid Lime":     "#C6F833",
  "Ice White":     "#F4EEDC",
};

const FONTS = {
  "Archivo Black": "'Archivo Black', sans-serif",
  "Archivo X-Bold": "'Archivo', sans-serif",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Safety Yellow",
  "headlineFont": "Archivo Black",
  "heroLayout": "split",
  "marquee": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen] = useStateA(false);

  useEffectA(() => {
    const c = ACCENTS[t.accent] || ACCENTS["Safety Yellow"];
    document.documentElement.style.setProperty("--yellow", c);
  }, [t.accent]);

  useEffectA(() => {
    document.documentElement.style.setProperty("--font-display", FONTS[t.headlineFont] || FONTS["Archivo Black"]);
  }, [t.headlineFont]);

  const openBook = () => setBookOpen(true);

  return (
    <>
      <Nav onBook={openBook} />
      <Hero onBook={openBook} layout={t.heroLayout} showMarquee={t.marquee} />
      <Cuts onBook={openBook} />
      <Numbers />
      <NextAvailable onBook={openBook} />
      <Visit onBook={openBook} />
      <Footer onBook={openBook} />

      <NextAvailableModal open={bookOpen} onClose={() => setBookOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={ACCENTS[t.accent]} options={Object.values(ACCENTS)}
          onChange={(v) => setTweak("accent", Object.keys(ACCENTS).find((k) => ACCENTS[k] === v) || "Safety Yellow")} />
        <TweakRadio label="Headline font" value={t.headlineFont} options={Object.keys(FONTS)} onChange={(v) => setTweak("headlineFont", v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={t.heroLayout} options={["split", "stacked"]} onChange={(v) => setTweak("heroLayout", v)} />
        <TweakToggle label="Marquee background" value={t.marquee} onChange={(v) => setTweak("marquee", v)} />
      </TweaksPanel>
    </>
  );
}

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