import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { FiPhone, FiMenu, FiX } from 'react-icons/fi'

const navLinks = [
  { label: 'Mutuelle santé', href: '#' },
  { label: 'Assurance animaux', href: '#' },
  { label: 'Assurance auto', href: '#' },
  { label: 'Assurance habitation', href: '#' },
  { label: 'Assurance Emprunteur', href: '#' },
  { label: 'Contact', href: '#' },
]

export default function Navbar() {
  const [open, setOpen] = useState(false)

  return (
    <header className="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-100 shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <a href="#" className="flex items-center gap-2.5">
            <img
              src="/img/ico.webp"
              alt="AssurezMoi"
              className="w-9 h-9 rounded-xl object-contain"
            />
            <span className="font-extrabold text-xl tracking-tight text-slate-900">
              Assurez<span className="text-[#9CCC8A]">Moi</span>
            </span>
          </a>

          {/* Desktop nav */}
          <nav className="hidden lg:flex items-center gap-1">
            {navLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="px-3 py-2 text-sm text-slate-600 hover:text-[#9CCC8A] hover:bg-[#9CCC8A]/10 rounded-lg transition-all font-medium"
              >
                {link.label}
              </a>
            ))}
          </nav>

          {/* Phone CTA */}
          <div className="hidden lg:flex items-center gap-3">
            <a
              href="tel:+33180891030"
              className="flex items-center gap-2 bg-[#9CCC8A] hover:bg-[#87BE73] active:bg-[#74AB61] text-white text-sm font-bold px-4 py-2.5 rounded-xl transition-all shadow-md shadow-[#9CCC8A]/40"
            >
              <FiPhone className="text-base" />
              01 80 89 10 30
            </a>
          </div>

          {/* Mobile toggle */}
          <button
            className="lg:hidden p-2 rounded-lg text-slate-600 hover:bg-slate-100 transition-colors"
            onClick={() => setOpen((v) => !v)}
            aria-label="Menu"
          >
            {open ? <FiX size={22} /> : <FiMenu size={22} />}
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.18 }}
            className="lg:hidden border-t border-slate-100 bg-white px-4 pt-3 pb-5 space-y-1"
          >
            {navLinks.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="block px-3 py-2.5 text-sm text-slate-600 hover:text-[#9CCC8A] hover:bg-[#9CCC8A]/10 rounded-lg font-medium transition-colors"
              >
                {link.label}
              </a>
            ))}
            <a
              href="tel:+33180891030"
              className="mt-3 flex items-center justify-center gap-2 bg-[#9CCC8A] text-white text-sm font-bold px-4 py-3 rounded-xl w-full"
            >
              <FiPhone />
              01 80 89 10 30
            </a>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  )
}
