import { useState } from "react";
import { Link } from "react-router-dom";
import { Search, ShoppingCart, Menu, X, Flame } from "lucide-react";

const navItems = [
  { label: "Products", href: "/products" },
  { label: "Ceramic Grills", href: "/products?category=ceramic-grills" },
  { label: "Gas & Charcoal BBQs", href: "/products?category=gas-charcoal-bbqs" },
  { label: "Smoker Boxes", href: "/products?category=smoker-boxes" },
  { label: "Premium Knives", href: "/products?category=premium-knives" },
  { label: "Cast Iron", href: "/products?category=cast-iron-cookware" },
];

const Header = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-[#1a1a1a]/95 backdrop-blur-md border-b border-[#333]">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 lg:h-20">
          {/* Logo */}
          <Link to="/" className="flex items-center gap-2 shrink-0">
            <Flame className="w-8 h-8 text-[#d35400]" />
            <div className="flex flex-col leading-none">
              <span className="font-oswald text-xl lg:text-2xl font-bold text-white tracking-wider uppercase">
                GrillMaster
              </span>
              <span className="font-oswald text-[10px] lg:text-xs font-light text-[#d35400] tracking-[0.3em] uppercase">
                Pro
              </span>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden xl:flex items-center gap-1">
            {navItems.map((item) => (
              <Link
                key={item.label}
                to={item.href}
                className="font-oswald text-sm font-medium text-[#b0b0b0] hover:text-[#d35400] px-3 py-2 transition-colors duration-300 uppercase tracking-wider whitespace-nowrap"
              >
                {item.label}
              </Link>
            ))}
            <Link
              to="/about"
              className="font-oswald text-sm font-medium text-[#b0b0b0] hover:text-[#d35400] px-3 py-2 transition-colors duration-300 uppercase tracking-wider whitespace-nowrap"
            >
              About
            </Link>
            <Link
              to="/contact"
              className="font-oswald text-sm font-medium text-[#b0b0b0] hover:text-[#d35400] px-3 py-2 transition-colors duration-300 uppercase tracking-wider whitespace-nowrap"
            >
              Contact
            </Link>
          </nav>

          {/* Right Actions */}
          <div className="flex items-center gap-3">
            {/* Search */}
            <div className="relative">
              {searchOpen ? (
                <div className="flex items-center gap-2">
                  <input
                    type="text"
                    placeholder="Search grills, smokers..."
                    className="bg-[#2b2b2b] border border-[#444] rounded px-3 py-1.5 text-sm text-white placeholder:text-[#888] focus:outline-none focus:border-[#d35400] w-40 lg:w-56 transition-all"
                    autoFocus
                  />
                  <button
                    onClick={() => setSearchOpen(false)}
                    className="text-[#888] hover:text-white transition-colors"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>
              ) : (
                <button
                  onClick={() => setSearchOpen(true)}
                  className="text-[#b0b0b0] hover:text-[#d35400] transition-colors p-2"
                  aria-label="Search"
                >
                  <Search className="w-5 h-5" />
                </button>
              )}
            </div>

            {/* Cart */}
            <Link to="/cart" className="relative text-[#b0b0b0] hover:text-[#d35400] transition-colors p-2" aria-label="Shopping cart">
              <ShoppingCart className="w-5 h-5" />
            </Link>

            {/* Mobile Menu Toggle */}
            <button
              className="xl:hidden text-[#b0b0b0] hover:text-white transition-colors p-2"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="xl:hidden bg-[#1a1a1a] border-t border-[#333] animate-in slide-in-from-top-2">
          <nav className="max-w-[1400px] mx-auto px-4 py-4 flex flex-col gap-1">
            {navItems.map((item) => (
              <Link
                key={item.label}
                to={item.href}
                className="font-oswald text-base font-medium text-[#b0b0b0] hover:text-[#d35400] hover:bg-[#2b2b2b] px-4 py-3 rounded transition-all uppercase tracking-wider"
                onClick={() => setMobileMenuOpen(false)}
              >
                {item.label}
              </Link>
            ))}
            <Link
              to="/about"
              className="font-oswald text-base font-medium text-[#b0b0b0] hover:text-[#d35400] hover:bg-[#2b2b2b] px-4 py-3 rounded transition-all uppercase tracking-wider"
              onClick={() => setMobileMenuOpen(false)}
            >
              About
            </Link>
            <Link
              to="/contact"
              className="font-oswald text-base font-medium text-[#b0b0b0] hover:text-[#d35400] hover:bg-[#2b2b2b] px-4 py-3 rounded transition-all uppercase tracking-wider"
              onClick={() => setMobileMenuOpen(false)}
            >
              Contact
            </Link>
          </nav>
        </div>
      )}
    </header>
  );
};

export default Header;