import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu, X, ChevronDown } from "lucide-react";
import { Link } from "react-router-dom";
import WebPImage from "./WebPImage";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ThemeToggle } from "@/components/ui/theme-toggle";

const Header = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const products = [
    { name: "Section 125 Plan", href: "/products/section-125-plan" },
    { name: "Term Life Insurance", href: "/products/term-life-insurance" },
    { name: "Indexed Universal Life", href: "/products/indexed-universal-life" },
    { name: "Key Person Insurance", href: "/products/key-person-insurance" },
    { name: "Buy-Sell Agreement Funding", href: "/products/buy-sell-agreement-funding" },
    { name: "Split Dollar Life Insurance", href: "/products/split-dollar-life-insurance" },
    { name: "SERP Funding", href: "/products/serp-funding" },
    { name: "Business Succession Planning", href: "/products/business-succession-planning" },
    { name: "Long-Term Care Funding", href: "/products/long-term-care-funding" },
    { name: "Tax-Free Retirement Income", href: "/products/tax-free-retirement-income" },
    { name: "Landing Rock", href: "/products/landing-rock" },
    { name: "Annuities", href: "/products/annuities" },
    { name: "Impact Health Share", href: "/products/impact-health-share" },
  ];

  return (
    <header className="bg-background border-b border-border sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link to="/" className="flex items-center">
            <WebPImage
              src="https://storage.googleapis.com/msgsndr/FzqSk7x9NC1bIVtPLAWF/media/6871bdc670d8571a28e95efb.webp"
              alt="Cory Nunes Capital - Life Insurance and Financial Planning Services"
              className="h-10 w-auto"
              loading="eager"
              decoding="async"
              width={150}
              height={82}
              fetchPriority="high"
            />
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center space-x-8">
            <Link to="/" className="text-foreground hover:text-primary transition-colors">
              Home
            </Link>
            <Link to="/about" className="text-foreground hover:text-primary transition-colors">
              About
            </Link>
            
            {/* Products Dropdown */}
            <DropdownMenu>
              <DropdownMenuTrigger 
                className="flex items-center text-foreground hover:text-primary transition-colors"
                aria-label="Products menu"
              >
                Products
                <ChevronDown className="ml-1 h-4 w-4" />
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-80 p-2">
                {products.map((product) => (
                  <DropdownMenuItem key={product.href} asChild>
                    <Link
                      to={product.href}
                      className="w-full px-3 py-2 text-sm cursor-pointer"
                    >
                      {product.name}
                    </Link>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>

            <Link to="/faqs" className="text-foreground hover:text-primary transition-colors">
              FAQs
            </Link>
            <Link to="/testimonials" className="text-foreground hover:text-primary transition-colors">
              Testimonials
            </Link>
            <Link to="/contact" className="text-foreground hover:text-primary transition-colors">
              Contact
            </Link>
          </nav>

          {/* Theme Toggle and CTA Button */}
          <div className="hidden lg:flex items-center space-x-4">
            <ThemeToggle />
            <Button
              variant="cta"
              size="lg"
              asChild
            >
              <a 
                href="https://start.corynunes.com/general30min"
                target="_blank"
                rel="noopener noreferrer"
              >
                Book a Meeting
              </a>
            </Button>
          </div>

          {/* Theme Toggle and Mobile menu button */}
          <div className="lg:hidden flex items-center space-x-2">
            <ThemeToggle />
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              aria-label={isMobileMenuOpen ? "Close menu" : "Open menu"}
              aria-expanded={isMobileMenuOpen}
              className="text-foreground hover:text-primary transition-colors p-2"
            >
              {isMobileMenuOpen ? (
                <X className="h-6 w-6" />
              ) : (
                <Menu className="h-6 w-6" />
              )}
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMobileMenuOpen && (
          <div className="lg:hidden py-4 border-t border-border">
            <div className="flex flex-col space-y-4">
              <Link
                to="/"
                className="text-foreground hover:text-primary transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Home
              </Link>
              <Link
                to="/about"
                className="text-foreground hover:text-primary transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                About
              </Link>
              <Link
                to="/products"
                className="text-foreground hover:text-primary transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Products
              </Link>
              <Link
                to="/faqs"
                className="text-foreground hover:text-primary transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                FAQs
              </Link>
              <Link
                to="/testimonials"
                className="text-foreground hover:text-primary transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Testimonials
              </Link>
              <Link
                to="/contact"
                className="text-foreground hover:text-primary transition-colors"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Contact
              </Link>
              <div className="flex items-center justify-between pt-4">
                <ThemeToggle />
                <Button
                  variant="cta"
                  className="flex-1 ml-4"
                  asChild
                >
                  <a 
                    href="https://start.corynunes.com/general30min"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Book a Meeting
                  </a>
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;