"use client";

import { useState } from "react";
import { Menu, X, ChevronDown } from "lucide-react";

const navigation = [
  { name: "Product", href: "#product" },
  { name: "Features", href: "#features" },
  { name: "Pricing", href: "#pricing" },
  { name: "Blog", href: "#blog" },
  {
    name: "Resources",
    href: "#",
    children: [
      { name: "Documentation", href: "#docs" },
      { name: "API Reference", href: "#api" },
      { name: "Changelog", href: "#changelog" },
    ],
  },
];

export default function SaasHeader1() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState<string | null>(null);

  return (
    <header className="fixed top-0 left-0 right-0 z-50">
      {/* Glassmorphism background */}
      <div className="absolute inset-0 bg-white/70 backdrop-blur-xl border-b border-gray-200/50" />

      <nav className="relative mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
        {/* Logo */}
        <a href="/" className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-900">
            <span className="text-sm font-bold text-white">S</span>
          </div>
          <span className="text-lg font-semibold tracking-tight text-gray-900">
            SaaSify
          </span>
        </a>

        {/* Desktop Nav */}
        <div className="hidden items-center gap-1 lg:flex">
          {navigation.map((item) =>
            item.children ? (
              <div
                key={item.name}
                className="relative"
                onMouseEnter={() => setDropdownOpen(item.name)}
                onMouseLeave={() => setDropdownOpen(null)}
              >
                <button className="flex items-center gap-1 rounded-full px-4 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-indigo-500">
                  {item.name}
                  <ChevronDown className="h-3.5 w-3.5" />
                </button>

                {/* Dropdown */}
                {dropdownOpen === item.name && (
                  <div className="absolute left-0 top-full pt-2">
                    <div className="w-48 rounded-xl border border-gray-200/80 bg-white/90 p-1.5 shadow-lg shadow-gray-200/50 backdrop-blur-xl">
                      {item.children.map((child) => (
                        <a
                          key={child.name}
                          href={child.href}
                          className="block rounded-lg px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-indigo-500"
                        >
                          {child.name}
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <a
                key={item.name}
                href={item.href}
                className="rounded-full px-4 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-indigo-500"
              >
                {item.name}
              </a>
            ),
          )}
        </div>

        {/* Desktop CTA */}
        <div className="hidden items-center gap-3 lg:flex">
          <a
            href="#login"
            className="text-sm text-gray-600 transition-colors hover:text-indigo-500"
          >
            Log in
          </a>
          <a
            href="#signup"
            className="rounded-full bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all hover:bg-gray-800 hover:shadow-lg hover:shadow-indigo-500/25"
          >
            Get Started
          </a>
        </div>

        {/* Mobile Toggle */}
        <button
          className="lg:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100"
          onClick={() => setMobileOpen(!mobileOpen)}
        >
          {mobileOpen ? (
            <X className="h-5 w-5" />
          ) : (
            <Menu className="h-5 w-5" />
          )}
        </button>
      </nav>

      {/* Mobile Menu */}
      {mobileOpen && (
        <div className="relative border-t border-gray-200/50 bg-white/95 backdrop-blur-xl lg:hidden">
          <div className="space-y-1 px-4 py-4">
            {navigation.map((item) => (
              <div key={item.name}>
                <a
                  href={item.href}
                  className="block rounded-lg px-3 py-2.5 text-base text-gray-700 transition-colors hover:bg-gray-50 hover:text-indigo-500"
                >
                  {item.name}
                </a>
                {item.children?.map((child) => (
                  <a
                    key={child.name}
                    href={child.href}
                    className="block rounded-lg py-2 pl-8 pr-3 text-sm text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-700"
                  >
                    {child.name}
                  </a>
                ))}
              </div>
            ))}
          </div>
          <div className="border-t border-gray-100 px-4 py-4">
            <a
              href="#signup"
              className="block w-full rounded-full bg-gray-900 py-2.5 text-center text-sm font-medium text-white"
            >
              Get Started
            </a>
            <a
              href="#login"
              className="mt-2 block w-full py-2.5 text-center text-sm text-gray-600"
            >
              Log in
            </a>
          </div>
        </div>
      )}
    </header>
  );
}
Headers
