/* global React, ReactDOM,
   Nav, Hero, ProvaVisual, Problema, Beneficios, ComoFunciona,
   SocialProof, Planos, FAQ, CTAFinal, Footer,
   CheckoutModal, useCheckout,
   TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D6A55A",
  "tone": "warm",
  "showSparkles": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { open, plan, closeCheckout } = useCheckout();

  React.useEffect(() => {
    // Apply tweak overrides via CSS vars
    document.documentElement.style.setProperty("--gold", t.accent);
  }, [t.accent]);

  return (
    <div>
      <Nav />
      <Hero />
      <ProvaVisual />
      <Problema />
      <Beneficios />
      <ComoFunciona />
      <SocialProof />
      <Planos />
      <FAQ />
      <CTAFinal />
      <Footer />

      <CheckoutModal open={open} plan={plan} onClose={closeCheckout} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta da marca" />
        <TweakColor
          label="Acento"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#D6A55A", "#B5874A", "#C66B4C", "#A47640", "#7B665B"]}
        />
      </TweaksPanel>
    </div>
  );
}

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