import { useState } from "react";
import { Heart, Menu, ChevronDown, X } from "lucide-react";
import { Button } from "@/components/ui/button";

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

  return (
    <header className="bg-navy text-white relative z-50">
      <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 */}
          <div className="flex items-center">
            <div className="flex-shrink-0 flex items-center">
              <Heart className="text-gold text-2xl mr-3" />
              <span className="font-serif text-xl font-bold">WP ORGANIC</span>
            </div>
          </div>
          
          {/* Navigation Menu */}
          <nav className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-8">
              <a href="#" className="hover:text-gold transition-colors duration-300 font-medium">HOME</a>
              <a href="#" className="hover:text-gold transition-colors duration-300 font-medium">ABOUT US</a>
              <a href="#" className="hover:text-gold transition-colors duration-300 font-medium">SERVICES</a>
              <div className="relative group">
                <a href="#" className="hover:text-gold transition-colors duration-300 font-medium flex items-center">
                  RESOURCES <ChevronDown className="ml-1 w-3 h-3" />
                </a>
              </div>
              <a href="#" className="hover:text-gold transition-colors duration-300 font-medium">FAMILIES</a>
              <a href="#" className="hover:text-gold transition-colors duration-300 font-medium">NEWS</a>
              <a href="#" className="hover:text-gold transition-colors duration-300 font-medium">CONTACT</a>
            </div>
          </nav>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="text-white hover:text-gold"
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </Button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 bg-navy border-t border-gold/20">
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">HOME</a>
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">ABOUT US</a>
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">SERVICES</a>
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">RESOURCES</a>
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">FAMILIES</a>
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">NEWS</a>
              <a href="#" className="block px-3 py-2 text-white hover:text-gold transition-colors duration-300 font-medium">CONTACT</a>
            </div>
          </div>
        )}
      </div>
    </header>
  );
}