'use client';

import { useState, useEffect } from 'react';

const navLinks = [
  { label: 'Características', href: '#features' },
  { label: 'Precios', href: '#pricing' },
  { label: 'Contacto', href: '#contact' },
];

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

  const handleNavClick = (href: string) => {
    setMenuOpen(false);
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-[1000] bg-white/90 backdrop-blur-md border-b transition-all duration-250 ease-out ${
        scrolled ? 'border-gray-200 shadow-sm' : 'border-transparent'
      }`}
      role="banner"
    >
      <nav
        className="container flex items-center justify-between h-[72px] gap-8"
        aria-label="Navegación principal"
      >
        {/* Logo */}
        <a
          href="#"
          className="flex items-center gap-2 no-underline shrink-0"
          aria-label="FlowSync - inicio"
        >
          <span className="w-9 h-9 bg-black text-white rounded-md flex items-center justify-center text-xs font-extrabold tracking-[-0.02em]">
            FS
          </span>
          <span className="text-lg font-extrabold text-black tracking-[-0.04em]">
            FlowSync
          </span>
        </a>

        {/* Desktop links */}
        <ul
          className="hidden md:flex items-center justify-center gap-1 list-none flex-1"
          role="list"
        >
          {navLinks.map((link) => (
            <li key={link.href}>
              <button
                className="px-3 py-2 text-sm font-medium text-gray-600 rounded-md transition-colors duration-150 ease-out bg-transparent border-none cursor-pointer hover:text-black hover:bg-gray-100"
                onClick={() => handleNavClick(link.href)}
                aria-label={`Ir a sección ${link.label}`}
              >
                {link.label}
              </button>
            </li>
          ))}
        </ul>

        {/* Desktop CTA */}
        <div className="hidden md:flex items-center gap-3 shrink-0">
          <button className="btn btn-secondary" id="nav-login-btn">
            Iniciar sesión
          </button>
          <button
            className="btn btn-primary"
            id="nav-cta-btn"
            onClick={() => handleNavClick('#contact')}
          >
            Prueba gratis
          </button>
        </div>

        {/* Mobile toggle */}
        <button
          className="md:hidden flex flex-col gap-[5px] p-2 rounded-md bg-transparent border-none cursor-pointer"
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
          aria-expanded={menuOpen}
          id="nav-menu-toggle"
        >
          <span
            className={`block w-[22px] h-[2px] bg-black rounded-sm transition-transform duration-150 ease-out origin-center ${
              menuOpen ? 'translate-y-[7px] rotate-45' : ''
            }`}
          />
          <span
            className={`block w-[22px] h-[2px] bg-black rounded-sm transition-all duration-150 ease-out ${
              menuOpen ? 'opacity-0 scale-x-0' : ''
            }`}
          />
          <span
            className={`block w-[22px] h-[2px] bg-black rounded-sm transition-transform duration-150 ease-out origin-center ${
              menuOpen ? '-translate-y-[7px] -rotate-45' : ''
            }`}
          />
        </button>
      </nav>

      {/* Mobile menu */}
      {menuOpen && (
        <div
          className="md:hidden bg-white border-t border-gray-200 px-6 py-4 animate-fadeInUp"
          role="dialog"
          aria-label="Menú móvil"
        >
          <ul className="list-none flex flex-col gap-1 mb-4" role="list">
            {navLinks.map((link) => (
              <li key={link.href}>
                <button
                  className="block w-full text-left px-4 py-3 text-base font-medium text-dark rounded-md bg-transparent border-none cursor-pointer transition-colors duration-150 ease-out hover:bg-gray-100"
                  onClick={() => handleNavClick(link.href)}
                >
                  {link.label}
                </button>
              </li>
            ))}
          </ul>
          <div className="flex flex-col gap-3">
            <button className="btn btn-secondary w-full">Iniciar sesión</button>
            <button
              className="btn btn-primary w-full"
              onClick={() => handleNavClick('#contact')}
            >
              Prueba gratis
            </button>
          </div>
        </div>
      )}
    </header>
  );
}
