function TopBar({ email }) {
  return (
    <div className="vp-top-rail">
      <a href={`mailto:${email}`} className="vp-top-rail-email">
        <Icon.Mail size={12} />
        {email}
      </a>
    </div>
  );
}

function ServicesDropdown() {
  const services = [
    { title: "Outdoor Kitchens",            href: "/services/outdoor-kitchens.html", icon: <Icon.Kitchen /> },
    { title: "Pools",                       href: "/services/pools.html",            icon: <Icon.Pool /> },
    { title: "Pergolas & Shade Structures", href: "/services/pergolas.html",         icon: <Icon.Pergola /> },
    { title: "Custom Decks",                href: "/services/custom-decks.html",     icon: <Icon.Deck /> },
  ];

  return (
    <div className="vp-nav-services">
      <a href="/index.html#services" className="vp-nav-services-trigger">
        Services
        <svg className="vp-nav-caret" width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </a>
      <div className="vp-nav-services-panel" role="menu" aria-label="Services">
        <ul className="vp-nav-services-list">
          {services.map((s, i) => (
            <li key={i}>
              <a href={s.href} className="vp-nav-services-item" role="menuitem">
                <span className="vp-nav-services-icon" aria-hidden="true">{s.icon}</span>
                <span className="vp-nav-services-title">{s.title}</span>
                <svg className="vp-nav-services-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <line x1="5" y1="12" x2="19" y2="12"/>
                  <polyline points="12 5 19 12 12 19"/>
                </svg>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function MobileMenu({ phone, email, activePage }) {
  const [open, setOpen] = React.useState(false);

  // Lock body scroll while menu is open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close on Escape
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const close = () => setOpen(false);

  const services = [
    { title: "Outdoor Kitchens",            href: "/services/outdoor-kitchens.html" },
    { title: "Pools",                       href: "/services/pools.html" },
    { title: "Pergolas & Shade Structures", href: "/services/pergolas.html" },
    { title: "Custom Decks",                href: "/services/custom-decks.html" },
  ];

  return (
    <React.Fragment>
      <button
        type="button"
        className="vp-mb-burger"
        aria-label="Open menu"
        aria-expanded={open}
        onClick={() => setOpen(true)}
      >
        <span /><span /><span />
      </button>

      {open && (
        <div className="vp-mb-overlay" onClick={close} role="dialog" aria-modal="true">
          <div className="vp-mb-panel" onClick={(e) => e.stopPropagation()}>
            <div className="vp-mb-head">
              <img src="/assets/victory-pro-logo.webp" alt="Victory Pro Deck Builders" className="vp-mb-logo" />
              <button type="button" className="vp-mb-close" aria-label="Close menu" onClick={close}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>

            <nav className="vp-mb-links">
              <a href="/" onClick={close} className={activePage === "home" ? "is-active" : ""}>Home</a>

              <div className="vp-mb-group">
                <a href="/index.html#services" onClick={close} className={activePage === "services" ? "is-active vp-mb-group-head" : "vp-mb-group-head"}>Services</a>
                <div className="vp-mb-sublinks">
                  {services.map((s, i) => (
                    <a key={i} href={s.href} onClick={close}>{s.title}</a>
                  ))}
                </div>
              </div>

              <a href="/index.html#portfolio" onClick={close}>Signature Project</a>
              <a href="/service-areas.html" onClick={close} className={activePage === "service-areas" ? "is-active" : ""}>Service Areas</a>
              <a href="/blog.html" onClick={close} className={activePage === "blog" ? "is-active" : ""}>Blog</a>
              <a href="/index.html#contact" onClick={close}>Contact</a>
            </nav>

            <div className="vp-mb-foot">
              <a href={`tel:${phone}`} className="vp-mb-phone-link">
                <Icon.Phone size={14} /> {phone}
              </a>
              <a href={`mailto:${email}`} className="vp-mb-email-link">
                <Icon.Mail size={14} /> {email}
              </a>
              <a href="/index.html#quote" className="vp-mb-cta" onClick={close}>Get My Free Quote</a>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

function Nav({ phone, email, logoHref, activePage }) {
  const home = logoHref || "/";
  const mail = email || "ariel@victoryprodeckbuilders.com";
  return (
    <nav className="vp-nav">
      <a href={home} className="vp-logo-link" aria-label="Victory Pro Deck Builders — Home">
        <img src="/assets/victory-pro-logo.webp" alt="Victory Pro Deck Builders" className="vp-logo" />
      </a>
      <div className="vp-nav-pill">
        <a href="/" className={activePage === "home" ? "active" : ""}>Home</a>
        <ServicesDropdown />
        <a href="/index.html#portfolio">Signature Project</a>
        <a href="/service-areas.html" className={activePage === "service-areas" ? "active" : ""}>Service Areas</a>
        <a href="/blog.html" className={activePage === "blog" ? "active" : ""}>Blog</a>
        <a href="/index.html#contact">Contact</a>
      </div>
      <div className="vp-nav-cta">
        <a href={`tel:${phone}`} className="vp-phone-pill">
          <span className="ic"><Icon.Phone size={12} /></span>
          {phone}
        </a>
        <a href="/index.html#quote" className="vp-quote-btn">Get My Free Quote</a>
      </div>

      <MobileMenu phone={phone} email={mail} activePage={activePage} />
    </nav>
  );
}

window.TopBar = TopBar;
window.Nav = Nav;
window.MobileMenu = MobileMenu;