/* global React, ReactDOM */
// landing-app.jsx — Tweaks state + composition + scroll observer

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motionIntensity": 55,
  "palette": "#B87333",
  "waitlistVariant": 1
}/*EDITMODE-END*/;

const HEX_TO_PALETTE = {
  "#b87333": "copper",
  "#9c7a4e": "bronze",
  "#c2522a": "rust",
};

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [navLight, setNavLight] = useStateA(false);

  // Apply palette class to root for cascade
  useEffectA(() => {
    const name = HEX_TO_PALETTE[String(tweaks.palette).toLowerCase()] || "copper";
    document.body.setAttribute("data-palette", name);
  }, [tweaks.palette]);

  const paletteName = HEX_TO_PALETTE[String(tweaks.palette).toLowerCase()] || "copper";

  // Switch nav style when we leave the dark hero
  useEffectA(() => {
    const hero = document.querySelector(".hero");
    if (!hero) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => setNavLight(!e.isIntersecting));
    }, { threshold: 0.05 });
    io.observe(hero);
    return () => io.disconnect();
  }, []);

  const scrollToWaitlist = () => {
    document.getElementById("waitlist")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div className="page">
      <window.TopNav inLight={navLight} onJoin={scrollToWaitlist} />
      <window.Hero tweaks={tweaks} scrollToWaitlist={scrollToWaitlist} />
      <window.Pillars />
      {/* <window.Mockups /> hidden for now */}
      <window.DayTimeline />
      <window.FAQ />
      <window.WaitlistSection tweaks={tweaks} />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Hero">
          <window.TweakSlider
            label="Motion intensity"
            value={tweaks.motionIntensity}
            onChange={(v) => setTweak("motionIntensity", v)}
            min={0} max={100} step={5}
            unit="%"
          />
        </window.TweakSection>

        <window.TweakSection label="Brand">
          <window.TweakColor
            label="Accent"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={["#B87333", "#9C7A4E", "#C2522A"]}
          />
        </window.TweakSection>

        <window.TweakSection label="Waitlist">
          <window.TweakRadio
            label="Form variant"
            value={tweaks.waitlistVariant}
            onChange={(v) => setTweak("waitlistVariant", Number(v))}
            options={[
              { value: 0, label: "Email" },
              { value: 1, label: "+ Role" },
              { value: 2, label: "+ Firm" },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
}

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