/*
 * DESIGN: "Clinical Warmth"
 * Navbar sticky con blur su scroll, logo a sinistra, menu a destra
 * Blu petrolio come colore primario, Cormorant Garamond per il brand name
 */
import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { ChevronDown, Menu, X, Phone, MapPin } from "lucide-react";

type NavLink = {
  label: string;
  href: string;
  children?: Array<{
    label: string;
    href: string;
  }>;
};

const navLinks: NavLink[] = [
  { label: "Chi Siamo", href: "#chi-siamo" },
  {
    label: "Servizi",
    href: "#servizi",
    children: [
      { label: "Visite cliniche e medicina preventiva", href: "#servizi" },
      { label: "Ecografia", href: "#servizi" },
      { label: "Radiologia", href: "#servizi" },
      { label: "Laboratorio", href: "#servizi" },
      { label: "Ematologia", href: "#servizi" },
      { label: "Biochimica", href: "#servizi" },
      { label: "Urine", href: "#servizi" },
      { label: "Citologia", href: "#servizi" },
      { label: "Coagulazione", href: "#servizi" },
      { label: "Endoscopia", href: "#servizi" },
      { label: "Laparoscopia", href: "#servizi" },
    ],
  },
  {
    label: "Visite Specialistiche",
    href: "#servizi",
    children: [
      { label: "Oncologia", href: "#servizi" },
      { label: "Dermatologia", href: "#servizi" },
      { label: "Oculistica", href: "#servizi" },
      { label: "Nutrizione", href: "#servizi" },
      { label: "Ortopedia", href: "#servizi" },
    ],
  },
  { label: "Il Team", href: "#team" },
  { label: "News", href: "#news" },
  { label: "Contatti", href: "#contatti" },
];

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

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      {/* Top bar informativa */}
      <div className="bg-[#1B4F72] text-white text-sm py-2 hidden md:block">
        <div className="container flex justify-between items-center">
          <div className="flex items-center gap-6">
            <span className="flex items-center gap-1.5">
              <MapPin size={13} className="text-[#4ECDC4]" />
              Via Quattro Passi, 16 — Formigine (MO)
            </span>
            <span className="flex items-center gap-1.5">
              <Phone size={13} className="text-[#4ECDC4]" />
              059 839.62.63 &nbsp;|&nbsp; 320 532.24.39 (urgenze 24h)
            </span>
          </div>
          <span className="text-[#4ECDC4] font-semibold tracking-wide text-xs uppercase">
            Reperibilità 24h · 7 giorni su 7
          </span>
        </div>
      </div>

      {/* Navbar principale */}
      <nav
        className={`sticky top-0 z-50 transition-all duration-300 ${
          scrolled
            ? "bg-white/95 backdrop-blur-md shadow-md"
            : "bg-white shadow-sm"
        }`}
      >
        <div className="container flex items-center justify-between h-16 md:h-20">
          {/* Logo */}
          <a href="#" className="flex items-center gap-2 md:gap-3 group shrink-0">
            <img
              src="/images/logo_high.png"
              alt="Simbolo Clinica Veterinaria Formiginese"
              className="h-10 md:h-14 w-auto object-contain"
            />
            <img
              src="/images/logo_low.png"
              alt="Clinica Veterinaria Formiginese"
              className="h-8 md:h-11 w-auto object-contain"
            />
          </a>

          {/* Desktop menu */}
          <div className="hidden md:flex items-center gap-6">
            {navLinks.map((link) => (
              <div key={link.label} className="relative group py-7">
                <a
                  href={link.href}
                  className="text-[#1B4F72] font-medium text-sm hover:text-[#4ECDC4] transition-colors duration-200 relative inline-flex items-center gap-1.5"
                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                >
                  {link.label}
                  {link.children && (
                    <ChevronDown
                      size={14}
                      className="transition-transform duration-200 group-hover:rotate-180"
                    />
                  )}
                  <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#4ECDC4] transition-all duration-300 group-hover:w-full" />
                </a>

                {link.children && (
                  <div className="absolute left-0 top-full w-72 rounded-2xl border border-gray-100 bg-white/95 p-3 shadow-xl backdrop-blur-md opacity-0 invisible translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
                    <div className="grid gap-1">
                      {link.children.map((child) => (
                        <a
                          key={child.label}
                          href={child.href}
                          className="rounded-xl px-3 py-2 text-sm text-[#1B4F72]/80 hover:bg-[#F5F0E8] hover:text-[#1B4F72] transition-colors"
                          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                        >
                          {child.label}
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* CTA buttons */}
          <div className="hidden md:flex items-center gap-3">
            <Button
              variant="outline"
              size="sm"
              className="border-[#1B4F72] text-[#1B4F72] hover:bg-[#1B4F72] hover:text-white transition-all duration-200"
              onClick={() => document.getElementById("registrazione")?.scrollIntoView({ behavior: "smooth" })}
            >
              Accedi
            </Button>
            <Button
              size="sm"
              className="bg-[#4ECDC4] hover:bg-[#3ab5ad] text-white font-semibold shadow-sm transition-all duration-200"
              onClick={() => document.getElementById("prenotazione")?.scrollIntoView({ behavior: "smooth" })}
            >
              Prenota Visita
            </Button>
          </div>

          {/* Mobile hamburger */}
          <button
            className="md:hidden p-2 text-[#1B4F72]"
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label="Menu"
          >
            {mobileOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {/* Mobile menu */}
        {mobileOpen && (
          <div className="md:hidden bg-white border-t border-gray-100 px-4 py-4 flex flex-col gap-4 shadow-lg">
            {navLinks.map((link) => (
              <div key={link.label} className="border-b border-gray-50 pb-2">
                <a
                  href={link.href}
                  className="text-[#1B4F72] font-medium py-2 hover:text-[#4ECDC4] transition-colors flex items-center justify-between"
                  onClick={() => setMobileOpen(false)}
                >
                  {link.label}
                  {link.children && <ChevronDown size={15} className="text-[#4ECDC4]" />}
                </a>
                {link.children && (
                  <div className="grid gap-1 pl-3 pt-1">
                    {link.children.map((child) => (
                      <a
                        key={child.label}
                        href={child.href}
                        className="rounded-lg px-3 py-1.5 text-sm text-[#1B4F72]/70 hover:bg-[#F5F0E8] hover:text-[#1B4F72] transition-colors"
                        onClick={() => setMobileOpen(false)}
                      >
                        {child.label}
                      </a>
                    ))}
                  </div>
                )}
              </div>
            ))}
            <div className="flex flex-col gap-2 pt-2">
              <Button
                variant="outline"
                className="border-[#1B4F72] text-[#1B4F72] w-full"
                onClick={() => { setMobileOpen(false); document.getElementById("registrazione")?.scrollIntoView({ behavior: "smooth" }); }}
              >
                Accedi / Registrati
              </Button>
              <Button
                className="bg-[#4ECDC4] hover:bg-[#3ab5ad] text-white w-full font-semibold"
                onClick={() => { setMobileOpen(false); document.getElementById("prenotazione")?.scrollIntoView({ behavior: "smooth" }); }}
              >
                Prenota Visita
              </Button>
            </div>
          </div>
        )}
      </nav>
    </>
  );
}