import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import logo from "@/assets/gatavase-logo.png.asset.json";
import { MotionToggle } from "@/components/motion-toggle";


const links = [
  { label: "What We Build", to: "/", hash: "what-we-build" },
  { label: "Industries", to: "/", hash: "industries" },
  { label: "Divisions", to: "/", hash: "divisions" },
  { label: "Stories", to: "/", hash: "stories" },
];

export function SiteHeader() {
  const [open, setOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 border-b border-border/70 bg-background/80 backdrop-blur-xl">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-5">
        <Link to="/" className="flex items-center gap-2.5">
          <img
            src={logo.url}
            alt="Gatavase Corporation logo"
            width={32}
            height={32}
            className="size-8 rounded-md object-contain"
          />
          <span className="font-display text-base font-semibold tracking-tight">

            Gatavase<span className="text-primary"> Corp</span>
          </span>
        </Link>

        <nav className="hidden items-center gap-7 md:flex">
          {links.map((l) => (
            <Link
              key={l.hash}
              to={l.to}
              hash={l.hash}
              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
            >
              {l.label}
            </Link>
          ))}
          <Link to="/welcome" className="text-sm text-muted-foreground hover:text-foreground">
            Welcome
          </Link>
          <Link to="/live-podcast" className="text-sm text-muted-foreground hover:text-foreground">
            Live Podcast
          </Link>

          <Link to="/episodes" className="text-sm text-muted-foreground hover:text-foreground">
            Episodes
          </Link>
          <Link to="/login" className="text-sm text-muted-foreground hover:text-foreground">
            Log in
          </Link>
          <Link to="/contact" className="text-sm text-muted-foreground hover:text-foreground">
            Contact
          </Link>
        </nav>

        <div className="flex items-center gap-2">
          <MotionToggle />
          <Button asChild size="sm" className="hidden md:inline-flex">
            <Link to="/contact">Start a Project</Link>
          </Button>
          <button
            aria-label="Toggle menu"
            className="grid size-9 place-items-center rounded-md border border-border md:hidden"
            onClick={() => setOpen((v) => !v)}
          >
            {open ? <X className="size-4" /> : <Menu className="size-4" />}
          </button>
        </div>
      </div>

      {open && (
        <nav className="flex flex-col gap-1 border-t border-border px-5 py-4 md:hidden">
          {links.map((l) => (
            <Link
              key={l.hash}
              to={l.to}
              hash={l.hash}
              onClick={() => setOpen(false)}
              className="rounded-md px-2 py-2 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground"
            >
              {l.label}
            </Link>
          ))}
          <Link
            to="/contact"
            onClick={() => setOpen(false)}
            className="rounded-md px-2 py-2 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground"
          >
            Contact
          </Link>
        </nav>
      )}
    </header>
  );
}
