/* Root app */

const App = () => {
  const [tweaksOn, setTweaksOn] = React.useState(false);
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const handler = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setTweaksOn(true);
      if (d.type === '__deactivate_edit_mode') setTweaksOn(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({type:'__edit_mode_available'}, '*'); } catch(e){}
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply accent hex live via CSS variable
  React.useEffect(() => {
    document.documentElement.style.setProperty('--hub-gold', tweaks.accentHex);
    // recompute soft variant via alpha-ish mix (keep fixed goldSoft for simplicity)
  }, [tweaks.accentHex]);

  return (
    <div>
      <Navbar/>
      <Hero/>
      <ProblemSection/>
      <SolutionSection/>
      <HowItWorksSection/>
      <FeaturesSection/>
      <PlansSection highlightPlan={tweaks.highlightPlan}/>
      <ComparisonSection/>
      {tweaks.showProofMetrics && <ProofSection/>}
      <FaqMini/>
      <FinalCTA/>
      <Footer/>
      <TweaksPanel active={tweaksOn} values={tweaks} setValues={setTweaks}/>
    </div>
  );
};

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