// TopNav.jsx — sticky top navigation
// Inter 500/700, logo image left, 5 links centered, gradient CTA right.

// TopNav.jsx — sticky top navigation
// Desktop: logo left, link rail center, CTA right.
// Mobile (container <= 720px): hamburger left, logo center, phone+pin icons right.
// Mobile-only elements are display:none on desktop, swapped in via container query.

function TopNav({ active = "Services" }) {
  const links = [
    { label: "Services",  href: "#services" },
    { label: "Locations", href: "location-finder.html" },
    { label: "Careers",   href: "#careers" },
    { label: "Resources", href: "#resources" },
    { label: "About",     href: "#about" },
  ];
  return (
    <header className="rd-nav">
      <button className="rd-nav__hamburger" type="button" aria-label="Open menu">
        <span></span><span></span><span></span>
      </button>
      <a href="index.html" className="rd-nav__logo" aria-label="Raydar Collision Group home" />
      <nav className="rd-nav__links">
        {links.map((l) => (
          <a key={l.label} href={l.href} className={l.label === active ? "is-active" : ""}>
            {l.label}
          </a>
        ))}
      </nav>
      <div className="rd-nav__mobile-icons">
        <a href="tel:+1" aria-label="Call" className="rd-nav__icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
        <a href="location-finder.html" aria-label="Find a location" className="rd-nav__icon">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M12 22s8-7 8-13a8 8 0 1 0-16 0c0 6 8 13 8 13Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
            <circle cx="12" cy="9" r="3" stroke="currentColor" strokeWidth="2" />
          </svg>
        </a>
      </div>
      <a href="location-finder.html" className="btn-primary btn-primary--sm rd-nav__cta" style={{ textDecoration: "none" }}>
        Find a&nbsp; Location
      </a>
    </header>
  );
}

window.TopNav = TopNav;