"use client"

import type React from "react"
import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { ChevronDown } from "lucide-react"

export default function Header() {
  const pathname = usePathname()
  const [isProductsOpen, setIsProductsOpen] = useState(false)

  const handleInicioClick = (e: React.MouseEvent) => {
    if (pathname === "/") {
      e.preventDefault()
      window.scrollTo({ top: 0, behavior: "smooth" })
    }
  }

  return (
    <nav className="sticky top-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link href="/">
            <Image src="/images/logo-tera-azul.png" alt="Tera Logo" width={120} height={40} className="h-10 w-auto" />
          </Link>
          <div className="hidden md:flex space-x-8">
            <Link
              href="/"
              className="text-sm font-medium hover:text-primary transition-colors"
              onClick={handleInicioClick}
            >
              Inicio
            </Link>
            <Link href="/nosotros" className="text-sm font-medium hover:text-primary transition-colors">
              Nosotros
            </Link>
            <Link href="/talento-it" className="text-sm font-medium hover:text-primary transition-colors">
              Talento IT
            </Link>
            <Link href="/odoo" className="text-sm font-medium hover:text-primary transition-colors">
              Odoo Partner
            </Link>
            
            <div className="relative">
              <button
                onClick={() => setIsProductsOpen(!isProductsOpen)}
                className="text-sm font-medium hover:text-primary transition-colors flex items-center gap-1"
              >
                Productos
                <ChevronDown className="h-3 w-3" />
              </button>

              {/* Dropdown Menu */}
              {isProductsOpen && (
                <div className="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                  <Link
                    href="/sortwhats"
                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary transition-colors"
                    onClick={() => setIsProductsOpen(false)}
                  >
                    SortWhats
                  </Link>
                  <Link
                    href="/nomina"
                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary transition-colors"
                    onClick={() => setIsProductsOpen(false)}
                  >
                    Nómina
                  </Link>
                  <Link
                    href="/vecta"
                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-primary transition-colors"
                    onClick={() => setIsProductsOpen(false)}
                  >
                    Vecta
                  </Link>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </nav>
  )
}