"use client"

import { useState } from "react"
import Link from "next/link"
import Image from "next/image"                 // 👈 importa
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"

export function Navigation() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <nav className="sticky top-0 z-50 glass-nav border-b border-white/20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* LOGO */}
          <Link href="/" className="flex items-center space-x-2">
            <Image
              src="/new/logo-eptca.png"       // 👈 prefixo /new explícito
              alt="EPTCA"
              width={160}
              height={40}
              priority
              className="block h-10 w-auto"
            />
          </Link>

          {/* LINKS DESKTOP */}
          <div className="hidden md:flex items-center space-x-8">
            <Link href="/" className="text-foreground hover:text-primary transition-all duration-300 font-medium relative group">
              Home
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full" />
            </Link>
            <Link href="/servicos" className="text-foreground hover:text-primary transition-all duration-300 font-medium relative group">
              Serviços
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full" />
            </Link>
            <Link href="/produtos" className="text-foreground hover:text-primary transition-all duration-300 font-medium relative group">
              Produtos
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full" />
            </Link>
            <Link href="/sobre" className="text-foreground hover:text-primary transition-all duration-300 font-medium relative group">
              Sobre
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full" />
            </Link>
            <Link href="/responsabilidade-social" className="text-foreground hover:text-primary transition-all duration-300 font-medium relative group">
              Responsabilidade Social
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full" />
            </Link>
            <Link href="/contato" className="text-foreground hover:text-primary transition-all duration-300 font-medium relative group">
              Contato
              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-primary to-secondary transition-all duration-300 group-hover:w-full" />
            </Link>
            <Link href="/contato">
              <Button className="gradient-primary border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                Cotação Imediata
              </Button>
            </Link>
          </div>

          {/* BOTÃO MOBILE */}
          <div className="md:hidden">
            <Button variant="ghost" size="sm" onClick={() => setIsOpen(!isOpen)} className="glass-card">
              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </Button>
          </div>
        </div>

        {/* MENU MOBILE */}
        {isOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 glass-card rounded-2xl mt-2 shadow-xl">
              <Link href="/" className="block px-4 py-3 text-foreground hover:text-primary hover:bg-white/50 rounded-xl transition-all duration-300 font-medium" onClick={() => setIsOpen(false)}>
                Home
              </Link>
              <Link href="/servicos" className="block px-4 py-3 text-foreground hover:text-primary hover:bg-white/50 rounded-xl transition-all duration-300 font-medium" onClick={() => setIsOpen(false)}>
                Serviços
              </Link>
              <Link href="/produtos" className="block px-4 py-3 text-foreground hover:text-primary hover:bg-white/50 rounded-xl transition-all duration-300 font-medium" onClick={() => setIsOpen(false)}>
                Produtos
              </Link>
              <Link href="/sobre" className="block px-4 py-3 text-foreground hover:text-primary hover:bg-white/50 rounded-xl transition-all duration-300 font-medium" onClick={() => setIsOpen(false)}>
                Sobre
              </Link>
              <Link href="/responsabilidade-social" className="block px-4 py-3 text-foreground hover:text-primary hover:bg-white/50 rounded-xl transition-all duration-300 font-medium" onClick={() => setIsOpen(false)}>
                Responsabilidade Social
              </Link>
              <Link href="/contato" className="block px-4 py-3 text-foreground hover:text-primary hover:bg-white/50 rounded-xl transition-all duration-300 font-medium" onClick={() => setIsOpen(false)}>
                Contato
              </Link>
              <div className="px-3 py-2">
                <Link href="/contato">
                  <Button className="w-full gradient-primary border-0 shadow-lg">Cotação Imediata</Button>
                </Link>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}