// App root + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryHue": 35,
  "accentHue": 35,
  "showProblem": true,
  "showTestimonials": true,
  "darkHero": false
}/*EDITMODE-END*/;

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

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    // primary: warm terracotta-based oklch
    root.style.setProperty('--primary',   `oklch(0.52 0.12 ${tweaks.primaryHue})`);
    root.style.setProperty('--primary-2', `oklch(0.62 0.13 ${tweaks.primaryHue})`);
    root.style.setProperty('--accent',    `oklch(0.78 0.10 ${tweaks.accentHue})`);
    root.style.setProperty('--accent-soft', `oklch(0.92 0.05 ${tweaks.accentHue})`);
  }, [tweaks.primaryHue, tweaks.accentHue]);

  return (
    <div>
      <Nav/>
      <Hero tweaks={tweaks}/>
      <Bond/>
      {tweaks.showProblem && <Problem/>}
      <ROISection/>
      <Lifecycle/>
      <Species/>
      <Modules/>
      <AISection/>
      <Metrics/>
      {tweaks.showTestimonials && <Testimonials/>}
      <Pricing/>
      <CTA/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Colores"/>
        <TweakSlider
          label="Tono primario"
          value={tweaks.primaryHue}
          min={0} max={360} step={1}
          onChange={v => setTweak('primaryHue', v)}
          unit="°"
        />
        <TweakSlider
          label="Tono acento"
          value={tweaks.accentHue}
          min={0} max={360} step={1}
          onChange={v => setTweak('accentHue', v)}
          unit="°"
        />
        <TweakSection label="Secciones"/>
        <TweakToggle
          label="Mostrar 'El problema'"
          value={tweaks.showProblem}
          onChange={v => setTweak('showProblem', v)}
        />
        <TweakToggle
          label="Mostrar testimonios"
          value={tweaks.showTestimonials}
          onChange={v => setTweak('showTestimonials', v)}
        />
      </TweaksPanel>
    </div>
  );
};

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