// App entry — composes all sections, wires Tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "heroLayout": "split",
  "copyTone": "hype"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Locked to night mode permanently
  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", "dark");
  }, []);

  return (
    <>
      <Nav />
      <Hero heroLayout={tweaks.heroLayout} copyTone={tweaks.copyTone} />
      <Story />
      <Cocktails />
      <Pizza />
      <Events />
      <ContactForm />
      <Press />
      <Visit />
      <Footer />
      <MobileBottomBar />
      <Chatbot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Mode">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            onChange={v => setTweak("theme", v)}
            options={[{label: "Night", value: "dark"}, {label: "Day", value: "light"}]}
          />
        </TweakSection>
        <TweakSection title="Hero layout">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            onChange={v => setTweak("heroLayout", v)}
            options={[
              {label: "Split", value: "split"},
              {label: "Stacked", value: "stacked"},
            ]}
          />
        </TweakSection>
        <TweakSection title="Copy tone">
          <TweakRadio
            label="Voice"
            value={tweaks.copyTone}
            onChange={v => setTweak("copyTone", v)}
            options={[
              {label: "Hype", value: "hype"},
              {label: "Chill", value: "chill"},
              {label: "Poetic", value: "poetic"},
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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