/* global React, ReactDOM, LandingComponents, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakColor */
const { useEffect } = React;
const { Nav, Hero, Strip, FeatureGrid, HowItWorks, DeepDives, Categories, BetaProgram, Roadmap, FAQ, Waitlist, Footer } = window.LandingComponents;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "phone-robo",
  "headline": 0,
  "mockup": "list",
  "accent": "#00C7B1"
}/*EDITMODE-END*/;

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

  // apply accent color globally
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  return (
    <>
      <Nav accent={t.accent} />
      <Hero
        layout={t.heroLayout}
        headline={Number(t.headline) || 0}
        mockup={t.mockup}
        accent={t.accent}
      />
      <Strip />
      <FeatureGrid />
      <HowItWorks />
      <DeepDives />
      <Categories />
      <BetaProgram />
      <Roadmap />
      <FAQ />
      <Waitlist />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakSelect
            label="Hero-Layout"
            value={t.heroLayout}
            onChange={v => setTweak("heroLayout", v)}
            options={[
              { value: "phone-robo", label: "Phone + Robo + Stickers (default)" },
              { value: "side-by-side", label: "Zwei Phones nebeneinander" },
              { value: "stack", label: "Zentriert gestapelt" },
            ]}
          />
          <TweakSelect
            label="Headline-Variante"
            value={String(t.headline)}
            onChange={v => setTweak("headline", Number(v))}
            options={[
              { value: "0", label: "1 · »alle einkaufen im Takt«" },
              { value: "1", label: "2 · »Schluss mit doppelt eingekauft«" },
              { value: "2", label: "3 · »Liste, die mitdenkt«" },
            ]}
          />
          <TweakRadio
            label="Mockup-Inhalt"
            value={t.mockup}
            onChange={v => setTweak("mockup", v)}
            options={[
              { value: "list", label: "Listen" },
              { value: "intake", label: "Erfassen" },
              { value: "shopping", label: "Einkauf" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Akzentfarbe">
          <TweakColor
            label="Akzent"
            value={t.accent}
            onChange={v => setTweak("accent", v)}
            options={["#00C7B1", "#0077B6", "#FF8F00", "#FFE81A"]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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