/* global React, ReactDOM */
// App shell: motion engine + Tweaks (DS panel) + render

function useReveal() {
  React.useEffect(() => {
    const tick = () => {
      const vh = window.innerHeight || 800;
      document.querySelectorAll("[data-reveal]:not([data-seen])").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.9 && r.bottom > -40) el.setAttribute("data-seen", "");
      });
    };
    tick();
    window.addEventListener("scroll", tick, { passive: true });
    window.addEventListener("resize", tick);
    const iv = setInterval(tick, 280);
    const t1 = setTimeout(() => clearInterval(iv), 4500);
    const t2 = setTimeout(() => document.body.classList.add("reveal-all"), 1200);
    return () => {
      window.removeEventListener("scroll", tick);
      window.removeEventListener("resize", tick);
      clearInterval(iv); clearTimeout(t1); clearTimeout(t2);
    };
  }, []);
}

function Tweaks() {
  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakButton } = window;
  const load = () => {
    try { return JSON.parse(localStorage.getItem("as_tweaks")) || {}; } catch (e) { return {}; }
  };
  const init = load();
  const [motion, setMotion] = React.useState(init.motion || "full");
  const [scan, setScan] = React.useState(init.scan !== false);

  React.useEffect(() => {
    const map = { off: "0", subtle: "1", full: "2" };
    document.body.dataset.motion = map[motion] || "2";
    document.body.dataset.scan = scan ? "1" : "0";
    localStorage.setItem("as_tweaks", JSON.stringify({ motion, scan }));
  }, [motion, scan]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Motion">
        <TweakRadio label="Intensity" value={motion} onChange={setMotion}
          options={[{ value: "off", label: "Off" }, { value: "subtle", label: "Subtle" }, { value: "full", label: "Full" }]} />
        <div className="hud hud-dim" style={{ fontSize: "0.65rem", marginTop: 4, lineHeight: 1.5 }}>
          Reveals, marquee, CRT flicker &amp; keycap tilt.
        </div>
      </TweakSection>
      <TweakSection label="Analogue">
        <TweakToggle label="Scanlines" value={scan} onChange={setScan} />
        <TweakButton label="Replay intro" secondary onClick={() => { try { sessionStorage.removeItem("as_booted"); } catch (e) {} if (window.__runBoot) window.__runBoot(); }} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  useReveal();
  React.useEffect(() => {
    const t = setInterval(() => window.lucide && window.lucide.createIcons(), 350);
    setTimeout(() => clearInterval(t), 3000);
    // global pixel-shatter on any button click
    const onClick = (e) => {
      const b = e.target.closest && e.target.closest("button, .ghost-btn, [data-shatter]");
      if (b && window.pixelShatter) window.pixelShatter(b);
    };
    document.addEventListener("click", onClick, true);
    return () => { clearInterval(t); document.removeEventListener("click", onClick, true); };
  }, []);
  return (
    <React.Fragment>
      <Nav />
      <KeyNav />
      <PixelTrail />
      <PixelGlitch />
      <Hero />
      <Work />
      <Toolkit />
      <Companies />
      <About />
      <Contact />
      <Footer />
      <Tweaks />
    </React.Fragment>
  );
}

function boot() {
  const ns = window.AmreenShezanDesignSystem_5f91c9;
  if (!ns || !window.TweaksPanel || !window.Nav || !window.KeyNav || !window.Hero || !window.Companies || !window.Work || !window.LogoDots || !window.CrtTv || !window.BrowserCard || !window.PixelTrail || !window.PixelGlitch) {
    return setTimeout(boot, 40);
  }
  ReactDOM.createRoot(document.getElementById("app")).render(<App />);
}
boot();