import { Link, usePage } from "@inertiajs/react";
import { useState } from "react";
import { Menu, X, LayoutDashboard } from "lucide-react";

const nav = [
  { href: "/", label: "Home", name: 'home' },
  { href: "/services", label: "Services", name: 'services' },
  { href: "/how-it-works", label: "How it works", name: 'how_it_works' },
  { href: "/store", label: "Store", name: 'store.index' },
  { href: "/case-studies", label: "Case studies", name: 'case_studies' },
  { href: "/blog", label: "Insights", name: 'blog.index' },
  { href: "/pricing", label: "Pricing", name: 'pricing' },
  { href: "/about", label: "About", name: 'about' },
] as const;

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  const { props } = usePage<any>();
  const { branding, auth } = props;

  return (
    <header className="absolute top-0 left-0 right-0 z-50">
      <div className="container-x flex h-16 items-center justify-between">
        <Link href="/" className="flex items-center gap-2">
          {branding?.logo ? (
            <img src={branding.logo} alt={branding.name} className="h-6 w-auto object-contain" />
          ) : (
            <span 
              className="inline-block h-2.5 w-2.5 rounded-full" 
              style={{ backgroundColor: branding?.primary_color || '#ff3b3b' }}
            />
          )}
          {!branding?.logo && (
            <span className="font-display text-xl font-medium tracking-tight">
              {branding?.name || 'Altivate'}<span style={{ color: branding?.primary_color || '#ff3b3b' }}>.</span>
            </span>
          )}
        </Link>

        <nav className="hidden items-center gap-1 lg:flex">
          {nav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`rounded-full px-3.5 py-2 text-sm transition-colors ${
                usePage().url === item.href 
                  ? "bg-secondary text-foreground" 
                  : "text-muted-foreground hover:text-foreground"
              }`}
            >
              {item.label}
            </Link>
          ))}
        </nav>

        <div className="hidden lg:flex items-center gap-4">
          {auth?.user && (
            <Link
              href="/admin"
              className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-primary hover:bg-secondary/50 rounded-full transition-all"
              title="Go to Admin Dashboard"
            >
              <LayoutDashboard className="h-4 w-4" />
              Dashboard
            </Link>
          )}
          <Link
            href="/audit"
            className="inline-flex h-10 items-center gap-2 rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition-transform hover:-translate-y-0.5"
          >
            Free Growth Audit
            <span aria-hidden>→</span>
          </Link>
        </div>

        <div className="flex items-center gap-2 lg:hidden">
          {auth?.user && (
            <Link
              href="/admin"
              className="p-2 text-muted-foreground hover:text-primary transition-colors"
              title="Dashboard"
            >
              <LayoutDashboard className="h-5 w-5" />
            </Link>
          )}
          <button
            onClick={() => setOpen((o) => !o)}
            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border"
            aria-label="Toggle menu"
          >
            {open ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
          </button>
        </div>
      </div>

      {open && (
        <div className="border-t border-border/60 bg-background/95 backdrop-blur-xl lg:hidden">
          <div className="container-x flex flex-col py-4">
            {nav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setOpen(false)}
                className="py-3 font-display text-2xl"
              >
                {item.label}
              </Link>
            ))}
            <Link
              href="/audit"
              onClick={() => setOpen(false)}
              className="mt-4 inline-flex h-11 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground"
            >
              Free Growth Audit →
            </Link>
          </div>
        </div>
      )}
    </header>
  );
}