"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useAuth } from "@/components/AuthProvider";
import { LinkButton } from "@/components/ui/Button";

const LINKS = [
  { href: "/features", label: "Features" },
  { href: "/pricing", label: "Pricing" },
  { href: "/faq", label: "FAQ" },
];

export function MarketingHeader() {
  const pathname = usePathname();
  const { user, loading } = useAuth();
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 border-b border-gray-800 bg-gray-950/95 backdrop-blur">
      <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-4 flex items-center gap-6">
        <Link href="/" className="flex items-center gap-2 shrink-0 font-mono font-bold text-white tracking-tight">
          <span className="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-indigo-600 text-white text-sm">D</span>
          DRB
        </Link>

        <nav className="hidden md:flex items-center gap-6 ml-4">
          {LINKS.map(({ href, label }) => (
            <Link
              key={href}
              href={href}
              className={`text-sm font-mono transition-colors ${
                pathname === href ? "text-white" : "text-gray-400 hover:text-gray-200"
              }`}
            >
              {label}
            </Link>
          ))}
        </nav>

        <div className="ml-auto hidden md:flex items-center gap-3">
          {!loading && user ? (
            <LinkButton href="/dashboard" size="md">Go to dashboard</LinkButton>
          ) : (
            <>
              <LinkButton href="/login" variant="ghost" size="md">Sign in</LinkButton>
              <LinkButton href="/login" size="md">Get started</LinkButton>
            </>
          )}
        </div>

        <button
          onClick={() => setMobileOpen((v) => !v)}
          className="md:hidden ml-auto text-gray-400 hover:text-gray-200 transition-colors p-1"
          aria-label="Toggle menu"
        >
          {mobileOpen ? (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" />
            </svg>
          )}
        </button>
      </div>

      {mobileOpen && (
        <div className="md:hidden border-t border-gray-800 bg-gray-950 px-4 py-3 flex flex-col gap-1">
          {LINKS.map(({ href, label }) => (
            <Link
              key={href}
              href={href}
              onClick={() => setMobileOpen(false)}
              className={`py-2 text-sm font-mono transition-colors ${pathname === href ? "text-white" : "text-gray-400"}`}
            >
              {label}
            </Link>
          ))}
          <div className="border-t border-gray-800 pt-3 mt-2 flex flex-col gap-2">
            {!loading && user ? (
              <LinkButton href="/dashboard" size="md" fullWidth>Go to dashboard</LinkButton>
            ) : (
              <>
                <LinkButton href="/login" variant="secondary" size="md" fullWidth>Sign in</LinkButton>
                <LinkButton href="/login" size="md" fullWidth>Get started</LinkButton>
              </>
            )}
          </div>
        </div>
      )}
    </header>
  );
}