/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakColor,
          Header, Hero, WaitlistForm, Footer */
const { useState, useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A\u00a0new\u00a0Community\u00a0for Music\u00a0Wars\u00a0Rockstar.",
  "palette": ["#a366ff", "#ff6ec7"]
}/*EDITMODE-END*/;

const HEADLINE_OPTIONS = [
  "A\u00a0new\u00a0Community\u00a0for Music\u00a0Wars\u00a0Rockstar.",
  "The\u00a0next\u00a0chapter\u00a0for Music\u00a0Wars\u00a0Rockstar.",
  "Music\u00a0Wars\u00a0Rockstar \u2014 a new Community is coming.",
  "Join the waitlist for what's next.",
];

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

  useEffect(() => {
    const root = document.documentElement;
    const [a, b] = t.palette || DEFAULTS.palette;
    root.style.setProperty("--accent", a);
    root.style.setProperty("--accent-2", b);
  }, [t.palette]);

  function scrollToForm() {
    const el = document.getElementById("waitlist");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }

  return (
    <>
      <Header onJoinClick={scrollToForm} />
      <Hero headline={t.headline} />
      <WaitlistForm />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline">
          <TweakSelect
            label="Variant"
            value={t.headline}
            options={HEADLINE_OPTIONS.map(h => ({ value: h, label: shortLabel(h) }))}
            onChange={(v) => setTweak("headline", v)}
          />
        </TweakSection>

        <TweakSection label="Accent">
          <TweakColor
            label="Gradient"
            value={t.palette}
            options={[
              ["#a366ff", "#ff6ec7"],
              ["#6ee7ff", "#a366ff"],
              ["#ff8a4c", "#ff3da5"],
              ["#56e3b3", "#6ee7ff"],
              ["#ffd166", "#ff6ec7"],
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function shortLabel(s) {
  if (s.startsWith("A new Community"))     return "New Community";
  if (s.startsWith("The next chapter"))    return "Next chapter";
  if (s.startsWith("Music Wars Rockstar")) return "Coming soon";
  if (s.startsWith("Join the waitlist"))   return "What's next";
  return s.replace(/\.$/, "");
}

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