/* ============================================================
   Archway — shared site chrome (header, footer, nav, hooks)
   Loaded on every page; components attach to window.Archway.
   ============================================================ */
(function () {
  const { useState, useEffect, useRef } = React;

  const LOGO = "images/logo-letterhead.png";
  const BRAIN = "images/brain-mark.png";

  // ── Viewport detector ─────────────────────────────────────
  function useIsMobile(breakpoint = 900) {
    const [isMobile, setIsMobile] = useState(
      typeof window !== "undefined" ? window.innerWidth <= breakpoint : false
    );
    useEffect(() => {
      const mq = window.matchMedia(`(max-width:${breakpoint}px)`);
      const onChange = (e) => setIsMobile(e.matches);
      mq.addEventListener ? mq.addEventListener("change", onChange) : mq.addListener(onChange);
      return () => {
        mq.removeEventListener ? mq.removeEventListener("change", onChange) : mq.removeListener(onChange);
      };
    }, [breakpoint]);
    return isMobile;
  }

  // ── Desktop header ────────────────────────────────────────
  function ServicesDropdown({ active }) {
    const [open, setOpen] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
      function handle(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
      document.addEventListener("mousedown", handle);
      return () => document.removeEventListener("mousedown", handle);
    }, []);
    return (
      <div className="nav-dropdown" ref={ref}>
        <button className={`nav-dropdown-trigger${open ? " open" : ""}${active ? " active" : ""}`} onClick={() => setOpen((o) => !o)}>
          Services
          <svg width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>
        <div className={`nav-dropdown-menu${open ? " open" : ""}`}>
          <a href="clinical-evaluations.html" onClick={() => setOpen(false)}>Clinical Evaluations</a>
          <a href="medicolegal-services.html" onClick={() => setOpen(false)}>Medicolegal Services</a>
        </div>
      </div>
    );
  }

  function SiteHeader({ active }) {
    const linkStyle = (key) => ({ color: active === key ? "var(--accent)" : "var(--fg-1)" });
    return (
      <header className="site-header">
        <div className="container-wide inner">
          <a href="index.html" className="logo"><img src={LOGO} alt="Archway" /></a>
          <nav>
            <a href="index.html" style={linkStyle("home")}>Home</a>
            <ServicesDropdown active={active === "services"} />
            <a href="about.html" style={linkStyle("about")}>About</a>
            <a href="rates.html" style={linkStyle("rates")}>Rates</a>
            <a href="contact.html" style={linkStyle("contact")}>Contact</a>
          </nav>
          <a href="contact.html" className="cta">Request Evaluation</a>
        </div>
      </header>
    );
  }

  function SiteFooter() {
    return (
      <footer className="site-footer">
        <div className="container-wide">
          <div className="row">
            <div>
              <div className="footer-lockup">
                <img src={BRAIN} alt="" style={{ height: 48, width: "auto" }} />
                <div className="footer-wordmark">
                  <span className="footer-wordmark-top">Archway</span>
                  <span className="footer-wordmark-bot">Neuropsychological Services</span>
                </div>
              </div>
              <p className="bio">Comprehensive clinical and medicolegal neuropsychology, serving Denver and the Colorado Front Range.</p>
            </div>
            <div><h4>Services</h4><a href="clinical-evaluations.html">Clinical Evaluations</a><a href="medicolegal-services.html">Medicolegal</a></div>
            <div><h4>Practice</h4><a href="about.html">About Dr. Kacmarski</a><a href="rates.html">Rates</a><a href="contact.html">Contact</a></div>
            <div>
              <div style={{ marginBottom: 20 }}><h4>Phone</h4><a href="tel:+13032267048">(303) 226-7048</a></div>
              <div><h4>Email</h4><a href="mailto:archway@archwayneuropsych.com">archway@archwayneuropsych.com</a></div>
            </div>
          </div>
          <div className="fine"><span>© 2026 Archway Neuropsychological Services, PLLC</span><span>Denver, Colorado</span></div>
        </div>
      </footer>
    );
  }

  // ── Mobile header / nav / footer ──────────────────────────
  function MobHeader({ onMenu }) {
    return (
      <header className="mob-header">
        <a href="index.html"><img src={LOGO} alt="Archway Neuropsychological Services" /></a>
        <button className="menu-btn" aria-label="Open menu" onClick={onMenu}>
          <span></span><span></span><span></span>
        </button>
      </header>
    );
  }

  function MobNav({ open, onClose }) {
    return (
      <nav className={`mob-nav${open ? " open" : ""}`} aria-hidden={!open}>
        <button className="close" onClick={onClose} aria-label="Close menu">✕</button>
        <a href="index.html" onClick={onClose}>Home</a>
        <a href="about.html" onClick={onClose}>About</a>
        <a href="clinical-evaluations.html" onClick={onClose}>Clinical Evaluations</a>
        <a href="medicolegal-services.html" onClick={onClose}>Medicolegal</a>
        <a href="rates.html" onClick={onClose}>Rates</a>
        <a href="contact.html" onClick={onClose}>Contact</a>
        <a href="contact.html" className="nav-cta" onClick={onClose}>Request Evaluation</a>
      </nav>
    );
  }

  function MobFooter() {
    return (
      <footer className="mob-footer">
        <div className="lockup">
          <img src={BRAIN} alt="" style={{ height: 40, width: "auto" }} />
          <div className="wordmark">
            <span className="wordmark-top">Archway</span>
            <span className="wordmark-bot">Neuropsychological Services</span>
          </div>
        </div>
        <p className="bio">Comprehensive clinical and medicolegal neuropsychology, serving Denver and the Colorado Front Range.</p>
        <div className="mob-footer-cols">
          <div><h4>Services</h4><a href="clinical-evaluations.html">Clinical Evaluations</a><a href="medicolegal-services.html">Medicolegal</a></div>
          <div><h4>Practice</h4><a href="about.html">About</a><a href="rates.html">Rates</a><a href="contact.html">Contact</a></div>
          <div><h4>Phone</h4><a href="tel:+13032267048">(303) 226-7048</a></div>
          <div><h4>Email</h4><a href="mailto:archway@archwayneuropsych.com">archway@archwayneuropsych.com</a></div>
        </div>
        <div className="fine">© 2026 Archway Neuropsychological Services, PLLC · Denver, Colorado</div>
      </footer>
    );
  }

  // Mobile shell convenience: header + drawer nav. Caller renders body and footer.
  function MobShell({ children }) {
    const [open, setOpen] = useState(false);
    return (
      <div className="mob-shell">
        <MobHeader onMenu={() => setOpen(true)} />
        <MobNav open={open} onClose={() => setOpen(false)} />
        {children}
        <MobFooter />
      </div>
    );
  }

  // CTA band (used by several pages)
  function CTABand({ heading = <>Want to discuss whether<br /><em>an evaluation is right for you?</em></>, cta = "Connect With Us", href = "contact.html" }) {
    return (
      <section className="cta-band" style={{ background: "var(--archway-teal-800)", padding: "72px 0" }}>
        <div className="container-wide" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 48, flexWrap: "wrap" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 400, color: "var(--paper-50)", margin: 0, letterSpacing: "-0.005em", lineHeight: 1.1, maxWidth: 600 }}>{heading}</h2>
          <a href={href} className="btn btn-light">{cta} →</a>
        </div>
      </section>
    );
  }

  function MobCTABand({ heading = <>Want to discuss whether<br /><em>an evaluation is right for you?</em></>, cta = "Connect With Us", href = "contact.html" }) {
    return (
      <section className="mob-cta-band">
        <h2>{heading}</h2>
        <a href={href} className="mob-btn">{cta}</a>
      </section>
    );
  }

  window.Archway = {
    useIsMobile,
    SiteHeader, SiteFooter, ServicesDropdown,
    MobHeader, MobNav, MobFooter, MobShell,
    CTABand, MobCTABand,
    LOGO, BRAIN,
  };
})();