/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
const { useEffect } = React;

const HEADLINES = {
  "Worlds that rewrite themselves": ["Worlds that", "rewrite", "themselves."],
  "Every world alive & endless": ["Every world", "alive", "& endless."],
  "Infinite worlds, infinitely played": ["Infinite worlds,", "infinitely", "played."],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroDirection": "summit",
  "accent": "#ff2e9a",
  "headline": "Worlds that rewrite themselves",
  "motion": "lots",
  "grain": true
}/*EDITMODE-END*/;

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

  const fullMotion = t.motion === "lots";
  const motionOff = t.motion === "off";

  // apply accent + glow to :root
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--glow", motionOff ? "0.5" : "0.9");
  }, [t.accent, motionOff]);

  // toggle the motion-off body class
  useEffect(() => {
    document.body.classList.toggle("motion-off", motionOff);
  }, [motionOff]);

  // re-run reveal observer when layout / direction changes
  window.useReveal();
  useEffect(() => {
    // when direction changes, newly mounted reveals need observing — force on next frame
    const id = requestAnimationFrame(() => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.92) el.classList.add("in");
      });
    });
    return () => cancelAnimationFrame(id);
  }, [t.heroDirection]);

  return (
    <React.Fragment>
      <div className="bg-field" />
      <div className="bg-grid" />
      <Particles motion={fullMotion} />
      <div className={"grain" + (t.grain ? "" : " off")} />

      <Nav />
      <Hero direction={t.heroDirection} motion={fullMotion} title={HEADLINES[t.headline]} />
      <main>
        <Mission />
        <Games />
        <Tech />
        <Involve />
        <Signup />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero direction" />
        <TweakRadio
          label="Composition"
          value={t.heroDirection}
          options={["summit", "peak", "deep"]}
          onChange={(v) => setTweak("heroDirection", v)}
        />
        <TweakSelect
          label="Headline"
          value={t.headline}
          options={Object.keys(HEADLINES)}
          onChange={(v) => setTweak("headline", v)}
        />

        <TweakSection label="Look" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#ff2e9a", "#ff63bd", "#b06bff", "#8b5cf6"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak("grain", v)} />

        <TweakSection label="Motion" />
        <TweakRadio
          label="Intensity"
          value={t.motion}
          options={["lots", "subtle", "off"]}
          onChange={(v) => setTweak("motion", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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