// app.jsx - composes the whole site, the nav (with day/night toggle), and Tweaks.
(function () {
  const { Button } = window.BisouxDesignSystem_144cac;
  const Ic = window.BxIcon;
  const {
    useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle,
    BxHeroA, BxHeroB, BxRitual, BxFeatures, BxPairing, BxDevices,
    BxManifesto, BxPrivacy, BxFinalCTA, BxFooter,
  } = window;

  const DEFAULT_ACCENT = "#7E2A2A"; // brand red - selecting it lets day/night tokens rule
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "hero": "editorial",
    "mood": "day",
    "accent": "#7E2A2A",
    "bigMotion": true
  }/*EDITMODE-END*/;

  function softFrom(hex) {
    const n = parseInt(hex.slice(1), 16);
    return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, 0.10)`;
  }

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" });
  }

  function Nav({ mood, onToggleMood }) {
    return (
      <nav className="nav">
        <div className="brand" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
          <img className="mark" src={mood === "night" ? "site/assets/app-icon-dark.png" : "site/assets/app-icon-light.png"} alt="Bisoux" />
          <span className="word">Bisoux</span>
        </div>
        <div className="nav-links">
          <button className="nav-link hideable" onClick={() => scrollTo("features")}>The app</button>
          <button className="nav-link hideable" onClick={() => scrollTo("how")}>How it works</button>
          <button className="nav-link hideable" onClick={() => scrollTo("privacy")}>Privacy</button>
          <button className="theme-toggle" onClick={onToggleMood} aria-label="Toggle day or night">
            {mood === "night" ? <Ic.sun size={20} /> : <Ic.moon size={20} />}
          </button>
          <Button variant="primary" size="sm" onClick={() => scrollTo("waitlist")}>Join the waitlist</Button>
        </div>
      </nav>
    );
  }

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

    // theme
    React.useEffect(() => {
      const root = document.documentElement;
      root.classList.toggle("dark", t.mood === "night");
      root.classList.toggle("light", t.mood !== "night");
    }, [t.mood]);

    // accent override (applies to both themes when non-default)
    React.useEffect(() => {
      const root = document.documentElement;
      const hex = t.accent;
      if (hex && hex.toLowerCase() !== DEFAULT_ACCENT.toLowerCase()) {
        root.style.setProperty("--accent", hex);
        root.style.setProperty("--accent-soft", softFrom(hex));
      } else {
        root.style.removeProperty("--accent");
        root.style.removeProperty("--accent-soft");
      }
    }, [t.accent]);

    // motion - re-init whenever the hero swaps (new nodes) or motion toggles
    React.useEffect(() => {
      window.__bxBigMotion = t.bigMotion;
      let cleanup = () => {};
      const id = setTimeout(() => { cleanup = window.BxMotion.init(); }, 60);
      return () => { clearTimeout(id); cleanup(); };
    }, [t.hero, t.bigMotion]);

    const toggleMood = () => setTweak("mood", t.mood === "night" ? "day" : "night");

    // which app screen each device shows
    const phoneScreens = { home: window.BxAppHome, gratitude: window.BxAppGratitude, bisou: window.BxAppBisou };
    const tabletScreens = { today: window.BxAppToday, moments: window.BxAppMoments, welcome: window.BxAppWelcome };
    const PhoneScreen = phoneScreens[t.phoneScreen] || window.BxAppHome;
    const TabletScreen = tabletScreens[t.tabletScreen] || window.BxAppToday;

    return (
      <React.Fragment>
        <Nav mood={t.mood} onToggleMood={toggleMood} />
        {t.hero === "cinematic" ? <BxHeroB Screen={PhoneScreen} /> : <BxHeroA Screen={PhoneScreen} />}
        <BxRitual />
        <BxFeatures />
        <BxPairing Screen={TabletScreen} />
        <BxDevices />
        <BxManifesto />
        <BxPrivacy />
        <BxFinalCTA />
        <BxFooter />

        <TweaksPanel title="Tweaks">
          <TweakSection label="Hero direction" />
          <TweakRadio label="Layout" value={t.hero}
            options={[{ value: "editorial", label: "Editorial" }, { value: "cinematic", label: "Cinematic" }]}
            onChange={(v) => setTweak("hero", v)} />
          <TweakSection label="Mood" />
          <TweakRadio label="Time of day" value={t.mood}
            options={[{ value: "day", label: "Day" }, { value: "night", label: "Night" }]}
            onChange={(v) => setTweak("mood", v)} />
          <TweakSection label="Accent" />
          <TweakColor label="Brand red" value={t.accent}
            options={["#7E2A2A", "#8A2F3A", "#9C4A33", "#6E2E45"]}
            onChange={(v) => setTweak("accent", v)} />
          <TweakSection label="Motion" />
          <TweakToggle label="Cinematic motion" value={t.bigMotion}
            onChange={(v) => setTweak("bigMotion", v)} />
        </TweaksPanel>
      </React.Fragment>
    );
  }

  window.BxApp = App;
})();