
"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { Menu, X, Search, Phone, Mail } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const navigationLinks = [
    { href: "/", label: "Inicio" },
    { href: "/nosotros", label: "Nosotros" },
    { href: "/acerca-de", label: "Acerca de..." },
  ];

  return (
    <>
      {/* Top Bar */}
      <div className="bg-[#00B8D4] text-white py-2">
        <div className="container-custom">
          <div className="flex items-center justify-center text-sm font-medium space-x-6">
            <div className="flex items-center space-x-2">
              <Phone className="h-4 w-4" />
              <span>+56 9 7196 6555</span>
            </div>
            <div className="flex items-center space-x-2">
              <Mail className="h-4 w-4" />
              <span>contacto@escuelasdeportivaschile.cl</span>
            </div>
          </div>
        </div>
      </div>

      {/* Main Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div className="container-custom">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <Link href="/" className="flex items-center">
              <div className="relative h-12 w-12">
                <Image
                  src="/favicon.svg"
                  alt="Escuelas Deportivas Chile"
                  fill
                  className="object-contain"
                />
              </div>
              <span className="ml-3 text-xl font-bold text-[#0A2240] hidden sm:block">
                Escuelas Deportivas Chile
              </span>
            </Link>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              {navigationLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-gray-700 hover:text-[#00B8D4] font-medium transition-colors duration-200 relative group"
                >
                  {link.label}
                  <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#00B8D4] transition-all duration-200 group-hover:w-full"></span>
                </Link>
              ))}
              <Button 
                asChild
                variant="ghost" 
                size="icon" 
                className="text-gray-700 hover:text-[#00B8D4]"
              >
                <Link href="/#busqueda">
                  <Search className="h-5 w-5" />
                  <span className="sr-only">Buscar</span>
                </Link>
              </Button>
            </nav>

            {/* Mobile Menu Button */}
            <Button
              variant="ghost"
              size="icon"
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label="Abrir menú"
            >
              {isMenuOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </Button>
          </div>

          {/* Mobile Navigation */}
          <div
            className={cn(
              "md:hidden overflow-hidden transition-all duration-300 ease-in-out",
              isMenuOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0"
            )}
          >
            <nav className="py-4 space-y-2 border-t border-gray-200">
              {navigationLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="block px-4 py-2 text-gray-700 hover:text-[#00B8D4] hover:bg-gray-50 rounded-lg font-medium transition-colors duration-200"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {link.label}
                </Link>
              ))}
              <Button
                asChild
                variant="ghost"
                className="w-full justify-start px-4 py-2 text-gray-700 hover:text-[#00B8D4]"
                onClick={() => setIsMenuOpen(false)}
              >
                <Link href="/#busqueda">
                  <Search className="h-5 w-5 mr-2" />
                  Buscar
                </Link>
              </Button>
            </nav>
          </div>
        </div>
      </header>
    </>
  );
}
