/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakSelect, TweakText, TweakToggle, TweakSlider */

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  return (
    <>
      {t.showAmbient && <window.AmbientBackground />}
      <window.Nav />
      <main>
        <window.Hero headline={t.headline} />
        <window.ProofStrip />
        <window.BeyondBroadcast />
        <window.HowItWorks />
        <window.Segments />
        <window.PartnerCallout />
        <window.Documents />
        <window.CTA />
      </main>
      <window.Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakText label="Headline" value={t.headline}
          onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Effects" />
        <TweakToggle label="Ambient detection bg" value={t.showAmbient}
          onChange={(v) => setTweak("showAmbient", v)} />
      </TweaksPanel>
    </>
  );
}

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