/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor */
/* TORI STONE — root app */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variation": "luxe",
  "atmosphere": true,
  "density": "regular",
  "announcement": true,
  "accent": "default"
}/*EDITMODE-END*/;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-variation", t.variation === "bold" ? "bold" : "luxe");
    document.documentElement.setAttribute("data-density", t.density);
    document.documentElement.setAttribute("data-accent", t.accent);
    document.body.setAttribute("data-atmosphere", t.atmosphere ? "on" : "off");
  }, [t.variation, t.density, t.accent, t.atmosphere]);

  return (
    <>
      {t.announcement && <AnnouncementBar />}
      <Nav />
      <Atmosphere />
      <Hero />
      <ReadingOrder />
      <QuotesCarousel />
      <Library />
      <Newsletter />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Direction">
          <TweakRadio
            label="Vibe"
            value={t.variation}
            onChange={(v) => setT("variation", v)}
            options={[
              { value: "luxe", label: "Moody Luxe" },
              { value: "bold", label: "Modern Bold" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Atmosphere">
          <TweakToggle label="Film grain"       value={t.atmosphere}  onChange={(v) => setT("atmosphere", v)} />
          <TweakToggle label="Pre-order banner" value={t.announcement} onChange={(v) => setT("announcement", v)} />
        </TweakSection>

        <TweakSection title="Rhythm">
          <TweakRadio
            label="Density"
            value={t.density}
            onChange={(v) => setT("density", v)}
            options={[
              { value: "tight",   label: "Tight" },
              { value: "regular", label: "Regular" },
              { value: "loose",   label: "Loose" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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