/* ============================================================
   main.jsx — assemble, tweaks, mount
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "centered",
  "storyVariant": "cinematic",
  "richMotion": true,
  "glow": ["oklch(0.55 0.21 264 / 0.5)", "oklch(0.72 0.13 188 / 0.42)"]
}/*EDITMODE-END*/;

function Site({ tw }) {
  const { LangProvider } = window.LU;
  return (
    <LangProvider>
      <div className="min-h-screen bg-background text-foreground antialiased">
        <window.Header />
        <window.Hero variant={tw.heroVariant} />
        <window.SocialStrip />
        <window.CallFlow />
        <window.Situations />
        <window.DayStory variant={tw.storyVariant} />
        <window.SectorTabs />
        <window.Comparison />
        <window.Dashboard />
        <window.Control />
        <window.LiveDemoBanner />
        <window.Timeline />
        <window.Pricing />
        <window.Faq />
        <window.FinalCta />
        <window.Footer />
      </div>
    </LangProvider>
  );
}

function App() {
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor } = window;
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.classList.toggle("calm", !tw.richMotion);
    const g = tw.glow || TWEAK_DEFAULTS.glow;
    document.documentElement.style.setProperty("--glow-a", g[0]);
    document.documentElement.style.setProperty("--glow-b", g[1]);
  }, [tw.richMotion, tw.glow]);

  return (
    <React.Fragment>
      <Site tw={tw} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio label="Layout" value={tw.heroVariant} options={["split", "centered", "spotlight"]}
          onChange={(v) => setTweak("heroVariant", v)} />

        <TweakSection label="Dag-video" />
        <TweakRadio label="Stijl" value={tw.storyVariant} options={["cinematic", "minimal"]}
          onChange={(v) => setTweak("storyVariant", v)} />

        <TweakSection label="Beweging & sfeer" />
        <TweakToggle label="Rijke beweging" value={tw.richMotion} onChange={(v) => setTweak("richMotion", v)} />
        <TweakColor label="Gloed-accent" value={tw.glow}
          options={[
            ["oklch(0.55 0.21 264 / 0.5)", "oklch(0.72 0.13 188 / 0.42)"],
            ["oklch(0.72 0.13 188 / 0.5)", "oklch(0.6 0.2 295 / 0.4)"],
            ["oklch(0.6 0.2 295 / 0.5)", "oklch(0.55 0.21 264 / 0.4)"],
            ["oklch(0.78 0.15 75 / 0.5)", "oklch(0.62 0.22 25 / 0.4)"],
          ]}
          onChange={(v) => setTweak("glow", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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