import { useEffect, useState } from 'react';
import { Menu, X } from 'lucide-react';
import { cn } from '@/lib/cn';

const NAV_LINKS = [
  { href: '#testimonials', label: 'Testimonials' },
  { href: '#features', label: 'Features' },
  { href: '#pricing', label: 'Pricing' },
  { href: '#resources', label: 'Resources' },
];

export function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  return (
    <header
      className={cn(
        'fixed top-0 inset-x-0 z-50 transition-all',
        scrolled
          ? 'backdrop-blur-md bg-white/80 border-b border-ink-100'
          : 'bg-transparent border-b border-transparent',
      )}
    >
      <div className="container flex h-16 items-center justify-between">
        <a href="/" className="flex items-center" aria-label="Home">
          <img
            src="/logo-dark.png"
            alt="eLegal Software"
            className="h-7 md:h-8 w-auto"
            width={450}
            height={45}
          />
        </a>

        <nav className="hidden md:flex items-center gap-8">
          {NAV_LINKS.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="text-sm font-medium text-ink-600 hover:text-ink-900 transition"
            >
              {link.label}
            </a>
          ))}
        </nav>

        <div className="hidden md:flex items-center gap-2">
          <a href="/login" className="btn-ghost text-sm">
            Login
          </a>
          <a href="/signup" className="btn-primary text-sm py-2.5">
            Get Started
          </a>
        </div>

        <button
          type="button"
          className="md:hidden grid h-10 w-10 place-items-center rounded-lg text-ink-700"
          onClick={() => setOpen((v) => !v)}
          aria-label="Toggle menu"
        >
          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-ink-100 bg-white">
          <div className="container py-4 flex flex-col gap-3">
            {NAV_LINKS.map((link) => (
              <a
                key={link.href}
                href={link.href}
                onClick={() => setOpen(false)}
                className="py-2 text-sm font-medium text-ink-700"
              >
                {link.label}
              </a>
            ))}
            <div className="flex gap-2 pt-2">
              <a href="/login" className="btn-secondary flex-1 text-sm">
                Login
              </a>
              <a href="/signup" className="btn-primary flex-1 text-sm">
                Get Started
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}