import { useState } from "react";
import { Link } from "@tanstack/react-router";
import { Menu, MessageSquare, X } from "lucide-react";
import { Button } from "@/components/ui/button";

const SITE_LINKS = [
  { label: "About us", to: "/about" },
  { label: "Blog", to: "/blog" },
  { label: "Services", to: "/services" },
  { label: "SMS technology", to: "/sms-technology" },
  { label: "Contact", to: "/contact" },
] as const;

export function PublicSiteHeader({ activePath }: { activePath?: string }) {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 border-b border-border/70 bg-background/90 backdrop-blur-xl">
      <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-5 sm:px-8">
        <Link to="/" className="inline-flex shrink-0 items-center gap-2.5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Gatavase Bulky SMS home">
          <span className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-brand text-primary-foreground shadow-glow">
            <MessageSquare className="h-4 w-4" aria-hidden="true" />
          </span>
          <span className="font-display text-sm font-bold leading-tight sm:text-base">
            Gatavase <span className="block text-[10px] font-medium tracking-[0.16em] text-muted-foreground">BULKY SMS</span>
          </span>
        </Link>

        <nav className="hidden items-center gap-5 text-sm font-medium text-muted-foreground xl:flex" aria-label="Main navigation">
          {SITE_LINKS.map((item) => (
            <Link
              key={item.to}
              to={item.to}
              aria-current={activePath === item.to ? "page" : undefined}
              className={activePath === item.to ? "text-primary" : "transition hover:text-foreground"}
            >
              {item.label}
            </Link>
          ))}
          <Link to="/sms-calculator" className="transition hover:text-foreground">SMS calculator</Link>
        </nav>

        <div className="flex shrink-0 items-center gap-2">
          <Button asChild size="sm" variant="ghost" className="hidden md:inline-flex">
            <Link to="/auth">Sign in</Link>
          </Button>
          <Button asChild size="sm" className="hidden sm:inline-flex">
            <Link to="/auth">Get started</Link>
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="xl:hidden"
            aria-label={menuOpen ? "Close navigation" : "Open navigation"}
            aria-expanded={menuOpen}
            aria-controls="public-mobile-navigation"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </Button>
        </div>
      </div>

      {menuOpen && (
        <nav id="public-mobile-navigation" className="grid gap-1 border-t border-border px-5 py-3 xl:hidden" aria-label="Main navigation">
          {[{ label: "Home", to: "/" }, ...SITE_LINKS, { label: "SMS calculator", to: "/sms-calculator" }, { label: "Sign in", to: "/auth" }, { label: "Get started", to: "/auth" }].map((item) => (
            <Link key={item.label} to={item.to} onClick={() => setMenuOpen(false)} className="rounded-md px-2 py-2 text-sm font-medium text-muted-foreground transition hover:bg-muted hover:text-foreground">
              {item.label}
            </Link>
          ))}
        </nav>
      )}
    </header>
  );
}