"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { navItems, resourceItems } from "@/lib/navigation";

export function SiteHeader() {
  const pathname = usePathname();
  const current = pathname === "/" ? "home" : pathname.split("/")[1];
  const resourcesActive = current === "faq" || current === "resources";

  return (
    <header className="site-header">
      <Link className="brand" href="/">
        <div className="brand-name">Paprika</div>
        <div className="brand-tag">Attorney Curated Evidence Building for O-1 Talent</div>
      </Link>
      <nav className="nav" id="nav">
        {navItems.map((item) => (
          <Link
            key={item.key}
            href={item.href}
            data-page={item.key}
            className={current === item.key ? "active" : undefined}
          >
            {item.label}
          </Link>
        ))}
        <div className="nav-dropdown">
          <Link
            href="/resources"
            className={`nav-trigger${resourcesActive ? " active" : ""}`}
            data-page="resources"
          >
            Resources <span className="nav-chevron">⌄</span>
          </Link>
          <div className="resources-menu" aria-label="Resources menu">
            {resourceItems.map((item) => (
              <Link key={item.key} href={item.href} data-page={item.key}>
                <strong>{item.label}</strong>
                <span>{item.description}</span>
              </Link>
            ))}
          </div>
        </div>
        <Link
          href="/start"
          className={`start${current === "start" ? " active" : ""}`}
          data-page="start"
        >
          Start Here <span className="button-arrow">→</span>
        </Link>
      </nav>
    </header>
  );
}