/* Shared MobileNavMenu component for all pages.
 * Usage: <MobileNavMenu open={open} onClose={() => setOpen(false)} active="home" />
 * active values: "home" | "about" | "portfolio" | "contact" | "web" | "mkt" | "brand"
 */
function MobileNavMenu({ open, onClose, active }) {
  const [servicesOpen, setServicesOpen] = React.useState(active === "web" || active === "mkt");

  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const ArrowIcon = () => (
    <svg className="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
  );

  const menu = (
    <div className={"mobile-menu" + (open ? " open" : "")} aria-hidden={!open} role="dialog">
      <div className="mobile-menu-head">
        <a className="brand" href="index.html" onClick={onClose}>
          <img src="assets/qd-logo.png" alt="Quantum Design" style={{ width: "40px", height: "40px", objectFit: "contain" }} />
          <span>Quantum Design</span>
        </a>
        <button className="mobile-menu-close" onClick={onClose} aria-label="Close menu">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></svg>
        </button>
      </div>

      <div className="mobile-menu-list">
        <a href="index.html" className={active === "home" ? "active" : ""} onClick={onClose}>Home <ArrowIcon /></a>
        <a href="about.html" className={active === "about" ? "active" : ""} onClick={onClose}>About <ArrowIcon /></a>

        <div className={"mobile-menu-acc" + (servicesOpen ? " open" : "")}>
          <button
            type="button"
            className={"mobile-menu-acc-btn" + (active === "web" || active === "mkt" ? " active" : "")}
            aria-expanded={servicesOpen}
            onClick={() => setServicesOpen((v) => !v)}>
            Services
            <svg className="chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
          </button>
          <div className="mobile-menu-acc-panel">
            <div className="mobile-menu-acc-inner">
              <a href="web-design.html" className={active === "web" ? "active" : ""} onClick={onClose}>Web Design</a>
              <a href="marketing.html" className={active === "mkt" ? "active" : ""} onClick={onClose}>Marketing &amp; SEO</a>
            </div>
          </div>
        </div>

        <a href="portfolio.html" className={active === "portfolio" ? "active" : ""} onClick={onClose}>Portfolio <ArrowIcon /></a>
        <a href="contact.html" className={active === "contact" ? "active" : ""} onClick={onClose}>Contact <ArrowIcon /></a>
      </div>

      <div className="mobile-menu-foot">
        <a href="contact.html" className="mobile-menu-cta" onClick={onClose}>Contact us</a>
      </div>
    </div>
  );

  // Render via portal to document.body to escape the nav's backdrop-filter containing block
  return ReactDOM.createPortal(menu, document.body);
}

function MobileNavToggle({ onClick }) {
  return (
    <button className="nav-mobile-toggle" onClick={onClick} aria-label="Open menu">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <line x1="4" y1="7" x2="20" y2="7" />
        <line x1="4" y1="12" x2="20" y2="12" />
        <line x1="4" y1="17" x2="20" y2="17" />
      </svg>
    </button>);
}

Object.assign(window, { MobileNavMenu, MobileNavToggle });