// App shell — composes all sections + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#a8345f",
  "titleFont": "serif-it",
  "heroPhoto": "green",
  "animations": "on"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { value: '#a8345f', label: 'Rosa magenta (logo)' },
  { value: '#9b5a47', label: 'Terracota' },
  { value: '#6e8a5a', label: 'Verde salvia' },
  { value: '#d97a5c', label: 'Coral' },
];

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

  // Apply accent color to CSS var + animations toggle
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accentColor);
    if (tweaks.animations === 'off') {
      document.body.classList.add('reveal-off');
    } else {
      document.body.classList.remove('reveal-off');
    }
  }, [tweaks.accentColor, tweaks.animations]);

  return (
    <>
      <Nav />
      <Hero heroPhoto={tweaks.heroPhoto} titleFont={tweaks.titleFont}/>
      <PainSection />
      <QueEsSection />
      <BenefitsSection />
      <JournalingInteractive />
      <TestimonialsSection />
      <PriceSection heroPhoto={tweaks.heroPhoto}/>
      <AboutSection heroPhoto={tweaks.heroPhoto}/>
      <FaqSection />
      <FinalCTA />
      <Footer />
      <StickyCTA />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color de acento">
          <TweakRadio
            value={tweaks.accentColor}
            onChange={(v)=> setTweak('accentColor', v)}
            options={ACCENT_PRESETS}
          />
        </TweakSection>
        <TweakSection title="Tipografía del título">
          <TweakRadio
            value={tweaks.titleFont}
            onChange={(v)=> setTweak('titleFont', v)}
            options={[
              { value:'serif-it', label:'Serif italic (editorial)' },
              { value:'script',   label:'Script (manuscrita)' },
              { value:'sans-caps',label:'Sans mayúsculas (bold)' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Foto del hero">
          <TweakRadio
            value={tweaks.heroPhoto}
            onChange={(v)=> setTweak('heroPhoto', v)}
            options={[
              { value:'green',  label:'Vestido verde (fondo terracota)' },
              { value:'blazer', label:'Blazer crema (ambiente)' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Animaciones">
          <TweakRadio
            value={tweaks.animations}
            onChange={(v)=> setTweak('animations', v)}
            options={[
              { value:'on',  label:'Activadas (reveal on scroll)' },
              { value:'off', label:'Desactivadas' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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