/* InfocuestaSec — Main app + Tweaks */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A",
  "accent": "violet",
  "density": "default",
  "showPS": true
}/*EDITMODE-END*/;

const ACCENT_HEX = { violet: '#3ec1f0', cyan: '#4cd6e6', lime: '#c6f547', coral: '#ff7359' };
const HEX_TO_ACCENT = Object.fromEntries(Object.entries(ACCENT_HEX).map(([k, v]) => [v.toLowerCase(), k]));

function App() {
  const tweaks = DEFAULTS;
  const [mvvOpen, setMvvOpen] = React.useState(false);
  const [privacyOpen, setPrivacyOpen] = React.useState(false);
  const [ethicsOpen, setEthicsOpen] = React.useState(false);
  const [newsOpen, setNewsOpen] = React.useState(false);

  // Apply theme attributes to <html>
  React.useEffect(() => {
    document.documentElement.dataset.accent = tweaks.accent;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.accent, tweaks.density]);

  return (
    <>
      <AiAlertBar />
      <Nav onOpenNews={() => setNewsOpen(true)} />
      <Hero headlineVariant={tweaks.headline} />
      <div className="section-divider" />
      <ValueProp />
      <Pain />
      <Mechanism />
      <Benefits />
      <Learn />
      <Offer />
      <FAQ />
      <CtaFinal />
      {tweaks.showPS && <PsClose />}
      <Footer onOpenMvv={() => setMvvOpen(true)} onOpenPrivacy={() => setPrivacyOpen(true)} onOpenEthics={() => setEthicsOpen(true)} />
      <MvvModal open={mvvOpen} onClose={() => setMvvOpen(false)} />
      <PrivacyModal open={privacyOpen} onClose={() => setPrivacyOpen(false)} />
      <EthicsModal open={ethicsOpen} onClose={() => setEthicsOpen(false)} />
      <NewsModal open={newsOpen} onClose={() => setNewsOpen(false)} />
    </>
  );
}

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