// ============= APP V2 =============

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "pastel",
  "density": "comfy",
  "hero": "promesa",
  "countdown": true,
  "sticky": true
}/*EDITMODE-END*/;

const App = () => {
  const [state, setState] = React.useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem('__tweaks_v2') || 'null');
      if (saved) return { ...TWEAK_DEFAULTS, ...saved, palette: TWEAK_DEFAULTS.palette };
    } catch {}
    return TWEAK_DEFAULTS;
  });

  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', state.palette);
    document.documentElement.setAttribute('data-density', state.density);
    try { localStorage.setItem('__tweaks_v2', JSON.stringify(state)); } catch {}
  }, [state]);

  React.useEffect(() => {
    const onMsg = (ev) => {
      const t = ev.data && ev.data.type;
      if (t === '__activate_edit_mode') setTweaksOpen(true);
      if (t === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  return (
    <>
      <TopBanner showCountdown={state.countdown} />
      <Hero variant={state.hero} />
      <SocialStrip />
      <LetterOpen />
      <PainAmplify />
      <FutureSplit />
      <ProductReveal />
      <ModulesSection />
      <BonusesSection />
      <WhyCheap />
      <TestimonialsSection />
      <GuaranteeSection />
      <CheckoutSection showCountdown={state.countdown} />
      <FAQSection />
      <PSFinal />
      <Footer />

      {state.sticky && <StickyCTA showCountdown={state.countdown} />}
      {tweaksOpen && <TweaksPanel state={state} setState={setState} onClose={() => setTweaksOpen(false)} />}
    </>
  );
};

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