// app.jsx — main entry, wires all sections + Tweaks
// (useState/useEffect already destructured in mockups.jsx)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "comfy",
  "accent": "#C26913",
  "density": "regular",
  "heroVariant": "stack",
  "preview": "screenshot"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { name: "Roasted",  main: "#C26913", deep: "#8E4A0A", soft: "#E08A2C", glow: "rgba(194,105,19,0.22)", fg: "#FFFFFF" },
  { name: "Crema",    main: "#FF9F1C", deep: "#C97A0E", soft: "#FFB347", glow: "rgba(255,159,28,0.30)", fg: "#1A0F00" },
  { name: "Jade",     main: "#1F8A5B", deep: "#0F5C3C", soft: "#3FB07F", glow: "rgba(31,138,91,0.22)",  fg: "#FFFFFF" },
  { name: "Ink",      main: "#3F4D6B", deep: "#222B40", soft: "#6A7A9C", glow: "rgba(63,77,107,0.22)",  fg: "#FFFFFF" },
];

function applyAccent(hex) {
  const p = ACCENT_PRESETS.find(p => p.main.toLowerCase() === hex.toLowerCase()) || ACCENT_PRESETS[0];
  const r = document.documentElement.style;
  r.setProperty('--olv-accent', p.main);
  r.setProperty('--olv-accent-deep', p.deep);
  r.setProperty('--olv-accent-soft', p.soft);
  r.setProperty('--olv-accent-glow', p.glow);
  r.setProperty('--olv-accent-fg', p.fg);
  // Also override the design system crema so child mockups follow
  r.setProperty('--crema', p.main);
  r.setProperty('--crema-deep', p.deep);
  r.setProperty('--crema-soft', p.soft);
  r.setProperty('--crema-glow', p.glow);
  r.setProperty('--fg-on-crema', p.fg);
}

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

  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { document.documentElement.setAttribute('data-density', t.density); }, [t.density]);
  useEffect(() => { document.documentElement.setAttribute('data-theme', t.theme); }, [t.theme]);

  // Re-render lucide icons whenever the tree mounts
  useEffect(() => {
    const id = setTimeout(() => window.lucide && window.lucide.createIcons(), 50);
    return () => clearTimeout(id);
  });

  return (
    <>
      <Nav />
      <Hero heroVariant={t.heroVariant} accent={t.accent} preview={t.preview} />
      <WhatYouGet />
      <MobileTour preview={t.preview} />
      <DashboardTour preview={t.preview} />
      <Process />
      <Pricing />
      <FAQ />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mood"
          value={t.theme}
          options={['comfy', 'sharp']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Brand colour"
          value={t.accent}
          options={ACCENT_PRESETS.map(p => p.main)}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)}
        />
        <TweakSection label="Product preview" />
        <TweakRadio
          label="Detail"
          value={t.preview}
          options={['abstract', 'detailed', 'hidden']}
          onChange={(v) => setTweak('preview', v)}
        />
        <TweakSection label="Hero" />
        <TweakSelect
          label="Stage variant"
          value={t.heroVariant}
          options={[
            { value: 'stack', label: 'Dashboard + phone' },
            { value: 'dash',  label: 'Dashboard only' },
            { value: 'phone', label: 'Phone only' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
      </TweaksPanel>
    </>
  );
}

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