// ===========================================================================
// EVA MGMT — App entrypoint
// ===========================================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "rojo",
  "italicHeavy": false,
  "showGrain": true,
  "accentPink": "#FF6F8E"
}/*EDITMODE-END*/;

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

  // Apply theme + font class on body
  React.useEffect(() => {
    document.body.classList.remove('theme-rojo', 'theme-cream', 'theme-noir');
    document.body.classList.add('theme-' + t.theme);
    document.body.classList.toggle('font-italic-heavy', !!t.italicHeavy);
    document.documentElement.style.setProperty('--pink', t.accentPink);
  }, [t.theme, t.italicHeavy, t.accentPink]);

  return (
    <>
      {t.showGrain && <div className="grain" />}
      <Nav />
      <Hero />
      <Ticker />
      <Manifesto />
      <Services />
      <PorQue />
      <Metrics />
      <Testimonials />
      <Steps />
      <CtaFinal />
      <Apply />
      <FAQ />
      <Footer />
      <ApplyModal />

      <TweaksPanel title="Tweaks — Eva">
        <TweakSection label="Vibe">
          <TweakRadio
            label="Tema"
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'rojo', label: 'Rojo' },
              { value: 'cream', label: 'Crema' },
              { value: 'noir', label: 'Noir' },
            ]}
          />
          <TweakColor
            label="Accent rosa"
            value={t.accentPink}
            onChange={(v) => setTweak('accentPink', v)}
            options={['#FF6F8E', '#FF3D5A', '#E63950', '#FFB3C1', '#C8253E']}
          />
          <TweakToggle
            label="Cursiva pesada"
            value={t.italicHeavy}
            onChange={(v) => setTweak('italicHeavy', v)}
          />
          <TweakToggle
            label="Grano de papel"
            value={t.showGrain}
            onChange={(v) => setTweak('showGrain', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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