/* app.jsx — assembles the site, nav, theme + tweaks, booking state. */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "reel",
  "hourlyRate": 200,
  "auditPrice": 400,
  "callSpotsLeft": 1,
  "auditSpotsLeft": 1,
  "grain": true,
  "brandMark": true,
  "capabilityStyle": "simple",
  "testimonialStyle": "spotlight",
  "footerCta": "glow"
}/*EDITMODE-END*/;

const THEME_KEY = "roan_theme_v2";

function prefersDark() {
  try { return !!(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches); } catch (e) { return false; }
}
// Start from the visitor's saved choice, or fall back to their OS light/dark setting.
function initialTheme() {
  try {
    const saved = localStorage.getItem(THEME_KEY);
    if (saved === "dark" || saved === "light") return saved;
  } catch (e) {}
  return prefersDark() ? "dark" : "light";
}

function Nav({ onBook, theme, onToggleTheme }) {
  const [scrolled, setScrolled] = useStateA(false);
  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a className="nav-logo nav-logo--mark" href="#top" aria-label="Roan — home"><span className="mark" aria-hidden="true"></span></a>
      <div className="nav-links">
        <a href="#work">Work</a>
        <a href="#overtime">Story</a>
        <a href="#testimonials">Testimonials</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-cta">
        <button className="theme-toggle" onClick={onToggleTheme} role="switch"
          aria-checked={theme === "dark"} aria-label="Toggle ink or paper theme" data-theme={theme}>
          <span className="tt-knob" aria-hidden="true"></span>
        </button>
        <button className="btn btn-primary nav-book" onClick={onBook}>Book a call</button>
      </div>
    </nav>
  );
}

function App() {
  const t = TWEAK_DEFAULTS;
  const [booking, setBooking] = useStateA(false);
  const [theme, setTheme] = useStateA(initialTheme);

  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", theme === "dark" ? "dark" : "light");
  }, [theme]);

  // Follow the OS light/dark setting live — until the visitor picks a theme themselves.
  useEffectA(() => {
    let mq;
    try { mq = window.matchMedia("(prefers-color-scheme: dark)"); } catch (e) { return; }
    if (!mq) return;
    const onChange = (e) => {
      let saved = null;
      try { saved = localStorage.getItem(THEME_KEY); } catch (err) {}
      if (saved !== "dark" && saved !== "light") setTheme(e.matches ? "dark" : "light");
    };
    if (mq.addEventListener) mq.addEventListener("change", onChange);
    else if (mq.addListener) mq.addListener(onChange);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener("change", onChange);
      else if (mq.removeListener) mq.removeListener(onChange);
    };
  }, []);

  useEffectA(() => {
    const g = document.querySelector(".grain");
    if (g) g.style.display = t.grain ? "block" : "none";
  }, [t.grain]);

  // reveal observer — re-run when hero variant changes (DOM swaps)
  window.useRevealObserver(t.heroVariant + ":" + theme + ":" + t.capabilityStyle + ":" + t.testimonialStyle);

  const openBook = () => setBooking(true);
  const toggleTheme = () => setTheme((p) => {
    const next = p === "dark" ? "light" : "dark";
    try { localStorage.setItem(THEME_KEY, next); } catch (e) {}
    return next;
  });

  return (
    <>
      <Nav onBook={openBook} theme={theme} onToggleTheme={toggleTheme} />
      <main id="top">
        <window.Hero variant={t.heroVariant} onBook={openBook} brandMark={t.brandMark} />
        <window.Work />
        <window.Testimonials variant={t.testimonialStyle} />
        <window.Capabilities variant={t.capabilityStyle} />
        <window.OvertimeFeature />
        <window.FAQ />
        <window.Footer onBook={openBook} ctaAnim={t.footerCta} />
      </main>

      <window.BookingFlow open={booking} onClose={() => setBooking(false)} callRate={t.hourlyRate} auditRate={t.auditPrice} theme={theme} />
    </>
  );
}

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