/* global React, ReactDOM, Sections, useReveal, useCursorTracking */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm",
  "typePair": "warm",
  "heroLayout": "split",
  "gridLayout": "uniform",
  "darkMode": false
}/*EDITMODE-END*/;

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

  useReveal();
  useCursorTracking();

  // Apply tokens
  useEffect(() => {
    const root = document.documentElement;
    root.dataset.palette = t.palette;
    root.dataset.type = t.typePair;
    root.dataset.hero = t.heroLayout;
    root.dataset.grid = t.gridLayout;
    root.dataset.mode = t.darkMode ? "dark" : "light";
  }, [t]);

  // Easter egg: type "party" anywhere
  useEffect(() => {
    let buf = "";
    const onKey = (e) => {
      buf = (buf + e.key.toLowerCase()).slice(-5);
      if (buf === "party") {
        document.documentElement.dataset.egg = document.documentElement.dataset.egg === "on" ? "off" : "on";
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const { Nav, Hero, Marquee, AppsGrid, Featured, Stats, About, Testimonials, Newsletter, Contact, Footer } = Sections;

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <AppsGrid />
      <Featured />
      <Stats />
      <About />
      <Testimonials />
      <Newsletter />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Theme"
          value={t.palette}
          options={[
            { value: "warm", colors: ["#F4EFE6", "#1F1A14", "#C25B3F", "#6B8266"] },
            { value: "playful", colors: ["#FAFAF7", "#0F0F0F", "#FF5A4E", "#2E6FF2"] },
            { value: "editorial", colors: ["#EAE6DD", "#14213D", "#C9A227", "#A14A2C"] },
            { value: "forest", colors: ["#ECE9DF", "#1A2A1F", "#8B5A2B", "#5E7C5A"] },
          ].map(o => o.colors)}
          onChange={(v) => {
            const idx = [
              ["#F4EFE6","#1F1A14","#C25B3F","#6B8266"],
              ["#FAFAF7","#0F0F0F","#FF5A4E","#2E6FF2"],
              ["#EAE6DD","#14213D","#C9A227","#A14A2C"],
              ["#ECE9DF","#1A2A1F","#8B5A2B","#5E7C5A"],
            ].findIndex(p => p[0] === v[0]);
            const names = ["warm","playful","editorial","forest"];
            setTweak("palette", names[idx] || "warm");
          }}
        />
        <TweakToggle label="Dark mode" value={t.darkMode}
          onChange={(v) => setTweak("darkMode", v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Type pair" value={t.typePair}
          options={[
            { value: "warm",      label: "Instrument · Geist · JBM" },
            { value: "modern",    label: "Fraunces · Geist · JBM" },
            { value: "quirky",    label: "Boldonse · Space Grotesk" },
            { value: "editorial", label: "Newsreader · Inter Tight" },
          ]}
          onChange={(v) => setTweak("typePair", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Hero" value={t.heroLayout}
          options={["split", "centered", "stacked"]}
          onChange={(v) => setTweak("heroLayout", v)} />
        <TweakSelect label="Apps grid" value={t.gridLayout}
          options={[
            { value: "masonry", label: "Masonry (varied widths)" },
            { value: "uniform", label: "Uniform 3-up" },
            { value: "rows",    label: "Editorial rows" },
          ]}
          onChange={(v) => setTweak("gridLayout", v)} />

        <TweakSection label="Easter egg" />
        <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 10.5, color: "rgba(41,38,27,.6)", lineHeight: 1.5 }}>
          Try typing <b>party</b> anywhere on the page.
        </div>
      </TweaksPanel>
    </>
  );
}

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