/* App entry — composes the landing page and wires Tweaks. */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1a6fb5",
  "headline": "The guide every ambitious teen deserves"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const { TweaksPanel, TweakSection, TweakColor, TweakText, DemoModal } = window;
  const [demoOpen, setDemoOpen] = useState(false);

  const { Nav, Hero, Capabilities, Roadmap, Features, Pricing, Footer } = window.LP;

  return (
    <>
      <Nav />
      <main>
        <Hero accent={tweaks.accent} headline={tweaks.headline} onPlayDemo={() => setDemoOpen(true)} />
        <Capabilities accent={tweaks.accent} />
        <Roadmap accent={tweaks.accent} />
        <Features accent={tweaks.accent} />
        <Pricing accent={tweaks.accent} />
      </main>
      <Footer accent={tweaks.accent} />

      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={v => setTweak("accent", v)} />
          <TweakText label="Hero headline" value={tweaks.headline} onChange={v => setTweak("headline", v)} multiline />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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