// App composition with Tweaks support

const { createContext, useContext, useEffect: useFx, useState: useSt } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#FF3366", "#FF8C42", "#F5A524"],
  "headline": "Dominate the future of AI search.",
  "subhead": "AI-powered GEO, SEO, automation, and intelligent marketing systems built for the next generation of digital visibility — where discovery happens inside the model, not the SERP.",
  "heroAlign": "center",
  "showGrid": true,
  "showMarquee": true,
  "glow": 100,
  "cycleSpeed": 4500,
  "activeEngine": "auto",
  "headlineStyle": "mixed"
}/*EDITMODE-END*/;

const PALETTES = [
  ["#FF3366", "#FF8C42", "#F5A524"], // Livingstone
];

const TweaksContext = createContext(TWEAK_DEFAULTS);
const useTweaksCtx = () => useContext(TweaksContext);

// Apply palette to CSS vars on document root
function ApplyPalette({ palette, glow, showGrid }) {
  useFx(() => {
    const [blue, violet, cyan] = palette || TWEAK_DEFAULTS.palette;
    const r = document.documentElement.style;
    r.setProperty("--blue", blue);
    r.setProperty("--violet", violet);
    r.setProperty("--cyan", cyan);
    // Derive a lighter blue-2 / violet-2 via color-mix
    r.setProperty("--blue-2", `color-mix(in oklab, ${blue} 70%, white 30%)`);
    r.setProperty("--violet-2", `color-mix(in oklab, ${violet} 70%, white 30%)`);
    r.setProperty("--grad-1", `linear-gradient(135deg, ${blue} 0%, ${violet} 100%)`);
    r.setProperty("--grad-2", `linear-gradient(135deg, ${cyan} 0%, ${blue} 50%, ${violet} 100%)`);
    // Body glow
    const g = (glow ?? 60) / 100;
    document.body.style.background =
      `radial-gradient(1200px 600px at 50% -200px, ${blue}${Math.round(g * 60).toString(16).padStart(2, "0")}, transparent 60%),` +
      `radial-gradient(900px 500px at 90% 10%, ${violet}${Math.round(g * 40).toString(16).padStart(2, "0")}, transparent 60%),` +
      `var(--bg)`;
  }, [palette?.[0], palette?.[1], palette?.[2], glow]);

  useFx(() => {
    document.body.classList.toggle("no-grid", !showGrid);
  }, [showGrid]);

  return null;
}

const TweaksUI = ({ t, setTweak }) => (
  <TweaksPanel title="Tweaks">
    <TweakSection label="Brand" />
    <TweakColor
      label="Palette"
      value={t.palette}
      options={PALETTES}
      onChange={(v) => setTweak("palette", v)}
    />
    <TweakSlider
      label="Glow intensity"
      value={t.glow}
      min={0} max={100} step={5} unit="%"
      onChange={(v) => setTweak("glow", v)}
    />
    <TweakToggle
      label="Background grid"
      value={t.showGrid}
      onChange={(v) => setTweak("showGrid", v)}
    />

    <TweakSection label="Hero" />
    <TweakRadio
      label="Alignment"
      value={t.heroAlign}
      options={["center", "left"]}
      onChange={(v) => setTweak("heroAlign", v)}
    />
    <TweakRadio
      label="Style"
      value={t.headlineStyle}
      options={["mixed", "plain"]}
      onChange={(v) => setTweak("headlineStyle", v)}
    />
    <TweakText
      label="Headline"
      value={t.headline}
      onChange={(v) => setTweak("headline", v)}
    />
    <TweakText
      label="Subhead"
      value={t.subhead}
      onChange={(v) => setTweak("subhead", v)}
      multiline
    />

    <TweakSection label="AI monitor" />
    <TweakSelect
      label="Active engine"
      value={t.activeEngine}
      options={[
        { value: "auto", label: "Auto-cycle" },
        { value: "perplexity", label: "Perplexity" },
        { value: "gpt", label: "ChatGPT" },
        { value: "gemini", label: "Gemini" },
      ]}
      onChange={(v) => setTweak("activeEngine", v)}
    />
    <TweakSlider
      label="Cycle speed"
      value={t.cycleSpeed}
      min={1500} max={9000} step={500} unit="ms"
      onChange={(v) => setTweak("cycleSpeed", v)}
    />

    <TweakSection label="Sections" />
    <TweakToggle
      label="Clients marquee"
      value={t.showMarquee}
      onChange={(v) => setTweak("showMarquee", v)}
    />
  </TweaksPanel>
);

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

  useFx(() => {
    if (!window.location.hash) return;
    const id = window.location.hash.slice(1);
    window.setTimeout(() => {
      document.getElementById(id)?.scrollIntoView({ block: "start" });
    }, 50);
  }, []);

  return (
    <TweaksContext.Provider value={t}>
      <ApplyPalette palette={t.palette} glow={t.glow} showGrid={t.showGrid} />
      <Nav />
      <Hero />
      {t.showMarquee && <ClientsStrip />}
      <About />
      <Services />
      <Geo />
      <Analytics />
      <CaseStudies />
      <Stack />
      <Contact />
      <Footer />
      <TweaksUI t={t} setTweak={setTweak} />
    </TweaksContext.Provider>
  );
};

// Expose context hook
window.useTweaksCtx = useTweaksCtx;

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