/* global React, ReactDOM,
   TopBar, Hero, WhatIs, Collab, Directions, Prizes, Experts, Timeline, FAQ, Partners, Footer,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "rose-blue",
  "accent": "rose",
  "hero": "type-led",
  "mosaicDensity": 0.45,
  "showMosaic": true,
  "darkHero": false
}/*EDITMODE-END*/;

const PALETTES = {
  "rose-blue":  { bg: "#ECE9E2", deep: "#E4E0D7", paper: "#F8F6F1", ink: "#15151A", blue: "oklch(0.82 0.055 240)", rose: "oklch(0.84 0.055 12)" },
  "cool-paper": { bg: "#E8EAEA", deep: "#DDE1E2", paper: "#F5F6F6", ink: "#0F1417", blue: "oklch(0.82 0.05 230)", rose: "oklch(0.82 0.05 25)" },
  "warm":       { bg: "#EFEAD9", deep: "#E5E0CD", paper: "#F8F4E8", ink: "#1A1812", blue: "oklch(0.82 0.06 210)", rose: "oklch(0.85 0.06 30)" },
  "graphite":   { bg: "#1A1A1F", deep: "#22232A", paper: "#F2EFE9", ink: "#F2EFE9", blue: "oklch(0.72 0.07 235)", rose: "oklch(0.78 0.08 12)" },
};

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

  // Apply palette as CSS vars on the root
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES["rose-blue"];
    const r = document.documentElement;
    r.style.setProperty("--bg", p.bg);
    r.style.setProperty("--bg-deep", p.deep);
    r.style.setProperty("--paper", p.paper);
    r.style.setProperty("--ink", p.ink);
    r.style.setProperty("--blue", p.blue);
    r.style.setProperty("--rose", p.rose);
    if (tweaks.palette === "graphite") {
      r.style.setProperty("--bg-card", "#26272E");
      r.style.setProperty("--ink-2", "#D8D5CF");
      r.style.setProperty("--mute", "#8C8A85");
      r.style.setProperty("--mute-2", "#5F5E58");
      r.style.setProperty("--line", "rgba(242,239,233,0.12)");
      r.style.setProperty("--line-soft", "rgba(242,239,233,0.06)");
      r.style.setProperty("--hairline", "rgba(242,239,233,0.18)");
    } else {
      r.style.setProperty("--bg-card", "#F4F1EB");
      r.style.setProperty("--ink-2", "#2D2C2F");
      r.style.setProperty("--mute", "#6E6B64");
      r.style.setProperty("--mute-2", "#93908A");
      r.style.setProperty("--line", "rgba(21,21,26,0.12)");
      r.style.setProperty("--line-soft", "rgba(21,21,26,0.06)");
      r.style.setProperty("--hairline", "rgba(21,21,26,0.18)");
    }
  }, [tweaks.palette]);

  // Hide all mosaics when toggled off
  React.useEffect(() => {
    document.documentElement.style.setProperty("--mosaic-display", tweaks.showMosaic ? "block" : "none");
    document.querySelectorAll(".pixel-mosaic").forEach((el) => {
      el.style.display = tweaks.showMosaic ? "block" : "none";
    });
  }, [tweaks.showMosaic]);

  return (
    <>
      <TopBar />
      <Hero />
      <WhatIs />
      <Collab />
      <Directions />
      <Prizes />
      <Experts />
      <Timeline />
      <FAQ />
      <Partners />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Палитра">
          <TweakRadio
            label="База"
            value={tweaks.palette}
            options={[
              { value: "rose-blue", label: "Rose+Blue" },
              { value: "cool-paper", label: "Cool" },
              { value: "warm", label: "Warm" },
              { value: "graphite", label: "Dark" },
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection label="Декор">
          <TweakToggle
            label="Pixel mosaic"
            value={tweaks.showMosaic}
            onChange={(v) => setTweak("showMosaic", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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