// Main landing app — composes sections + tweaks panel.

const ACCENT_HEX = {
  "#1b7a43": "forest",
  "#2a4d8f": "midnight",
  "#b85534": "terracotta",
  "#6e3a7a": "plum",
};

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [modalOpen, setModalOpen] = React.useState(false);

  // Translate stored color hex back to palette name for accent application
  const accentName = ACCENT_HEX[tweaks.accent] || tweaks.accent || "forest";

  React.useEffect(() => {
    applyAccent(accentName);
  }, [accentName]);

  // Expose global opener so any inline link (e.g. footer, sticky bar) can trigger the modal
  React.useEffect(() => {
    window.openSignupModal = () => setModalOpen(true);
    return () => { delete window.openSignupModal; };
  }, []);

  const openModal = () => setModalOpen(true);

  return (
    <>
      <Nav onSignup={openModal}/>
      <Hero density={tweaks.heroLayout} onSignup={openModal}/>
      <LogoCloud/>
      <HowItWorks/>
      <Features/>
      <UseCases/>
      <SocialProof/>
      <PricingTeaser onSignup={openModal}/>
      <FAQ/>
      <FinalCTA onSignup={openModal}/>
      <Footer/>
      <StickyBar onSignup={openModal}/>
      <EmailModal open={modalOpen} onClose={() => setModalOpen(false)}/>

      <TweaksPanel title="Tweaks" noDeckControls={true}>
        <TweakSection label="Accent color" />
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          options={["#1b7a43", "#2a4d8f", "#b85534", "#6e3a7a"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Hero chart density" />
        <TweakRadio
          label="Density"
          value={tweaks.heroLayout}
          options={["editorial", "compact"]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
      </TweaksPanel>
    </>
  );
}

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