// Shared components: Nav, Footer, helpers
const { useState, useEffect, useRef, useMemo } = React;

function useScrolled(threshold = 40) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [threshold]);
  return scrolled;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add("in");});
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  });
}

function Nav({ route, go }) {
  const scrolled = useScrolled(40);
  const [open, setOpen] = useState(false);
  const links = [
  { id: "home", label: "Home" },
  { id: "method", label: "The Method" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" }];

  return (
    <React.Fragment>
      <nav className={"nav-root" + (scrolled ? " scrolled" : "")}>
        <div className="wrap nav-inner">
          <a className="nav-logo" onClick={() => go("home")} style={{ cursor: "pointer" }}>
            <img src="assets/mb-logo-tp.png" alt="MB Move Better" style={{ height: "64px", width: "64px" }} />
            <div>
              <div className="wordmark" style={{ fontSize: "14px" }}>MOVE BETTER</div>
              <div className="mono" style={{ color: "var(--white-faint)", marginTop: 4, fontSize: "12px" }}>MATTHEW BOOSKA · EP</div>
            </div>
          </a>
          <div className="nav-links">
            {links.slice(0, 3).map((l) =>
            <a
              key={l.id}
              className={"nav-link" + (route === l.id ? " active" : "")}
              onClick={() => go(l.id)}>
              
                {l.label}
              </a>
            )}
            <a className="btn btn-primary nav-cta" onClick={() => go("contact")}>
              Work With Me
            </a>
            <button className="mobile-toggle" aria-label="Menu" onClick={() => setOpen(true)}>
              <span /><span /><span />
            </button>
          </div>
        </div>
      </nav>
      <div className={"mobile-drawer" + (open ? " open" : "")}>
        <a className="nav-link" onClick={() => {go("home");setOpen(false);}}>Home</a>
        <a className="nav-link" onClick={() => {go("method");setOpen(false);}}>The Method</a>
        <a className="nav-link" onClick={() => {go("about");setOpen(false);}}>About</a>
        <a className="nav-link" onClick={() => {go("contact");setOpen(false);}}>Contact</a>
        <a className="btn btn-primary nav-cta" onClick={() => {go("contact");setOpen(false);}}>Work With Me</a>
      </div>
      {open &&
      <div onClick={() => setOpen(false)} style={{
        position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", zIndex: 150
      }} />
      }
    </React.Fragment>);

}

function Footer({ go }) {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="foot-logo">
              <img src="assets/mb-logo-tp.png" alt="MB" />
              <div>
                <div className="wordmark">MOVE BETTER</div>
                <div className="mono" style={{ color: "var(--white-faint)", fontSize: 9, marginTop: 4 }}>MATTHEW BOOSKA · EP</div>
              </div>
            </div>
            <p className="foot-tag">Custom training built around the way your body actually moves. South Lake Tahoe, CA — available online nationwide.</p>
          </div>
          <div>
            <div className="foot-h">Site</div>
            <a className="foot-link" onClick={() => go("home")}>Home</a>
            <a className="foot-link" onClick={() => go("method")}>The Method</a>
            <a className="foot-link" onClick={() => go("about")}>About</a>
            <a className="foot-link" onClick={() => go("contact")}>Contact</a>
          </div>
          <div>
            <div className="foot-h">Offers</div>
            <a className="foot-link" onClick={() => go("contact", { intent: "intro" })}>15-Min Intro Call</a>
            <a className="foot-link" onClick={() => go("contact", { intent: "review" })}>Postural Review + Strategy Call</a>
            <a className="foot-link" onClick={() => go("method")}>The Move Better Method</a>
            <a className="foot-link" onClick={() => go("contact", { intent: "basic" })}>Basic Fitness Training</a>
          </div>
          <div>
            <div className="foot-h">Connect</div>
            <a className="foot-link" href="https://instagram.com/mb_movebetter" target="_blank" rel="noopener">Instagram &mdash; @mb_movebetter</a>
            <a className="foot-link" href="https://www.facebook.com/profile.php?id=61564562967173" target="_blank" rel="noopener">Facebook &mdash; MB Move Better</a>
            <a className="foot-link" onClick={() => go("contact")}>matt@mbmovebetter.com</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span className="mono">© 2026 MATTHEW BOOSKA · MOVE BETTER</span>
          <span className="mono">SOUTH LAKE TAHOE · CA</span>
        </div>
      </div>
    </footer>);

}

// Section header pattern
function SectionEyebrow({ children }) {
  return <div className="mono flank">{children}</div>;
}

Object.assign(window, { Nav, Footer, SectionEyebrow, useReveal, useScrolled });