import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { Menu, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import logo from "@/assets/logo.png";

const navLinks = [
  { label: "Home", path: "/" },
  { label: "About", path: "/about" },
  { label: "Products", path: "/products" },
  { label: "Gold Process", path: "/gold-process" },
  { label: "Export & Logistics", path: "/export-logistics" },
  { label: "Why Choose Us", path: "/why-choose-us" },
  { label: "Certifications", path: "/certifications" },
  { label: "FAQ", path: "/faq" },
  { label: "Contact", path: "/contact" },
];

const Header = () => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const location = useLocation();

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-secondary/95 backdrop-blur-md border-b border-primary/20">
      <div className="container mx-auto px-4 flex items-center justify-between h-16 md:h-20">
        {/* Logo */}
        <Link to="/" className="shrink-0">
          <img src={logo} alt="Primera Gold Africa" className="h-10 md:h-14 w-auto" />
        </Link>

        {/* Centered Nav */}
        <nav className="hidden lg:flex items-center gap-1 flex-1 justify-center">
          {navLinks.map((link) => (
            <Link
              key={link.path}
              to={link.path}
              className={`px-3 py-2 text-sm font-medium rounded-md transition-colors ${
                location.pathname === link.path
                  ? "text-primary"
                  : "text-white/80 hover:text-primary"
              }`}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        {/* CTA Button */}
        <Link
          to="/contact"
          className="hidden lg:inline-flex shrink-0 gold-gradient px-5 py-2.5 rounded-lg font-semibold text-secondary text-sm hover:opacity-90 transition-opacity"
        >
          Get a Quote
        </Link>

        <button
          onClick={() => setMobileOpen(!mobileOpen)}
          className="lg:hidden p-2 text-primary"
          aria-label="Toggle menu"
        >
          {mobileOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="lg:hidden bg-secondary border-t border-primary/10 overflow-hidden"
          >
            <nav className="grid grid-cols-3 gap-1 p-3">
              {navLinks.map((link) => (
                <Link
                  key={link.path}
                  to={link.path}
                  onClick={() => setMobileOpen(false)}
                  className={`px-2 py-3 rounded-lg text-xs font-medium text-center transition-colors ${
                    location.pathname === link.path
                      ? "text-primary bg-primary/10"
                      : "text-white/70 hover:text-primary hover:bg-primary/5"
                  }`}
                >
                  {link.label}
                </Link>
              ))}
            </nav>
            <div className="px-3 pb-3">
              <Link
                to="/contact"
                onClick={() => setMobileOpen(false)}
                className="block w-full gold-gradient px-5 py-3 rounded-lg font-semibold text-secondary text-sm text-center hover:opacity-90 transition-opacity"
              >
                Get a Quote
              </Link>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
};

export default Header;
