// ElevAI — root app
const { useEffect } = React;

const ACCENTS = {
  voltage: { accent: "#D4FE08", ink: "#1A2400", deep: "#4A5C00", label: "Voltage" },
  cobalt:  { accent: "#7C9BFF", ink: "#0A1340", deep: "#1F2D80", label: "Cobalt" },
  coral:   { accent: "#FF8A65", ink: "#3A1408", deep: "#7A2A14", label: "Coral" },
  mint:    { accent: "#7DE0B0", ink: "#0E2C1F", deep: "#1F6240", label: "Mint" },
};

function applyTweaks(t) {
  const html = document.documentElement;
  html.setAttribute("data-theme", t.theme);
  html.setAttribute("data-hero", t.hero);
  html.setAttribute("data-density", t.density);
  const a = ACCENTS[t.accent] || ACCENTS.voltage;
  html.style.setProperty("--accent", a.accent);
  html.style.setProperty("--accent-ink", a.ink);
  html.style.setProperty("--accent-deep", a.deep);
}

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

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <>
      <Header
        theme={t.theme}
        onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")}
      />
      <main>
        <Hero />
        <Services />
        <Process />
        <CohortBanner />
        <FAQ />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent"
          value={ACCENTS[t.accent].accent}
          options={Object.values(ACCENTS).map((a) => a.accent)}
          onChange={(hex) => {
            const k = Object.keys(ACCENTS).find((k) => ACCENTS[k].accent === hex);
            if (k) setTweak("accent", k);
          }}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Hero"
          value={t.hero}
          options={["editorial", "centered"]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["airy", "tight"]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </>
  );
}

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