// Sticky top navbar — mobile-first.
// Compact 60px bar on phone: wordmark left, hamburger + Quote CTA right.
// Tablet+: inline nav links visible, larger CTA.
const NT = window.Tokens;

function Navbar({ onQuote }) {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
    ["Services",  "#services"],
    ["Reviews",   "#reviews"],
    ["About",     "#about"],
    ["Careers",   "#careers"],
    ["FAQ",       "#faq"],
  ];

  return (
    <nav className="apex-nav" style={{
      position: "sticky", top: 0, zIndex: 50,
      borderBottom: `1px solid ${NT.border}`,
      background: "rgba(248,245,238,0.92)",
      backdropFilter: "blur(20px)",
      WebkitBackdropFilter: "blur(20px)",
      boxShadow: "0 4px 12px rgba(31,29,29,0.04)",
    }}>
      <div className="apex-nav-inner">
        {/* Wordmark — APEX serif stacked with gold rule + compact subtype below */}
        <a href="#top" className="apex-wordmark" style={{ textDecoration: "none" }}>
          <span className="apex-wordmark-apex" style={{
            fontFamily: NT.fontSerif, fontWeight: 500, color: NT.burgundy,
            letterSpacing: "0.18em",
          }}>APEX</span>
          <span className="apex-wordmark-rule" />
          <span className="apex-wordmark-sub" style={{
            fontFamily: NT.fontSans, fontWeight: 600,
            textTransform: "uppercase", letterSpacing: "0.30em",
            color: "rgba(31,29,29,0.7)",
          }}>Cleaning Solutions</span>
        </a>

        {/* Desktop nav links */}
        <ul className="apex-nav-links">
          {links.map(([label, href]) => (
            <li key={href}>
              <a href={href}>{label}</a>
            </li>
          ))}
        </ul>

        <div className="apex-nav-actions">
          <a
            href="https://www.instagram.com/apexcleaning_fw?igsh=MWR4YmZmZDkzbm96ag%3D%3D&utm_source=qr"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Apex Cleaning on Instagram"
            className="apex-nav-social">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect width="20" height="20" x="2" y="2" rx="5"/>
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
              <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>
            </svg>
          </a>
          <button
            onClick={() => setMobileOpen(v => !v)}
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
            className="apex-nav-burger">
            {mobileOpen ? <Icons.X size={20}/> : <Icons.Menu size={20}/>}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="apex-mobile-menu">
          {links.map(([label, href], i) => (
            <a key={href} href={href} onClick={() => setMobileOpen(false)}>
              <span>
                <span className="apex-menu-num">{String(i + 1).padStart(2, "0")}</span>
                {label}
              </span>
              <Icons.ArrowRight size={14}/>
            </a>
          ))}
          <button onClick={() => { setMobileOpen(false); onQuote && onQuote(); }} className="apex-mobile-cta">
            Get a 60-second Quote
            <Icons.ArrowRight size={16}/>
          </button>
        </div>
      )}
    </nav>
  );
}

window.Navbar = Navbar;