/* global React, ReactDOM, Hero, ROI, RiskStrip, Science, Pillars, Comparison, Pricing, Partners, Mission, DataShowcase, ActionLayer, BaselineSection, RetreatShowcase, AskAI, ResetBand, Footer, BookingModal, PausaLogo, SpringMouseFollow, PausaChatFloating, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, WavePath, Playbook, ProgrammeTimeline, Testimonials, BurnoutCheck, WhyPausa, FAQ, PillarBenefits, RecognitionSection */
const { useState, useEffect } = React;

/* Fallback stubs if tweaks-panel / cursor / chatbot fail to load */
if (typeof useTweaks === "undefined") window.useTweaks = (d) => [d, () => {}];
if (typeof TweaksPanel === "undefined") window.TweaksPanel = ({ children }) => null;
if (typeof TweakSection === "undefined") window.TweakSection = () => null;
if (typeof TweakRadio === "undefined") window.TweakRadio = () => null;
if (typeof TweakToggle === "undefined") window.TweakToggle = () => null;
if (typeof SpringMouseFollow === "undefined") window.SpringMouseFollow = () => null;
if (typeof Playbook === "undefined") window.Playbook = () => null;
if (typeof WavePath === "undefined") window.WavePath = () => null;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "chatPlacement": "Floating",
  "bookingNudge": true
}/*EDITMODE-END*/;

function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#top" className="brand">
        <PausaLogo />
        <span className="nav-tagline">Performance wellbeing for leadership teams</span>
      </a>
      <div className="nav-links">
        <a href="#roi">The case</a>
        <a href="#approach">Why Pausa</a>
        <a href="#programme">Programme</a>
        <a href="#pricing">Pricing</a>

        <a className="nav-cta" href="https://score.pausa.pt/" target="_blank" rel="noopener noreferrer">Book a call</a>
      </div>
    </nav>
  );
}

function useReveal() {
  useEffect(() => {
    const revealAll = () =>
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        el.style.transition = "none";   // bypass the fade so non-painting contexts (export/PDF) aren't blank
        el.classList.add("in");
        setTimeout(() => { el.style.transition = ""; }, 50);
      });

    // No IO (or non-painting contexts like export/print) → show everything.
    if (!("IntersectionObserver" in window)) { revealAll(); return; }

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });

    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));

    // Safety net: if frames never paint (screenshots, throttled tabs), reveal anyway.
    const fallback = setTimeout(revealAll, 1400);

    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
}

function useParallax() {
  useEffect(() => {
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const nodes = Array.from(document.querySelectorAll("[data-parallax]"));
    if (!nodes.length) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const vh = window.innerHeight;
      for (const el of nodes) {
        const r = el.getBoundingClientRect();
        if (r.bottom < -200 || r.top > vh + 200) continue;
        const factor = parseFloat(el.getAttribute("data-parallax")) || 0.05;
        const mid = r.top + r.height / 2 - vh / 2;
        el.style.transform = `translate3d(0, ${(-mid * factor).toFixed(1)}px, 0)`;
      }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
}

function App() {
  const [booking, setBooking] = useState(false);
  const [bookMode, setBookMode] = useState("call");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const onBook = () => { setBookMode("call"); setBooking(true); };
  const onRetreat = () => { setBookMode("retreat"); setBooking(true); };
  useReveal();
  useParallax();

  useEffect(() => {
    window.__pausaBook = onBook;
    window.__pausaRetreat = onRetreat;
    return () => { delete window.__pausaBook; delete window.__pausaRetreat; };
  }, []);

  useEffect(() => {
    document.body.style.overflow = booking ? "hidden" : "";
  }, [booking]);

  // smooth scroll for in-page anchors
  useEffect(() => {
    const handler = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href");
      if (id.length < 2) return;
      const el = document.querySelector(id);
      if (el) { e.preventDefault(); window.scrollTo({ top: id === "#top" ? 0 : el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" }); }
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);

  return (
    <>
      <Nav onBook={onBook} />
      <main>
        <Hero onBook={onBook} />
        <RecognitionSection />
        <ActionLayer />
        <ProgrammeTimeline />
        <ROI />
        <PillarBenefits />
        <Testimonials />
        {/* <Science /> archived */}
        <FAQ />
        <Pillars chatPlacement={t.chatPlacement} bookingNudge={t.bookingNudge} />
        <WavePath />
        <Pricing onBook={onBook} />
        {typeof RetreatShowcase !== "undefined" && <RetreatShowcase onBook={onRetreat} />}
        <Partners />
        <Mission />
        <Playbook />
        <AskAI />
        <Footer onBook={onBook} />
      </main>
      <BookingModal open={booking} mode={bookMode} onClose={() => setBooking(false)} />
      <SpringMouseFollow />
      {t.chatPlacement === "Floating" && typeof PausaChatFloating !== "undefined" ? <PausaChatFloating nudge={t.bookingNudge} /> : null}
      <TweaksPanel>
        <TweakSection label="FAQ chat" />
        <TweakRadio label="Placement" value={t.chatPlacement}
          options={["Inline", "Floating"]}
          onChange={(v) => setTweak("chatPlacement", v)} />
        <TweakToggle label="Nudge to book a call" value={t.bookingNudge}
          onChange={(v) => setTweak("bookingNudge", v)} />
      </TweaksPanel>
    </>
  );
}

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