'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';
import { navLinks } from '@/data/site';

export function Header() {
  const pathname = usePathname();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header className="fixed inset-x-0 top-0 z-50 border-b border-steel-200/70 bg-white/95 backdrop-blur">
      <div className="section-shell flex h-20 items-center justify-between">
        <Link href="/" className="focus-ring text-xl font-bold text-brand-800">
          Plega <span className="text-accent">Movel</span>
        </Link>

        <button
          type="button"
          className="focus-ring inline-flex items-center rounded-md border border-steel-300 p-2 text-steel-700 lg:hidden"
          onClick={() => setIsOpen((prev) => !prev)}
          aria-label="Abrir navegación"
        >
          {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>

        <nav className="hidden items-center gap-8 lg:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`focus-ring text-sm font-semibold transition hover:text-brand-700 ${
                pathname === link.href ? 'text-brand-700' : 'text-steel-700'
              }`}
            >
              {link.label}
            </Link>
          ))}
          <Link
            href="/contacto"
            className="focus-ring rounded-md border border-accent bg-accent px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#d96d17]"
          >
            Solicitar cotización
          </Link>
        </nav>
      </div>

      {isOpen ? (
        <nav className="border-t border-steel-200 bg-white lg:hidden">
          <div className="section-shell grid gap-2 py-4">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setIsOpen(false)}
                className={`focus-ring rounded-md px-3 py-2 text-sm font-semibold transition hover:bg-brand-50 ${
                  pathname === link.href ? 'bg-brand-50 text-brand-700' : 'text-steel-700'
                }`}
              >
                {link.label}
              </Link>
            ))}
            <Link
              href="/contacto"
              onClick={() => setIsOpen(false)}
              className="focus-ring mt-1 rounded-md border border-accent bg-accent px-4 py-2 text-center text-sm font-semibold text-white transition hover:bg-[#d96d17]"
            >
              Solicitar cotización
            </Link>
          </div>
        </nav>
      ) : null}
    </header>
  );
}
