import { useState } from 'react'
import { Menu, X } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'

const links = [
  { href: '#accueil', label: 'Accueil' },
  { href: '#a-propos', label: 'À propos' },
  { href: '#services', label: 'Services' },
  { href: '#galerie', label: 'Galerie' },
  { href: '#faq', label: 'FAQ' },
  { href: '#contact', label: 'Contact' },
]

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

  return (
    <motion.header
      initial={{ y: -24, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
      className="fixed inset-x-0 top-0 z-50 border-b border-barber-border bg-barber-bg/75 backdrop-blur-xl backdrop-saturate-150"
    >
      <nav
        className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8"
        aria-label="Principale"
      >
        <a
          href="#accueil"
          className="group font-serif text-lg font-medium tracking-tight text-barber-cream sm:text-xl"
        >
          <span className="transition-colors group-hover:text-barber-gold">Atelier</span>{' '}
          <span className="bg-gradient-to-r from-barber-gold to-amber-300 bg-clip-text text-transparent transition-opacity group-hover:opacity-90">
            Royal
          </span>
        </a>

        <ul className="hidden items-center gap-3 md:flex md:gap-4 lg:gap-5">
          {links.map(({ href, label }) => (
            <li key={href}>
              <a
                href={href}
                className="whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium text-barber-cream/75 transition-colors hover:bg-white/[0.06] hover:text-barber-cream lg:text-sm"
              >
                {label}
              </a>
            </li>
          ))}
        </ul>

        <button
          type="button"
          className="flex h-10 w-10 items-center justify-center rounded-full border border-barber-border bg-white/[0.04] text-barber-gold transition-colors hover:border-barber-gold/50 hover:bg-barber-gold/10 md:hidden"
          aria-expanded={open}
          aria-controls="mobile-menu"
          onClick={() => setOpen((v) => !v)}
        >
          {open ? <X className="h-5 w-5" aria-hidden /> : <Menu className="h-5 w-5" aria-hidden />}
          <span className="sr-only">Menu</span>
        </button>
      </nav>

      <AnimatePresence>
        {open && (
          <motion.div
            id="mobile-menu"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.25 }}
            className="overflow-hidden border-b border-barber-border bg-barber-bg/95 backdrop-blur-xl md:hidden"
          >
            <ul className="flex flex-col gap-1 px-4 pb-4">
              {links.map(({ href, label }) => (
                <li key={href}>
                  <a
                    href={href}
                    onClick={() => setOpen(false)}
                    className="block rounded-xl px-3 py-3 text-sm font-medium text-barber-cream/90 transition-colors hover:bg-white/[0.06] hover:text-barber-gold"
                  >
                    {label}
                  </a>
                </li>
              ))}
            </ul>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.header>
  )
}