/* eslint-disable */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "grow",
  "accent": ["#10B981", "#A7F0CB", "#08120E"],
  "showMarquee": true,
  "foundersLeft": 44
}/*EDITMODE-END*/;

const ACCENT_DEEP = {
  "#10B981": "#0BA075",
  "#1E9ED9": "#0F86BD",
  "#F39B4B": "#E07F2A",
  "#E5538F": "#C73E76",
};

const App = () => {
  const [t, setTweak] = useTweaks(DEFAULTS);
  const [entered, setEntered] = React.useState(false);

  React.useEffect(() => {
    const root = document.documentElement;
    const main = (t.accent && t.accent[0]) || "#10B981";
    const mint = (t.accent && t.accent[1]) || "#A7F0CB";
    const deep = ACCENT_DEEP[main] || "#0BA075";
    root.style.setProperty("--emerald", main);
    root.style.setProperty("--emerald-2", deep);
    root.style.setProperty("--mint", mint);
  }, [t.accent]);

  return (
    <>
      {!entered && <Intro onEnter={() => setEntered(true)} />}
      <div className={"page " + (entered ? "page-in" : "page-peek")}>
        <Nav />
        <Hero tweaks={t} />
        {t.showMarquee && <Marquee />}
        <Tour />
        <Companion />
        <TeamPicker />
        <Features />
        <PhoneTrio />
        <Founders remaining={t.foundersLeft} />
        <Pricing />
        <FAQ />
        <CTAStrip />
        <Footer />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero headline" />
        <TweakRadio
          label="Variant"
          value={t.headline}
          options={["grow", "manager", "weekend"]}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakSection label="Accent palette" />
        <TweakColor
          label="Theme"
          value={t.accent}
          options={[
            ["#10B981", "#A7F0CB", "#08120E"],
            ["#1E9ED9", "#A7E1F0", "#08120E"],
            ["#F39B4B", "#FCD9B5", "#08120E"],
            ["#E5538F", "#F7BDD5", "#08120E"],
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Founders programme" />
        <TweakNumber
          label="Spots remaining"
          value={t.foundersLeft}
          min={0}
          max={50}
          onChange={(v) => setTweak("foundersLeft", v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle
          label="Feature marquee"
          value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
        <TweakButton
          label="Replay welcome intro"
          onClick={() => {
            document.body.classList.remove("intro-done");
            setEntered(false);
          }}
        />
      </TweaksPanel>
    </>
  );
};

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