'use client';

import { useState, useEffect } from 'react';
import { Building2, Menu, X } from 'lucide-react';

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToSection = (id: string) => {
    setIsMobileMenuOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  const navItems = [
    { label: 'Accueil', id: 'hero' },
    { label: 'Notre Identité', id: 'identity' },
    { label: 'Notre Processus', id: 'process' },
    { label: 'Nos Avantages', id: 'advantages' },
    { label: 'Contact', id: 'contact' },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        isScrolled
          ? 'bg-white/98 backdrop-blur-xl shadow-2xl border-b border-gold/20'
          : 'bg-royal/95 backdrop-blur-md'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          <div
            className="flex items-center space-x-3 cursor-pointer group"
            onClick={() => scrollToSection('hero')}
          >
            <div className="relative">
              <div className="absolute inset-0 bg-gold/30 blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl"></div>
              <div className="relative bg-gradient-to-br from-gold to-[#b8975a] rounded-xl p-2.5 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <Building2 className={`w-6 h-6 transition-colors duration-500 ${isScrolled ? 'text-white' : 'text-white'}`} strokeWidth={2} />
              </div>
            </div>
            <span className={`text-2xl font-bold tracking-tight transition-colors duration-500 ${isScrolled ? 'text-royal' : 'text-white'}`}>
              Loc'<span className="text-gold">Pro</span> & Co
            </span>
          </div>

          <nav className="hidden md:flex items-center space-x-1">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => scrollToSection(item.id)}
                className={`relative px-4 py-2 transition-colors duration-500 font-medium text-sm tracking-wide group ${
                  isScrolled ? 'text-royal/90 hover:text-royal' : 'text-white/90 hover:text-white'
                }`}
              >
                <span className="relative z-10">{item.label}</span>
                <div className="absolute inset-0 bg-gold/0 group-hover:bg-gold/10 rounded-lg transition-all duration-300"></div>
                <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-0 group-hover:w-1/2 h-0.5 bg-gold transition-all duration-300"></div>
              </button>
            ))}
          </nav>

          <button
            className={`md:hidden p-2 hover:bg-black/10 rounded-lg transition-colors duration-500 ${
              isScrolled ? 'text-royal' : 'text-white'
            }`}
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {isMobileMenuOpen && (
        <div className={`md:hidden backdrop-blur-xl border-t shadow-2xl transition-colors duration-500 ${
          isScrolled ? 'bg-white/98 border-gold/20' : 'bg-royal/98 border-gold/20'
        }`}>
          <nav className="px-4 py-6 space-y-2">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => scrollToSection(item.id)}
                className={`block w-full text-left hover:bg-black/10 transition-all duration-300 font-medium py-3 px-4 rounded-lg ${
                  isScrolled ? 'text-royal/90 hover:text-royal' : 'text-white/90 hover:text-white'
                }`}
              >
                {item.label}
              </button>
            ))}
          </nav>
        </div>
      )}
    </header>
  );
}