/* lp/app.jsx — entry + tweaks panel */

const App = () => {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "bwPhoto": false,
    "showPrice": false,
    "boneHero": false
  }/*EDITMODE-END*/);

  React.useEffect(() => {
    document.body.classList.toggle('bw-photo', tweaks.bwPhoto);
    document.body.classList.toggle('show-price', tweaks.showPrice);
    document.body.classList.toggle('bone-hero', tweaks.boneHero);
  }, [tweaks.bwPhoto, tweaks.showPrice, tweaks.boneHero]);

  return (
    <React.Fragment>
      <Hero />
      <Problema />
      <Manifesto />
      <Movimentos />
      <Processo />
      <Entregaveis />
      <Joao />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakToggle
            label="Fundo Bone (claro)"
            value={tweaks.boneHero}
            onChange={(v) => setTweak('boneHero', v)}
          />
        </TweakSection>
        <TweakSection title="Foto">
          <TweakToggle
            label="Tratamento P&B"
            value={tweaks.bwPhoto}
            onChange={(v) => setTweak('bwPhoto', v)}
          />
        </TweakSection>
        <TweakSection title="Conteúdo">
          <TweakToggle
            label="Mostrar 'Investimento sob consulta'"
            value={tweaks.showPrice}
            onChange={(v) => setTweak('showPrice', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

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