import { useState } from "react";
import { Phone, Mail, Menu, X } from "lucide-react";
import logoImage from "../../assets/2edc706805fecf0b3862a2e8f9240b675524c183.png";

const navLinks = [
  { label: "Home", href: "#home" },
  { label: "About Us", href: "#about" },
  { label: "Our Advantage", href: "#advantages" },
  { label: "Why Solar", href: "#why-solar" },
  { label: "Our Process", href: "#process" },
  { label: "Contact", href: "#contact" },
];

export function Header() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 shadow-md">
      {/* Top contact bar */}
      <div className="bg-[#1E3A5F] text-white py-2">
        <div className="container mx-auto px-4 flex justify-end items-center gap-6 text-sm">
          <a
            href="tel:6505482508"
            className="flex items-center gap-1.5 hover:text-orange-400 transition-colors"
          >
            <Phone className="w-3.5 h-3.5" />
            <span>(650) 548-2508</span>
          </a>
          <a
            href="mailto:sales@solarbasecorp.com"
            className="hidden sm:flex items-center gap-1.5 hover:text-orange-400 transition-colors"
          >
            <Mail className="w-3.5 h-3.5" />
            <span>sales@solarbasecorp.com</span>
          </a>
        </div>
      </div>

      {/* Main navigation */}
      <div className="bg-white border-b border-gray-100">
        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
          {/* Logo */}
          <a href="#home" className="flex-shrink-0">
            <img
              src={logoImage}
              alt="SolarBase GROUP"
              className="h-14 w-auto object-contain"
            />
          </a>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-7">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-gray-700 hover:text-orange-500 transition-colors text-sm font-medium tracking-wide whitespace-nowrap"
              >
                {link.label}
              </a>
            ))}
            <a
              href="#contact"
              className="bg-orange-500 hover:bg-orange-600 text-white px-5 py-2.5 rounded-md text-sm font-semibold transition-colors whitespace-nowrap ml-2"
            >
              Get a Free Quote
            </a>
          </nav>

          {/* Mobile Menu Toggle */}
          <button
            className="lg:hidden p-2 text-gray-700"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
          >
            {menuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Dropdown Menu */}
        {menuOpen && (
          <div className="lg:hidden bg-white border-t border-gray-100 px-4 pb-4">
            <nav className="flex flex-col">
              {navLinks.map((link) => (
                <a
                  key={link.href}
                  href={link.href}
                  className="text-gray-700 hover:text-orange-500 py-3 border-b border-gray-100 text-sm font-medium transition-colors"
                  onClick={() => setMenuOpen(false)}
                >
                  {link.label}
                </a>
              ))}
              <a
                href="#contact"
                className="bg-orange-500 hover:bg-orange-600 text-white px-5 py-3 rounded-md text-sm font-semibold text-center mt-4 transition-colors"
                onClick={() => setMenuOpen(false)}
              >
                Get a Free Quote
              </a>
            </nav>
          </div>
        )}
      </div>
    </header>
  );
}
