import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { Menu, X } from "lucide-react";
import { img } from "@/lib/wp-assets";

const items = [
  { label: "Sobre", hash: "sobre" },
  { label: "Fundadores", hash: "fundadores" },
  { label: "Contato", hash: "contato" },
];

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 bg-navy shadow-header">
      <div className="mx-auto flex h-[82px] max-w-[1280px] items-center justify-between px-5 xl:px-0">
        <Link to="/" aria-label="Eniac Ventures">
          <img src={img("logo-eniac.webp")} alt="logo eniac" width={142} height={39} className="h-[39px] w-auto" />
        </Link>
        <nav className="hidden md:block">
          <ul className="flex gap-5">
            {items.map((i) => (
              <li key={i.hash}>
                <Link to="/" hash={i.hash} className="font-montserrat text-[15px] font-semibold uppercase text-white transition-colors hover:text-brand-light">
                  {i.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <button className="text-white md:hidden" aria-label="Menu" onClick={() => setOpen(!open)}>
          {open ? <X size={28} /> : <Menu size={28} />}
        </button>
      </div>
      {open && (
        <ul className="bg-navy pb-4 md:hidden">
          {items.map((i) => (
            <li key={i.hash}>
              <Link to="/" hash={i.hash} onClick={() => setOpen(false)} className="block px-5 py-3 font-montserrat font-semibold uppercase text-white">
                {i.label}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </header>
  );
}