/* Nav — refined: solid links + Services dropdown with product subcategories.
   Magnetic CTA preserved. */
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [openMenu, setOpenMenu] = React.useState(null); // 'services' | null

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const ctaRef = useMagnetic(0.2);

  // Services subcategories — each product, with concise list of what's inside.
  const services = [
    {
      key: 'code',
      title: 'Grippy Code',
      sub: 'Websites that close',
      href: 'services.html#code',
      items: ['Conversion-tuned sites', 'Custom Next.js builds', 'SEO & speed', 'Migrations & redesigns'],
    },
    {
      key: 'voice',
      title: 'Grippy Voice',
      sub: 'AI receptionist · 24/7',
      href: 'services.html#voice',
      items: ['24/7 call answering', 'Live transcription', 'Booking & dispatch', 'Custom voice personas'],
    },
    {
      key: 'hub',
      title: 'Grippy Hub',
      sub: 'CRM & operations',
      href: 'services.html#hub',
      items: ['Unified inbox', 'Pipeline & quotes', 'Live calendar', 'Reporting & exports'],
    },
    {
      key: 'addons',
      title: 'Addons',
      sub: 'Plug in your stack',
      href: 'services.html#addons',
      items: ['Stripe payments', 'Gmail & Outlook inbox', 'Calendar & booking', 'WhatsApp & Instagram'],
    },
  ];

  const primary = [
    { label: 'About',    href: 'about.html',    type: 'link' },
    { label: 'Services', href: 'services.html', type: 'menu', menu: 'services' },
    { label: 'Blog',     href: 'blog.html',     type: 'link' },
    { label: 'Contact',  href: 'contact.html',  type: 'link' },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? 'py-3' : 'py-6'}`}
      onMouseLeave={() => setOpenMenu(null)}
    >
      <div className={`mx-auto max-w-[1400px] px-6 flex items-center justify-between transition-all duration-500 ${scrolled ? 'bg-black/75 backdrop-blur-xl border border-white/10 rounded-2xl py-3 px-5' : ''}`}>

        <a href="index.html" className="group" aria-label="Grippy Code — home">
          <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 900, letterSpacing: '-0.04em', fontSize: '19px', color: '#fff' }}>GRIPPY C<span style={{ color: '#FF5736' }}>O</span>DE</span>
        </a>

        <nav className="hidden md:flex items-center gap-1 text-sm relative">
          {primary.map(item => {
            if (item.type === 'menu') {
              const open = openMenu === item.menu;
              return (
                <div
                  key={item.label}
                  className="relative"
                  onMouseEnter={() => setOpenMenu(item.menu)}
                >
                  <a
                    href={item.href}
                    className={`group relative inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg transition-colors ${open ? 'text-white' : 'text-white/75 hover:text-white'}`}
                  >
                    <span className="font-medium">{item.label}</span>
                    <svg width="10" height="10" viewBox="0 0 10 10" className={`transition-transform ${open ? 'rotate-180' : ''}`}>
                      <path d="M2 4l3 3 3-3" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </a>
                  {open && <ServicesMenu items={services} onClose={() => setOpenMenu(null)}/>}
                </div>
              );
            }
            return (
              <a
                key={item.label}
                href={item.href}
                className="group relative px-3.5 py-2 text-white/75 hover:text-white transition-colors rounded-lg"
              >
                <span className="relative z-10 font-medium">{item.label}</span>
                <span className="absolute inset-x-3 bottom-1 h-px scale-x-0 group-hover:scale-x-100 origin-left bg-flame transition-transform duration-300"></span>
              </a>
            );
          })}
          <span className="mx-2 w-px h-4 bg-white/10"></span>
          <a href="pricing.html" className="px-3 py-2 text-white/55 hover:text-white text-xs font-mono tracking-[0.2em] uppercase">Pricing</a>
        </nav>

        <div ref={ctaRef} className="magnetic">
          <a href="contact.html" className="group inline-flex items-center gap-2 bg-flame hover:bg-ember text-black font-semibold text-sm px-5 py-2.5 rounded-full transition-colors">
            Book a demo
            <span className="inline-block transition-transform group-hover:translate-x-1">→</span>
          </a>
        </div>
      </div>
    </header>
  );
};

const ServicesMenu = ({ items, onClose }) => (
  <div
    className="absolute left-1/2 -translate-x-1/2 top-[calc(100%+8px)] w-[760px] max-w-[88vw] rounded-2xl border border-white/10 bg-[#0a0a0a]/95 backdrop-blur-xl shadow-[0_30px_80px_rgba(0,0,0,0.6)] overflow-hidden"
    onMouseLeave={onClose}
  >
    <div className="grid grid-cols-2">
      {items.map(s => (
        <a
          key={s.key}
          href={s.href}
          className="group block p-5 border-b border-r border-white/[0.06] last:border-r-0 hover:bg-white/[0.025] transition-colors"
        >
          <div className="flex items-center gap-2">
            <span className="font-mono text-[9px] tracking-[0.22em] text-flame uppercase">{s.title}</span>
          </div>
          <div className="mt-1 text-white font-semibold text-[15px] tracking-tight">{s.sub}</div>
          <ul className="mt-3 grid grid-cols-2 gap-y-1.5 gap-x-3">
            {s.items.map(it => (
              <li key={it} className="text-white/55 text-[12.5px] flex items-center gap-1.5">
                <span className="w-1 h-1 rounded-full bg-white/25 group-hover:bg-flame transition-colors"></span>
                {it}
              </li>
            ))}
          </ul>
          <div className="mt-3 inline-flex items-center gap-1.5 font-mono text-[9.5px] tracking-[0.22em] text-white/45 uppercase group-hover:text-flame transition-colors">
            Explore <span className="transition-transform group-hover:translate-x-0.5">→</span>
          </div>
        </a>
      ))}
    </div>
    <div className="flex items-center justify-between px-5 py-3 border-t border-white/[0.06] bg-white/[0.015]">
      <span className="font-mono text-[10px] tracking-[0.22em] text-white/45 uppercase">One platform · four products</span>
      <a href="services.html" className="font-mono text-[10px] tracking-[0.22em] text-flame hover:text-ember uppercase">See all services →</a>
    </div>
  </div>
);

window.Nav = Nav;