/* ============================================================
   app.jsx — Home assembly + Tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F1A34F",
  "heroBg": "#010A2C",
  "heading": "Saira",
  "stamps": true
}/*EDITMODE-END*/;

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

  // Apply tweaks live via CSS custom properties
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--td-amber', tweaks.accent);
    r.style.setProperty('--td-amber-500', tweaks.accent);
    r.style.setProperty('--td-navy', tweaks.heroBg);
    r.style.setProperty('--td-navy-900', tweaks.heroBg);
    r.style.setProperty('--td-font-display', `'${tweaks.heading}', 'Montserrat', sans-serif`);
    document.body.dataset.stamps = tweaks.stamps ? 'on' : 'off';
  }, [tweaks]);

  return (
    <React.Fragment>
      <Header current="home"/>
      <main>
        <Hero/>
        <Stats/>
        <Areas/>
        <OfficeStrip/>
        <Diferenciais/>
        <ComoFunciona/>
        <Calculadora/>
        <Sobre/>
        <Depoimentos/>
        <FAQSection/>
        {/* <Blog/> */}
        <Contato/>
      </main>
      <Footer/>
      <WhatsAppFloat/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Identidade visual">
          <TweakColor
            label="Cor de destaque (âmbar)"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#F1A34F', '#C77F2F', '#D9A441', '#B8862E']}
          />
          <TweakColor
            label="Fundo institucional (navy)"
            value={tweaks.heroBg}
            onChange={(v) => setTweak('heroBg', v)}
            options={['#010A2C', '#0A1640', '#16245C', '#0F1B3D']}
          />
          <TweakRadio
            label="Família dos títulos"
            value={tweaks.heading}
            onChange={(v) => setTweak('heading', v)}
            options={[
              { value: 'Saira',      label: 'Saira' },
              { value: 'Montserrat', label: 'Montserrat' },
            ]}
          />
          <TweakToggle
            label="Carimbo DEFERIDO no hero"
            value={tweaks.stamps}
            onChange={(v) => setTweak('stamps', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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