"use client";

import { useState } from "react";
import Link from "next/link";
import { Menu, X, Shield } from "lucide-react";
import { cn } from "@/lib/utils";

const navigation = [
  { name: "Accueil", href: "/" },
  { name: "Services", href: "/services" },
  { name: "Articles", href: "/articles" },
  { name: "Démos", href: "/demos" },
  { name: "À propos", href: "/about" },
];

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 bg-cosmos-900/95 backdrop-blur-sm border-b border-cosmos-800">
      <nav className="mx-auto max-w-7xl px-6 lg:px-8" aria-label="Navigation principale">
        <div className="flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center gap-3 group">
            <div className="w-9 h-9 rounded-lg bg-araucaria-500 flex items-center justify-center group-hover:bg-araucaria-400 transition-colors">
              <Shield className="w-5 h-5 text-cosmos-950" />
            </div>
            <span className="text-lg font-bold text-nieve tracking-tight">
              Der-topogo
            </span>
          </Link>

          <div className="hidden md:flex md:items-center md:gap-1">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="px-4 py-2 text-sm font-medium text-cosmos-200 hover:text-nieve hover:bg-cosmos-800 rounded-lg transition-colors"
              >
                {item.name}
              </Link>
            ))}
            <Link
              href="/contact"
              className="ml-4 px-5 py-2 text-sm font-semibold bg-kultrun-700 text-nieve rounded-lg hover:bg-kultrun-600 transition-colors"
            >
              Contact
            </Link>
          </div>

          <button
            type="button"
            className="md:hidden p-2 text-cosmos-200 hover:text-nieve"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <span className="sr-only">Ouvrir le menu</span>
            {mobileMenuOpen ? (
              <X className="h-6 w-6" />
            ) : (
              <Menu className="h-6 w-6" />
            )}
          </button>
        </div>

        <div
          className={cn(
            "md:hidden overflow-hidden transition-all duration-300",
            mobileMenuOpen ? "max-h-96 pb-4" : "max-h-0"
          )}
        >
          <div className="space-y-1 pt-2">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="block px-4 py-3 text-base font-medium text-cosmos-200 hover:text-nieve hover:bg-cosmos-800 rounded-lg transition-colors"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.name}
              </Link>
            ))}
            <Link
              href="/contact"
              className="block px-4 py-3 text-base font-semibold text-kultrun-300 hover:text-kultrun-200 hover:bg-cosmos-800 rounded-lg transition-colors"
              onClick={() => setMobileMenuOpen(false)}
            >
              Contact
            </Link>
          </div>
        </div>
      </nav>
    </header>
  );
}