// main.jsx — top-level App composition + tweaks

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const theme = THEMES[t.palette] || THEMES.charcoal;
  const headerOnDark = theme.headerOnDark;

  // Apply page background to body
  useEffect(() => {
    document.body.style.background = theme.pageBg;
    document.body.style.color = theme.pageInk;
  }, [theme]);

  // Switch font pair
  useEffect(() => {
    const root = document.documentElement;
    if (t.serif === 'newsreader') {
      root.style.setProperty('--font-serif', '"Newsreader", Georgia, serif');
    } else if (t.serif === 'fraunces') {
      root.style.setProperty('--font-serif', '"DM Serif Display", "Newsreader", Georgia, serif');
    } else {
      root.style.setProperty('--font-serif', '"Cormorant Garamond", "Newsreader", Georgia, serif');
    }
  }, [t.serif]);

  return (
    <div style={{ minHeight: '100vh' }}>
      <Header theme={theme} onDark={headerOnDark} showAnniversary={t.showAnniversary} />
      <main>
        <Hero theme={theme} heroStyle={t.heroStyle} showAnniversary={t.showAnniversary} />
        <ProductsSection theme={theme} />
        <WhyUsSection theme={theme} />
        <PartnersSection theme={theme} />
        <BlogSection theme={theme} />
        <ContactSection theme={theme} />
      </main>
      <Footer theme={theme} showAnniversary={t.showAnniversary} />
      <FloatingWhatsApp />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta visual" />
        <TweakRadio
          label="Direção de cor"
          value={t.palette}
          options={[
            { value: 'charcoal', label: 'Cinza' },
            { value: 'light', label: 'Claro' },
            { value: 'warm', label: 'Amarelo' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Layout do hero"
          value={t.heroStyle}
          options={[
            { value: 'split', label: 'Split + lista' },
            { value: 'editorial', label: 'Editorial' },
            { value: 'showcase', label: 'Vitrine' },
          ]}
          onChange={(v) => setTweak('heroStyle', v)}
        />
        <TweakSection label="Tipografia" />
        <TweakRadio
          label="Família serifada"
          value={t.serif}
          options={[
            { value: 'newsreader', label: 'Newsreader' },
            { value: 'fraunces', label: 'DM Serif' },
            { value: 'cormorant', label: 'Cormorant' },
          ]}
          onChange={(v) => setTweak('serif', v)}
        />
        <TweakSection label="Marca" />
        <TweakToggle
          label="Selo 35 anos no logo"
          value={t.showAnniversary}
          onChange={(v) => setTweak('showAnniversary', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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