src/components/layout/Header.tsx

"use client";

import Link from "next/link";
import Image from "next/image";
import { Menu } from "lucide-react";
import { usePathname } from "next/navigation";
import { useAuth } from "@/lib/auth/useAuth";
import { coreNavigation } from "@/lib/navigation";
import { cn } from "@/lib/utils";

type HeaderProps = {
  onMenuClick: () => void;
};

export function Header({ onMenuClick }: HeaderProps) {
  const pathname = usePathname();
  const { user } = useAuth();
  const initials = (user?.name ?? "Student")
    .split(/\s+/)
    .map((part) => part[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  const centerLinks = coreNavigation.filter((item) =>
    item.href === "/tuition" || item.href === "/study-chat" || item.href === "/learn-anything"
  );
  const rightLinks = coreNavigation.filter((item) => item.href === "/sources");

  return (
    <header className="sticky top-0 z-sticky bg-[#030303]/82 px-4 py-4 backdrop-blur-xl sm:px-6">
      <div className="mx-auto grid max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-3">
        <Link href="/study-chat" className="flex min-w-0 items-center gap-3 justify-self-start">
          <span className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-xl border border-white/[0.14] bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">
            <Image src="/docdoe-logo-mark.png" alt="DocDoe AI" width={23} height={23} className="object-contain" priority />
          </span>
          <span className="text-[15px] font-semibold text-white sm:text-base">DocDoe AI</span>
          <span className="hidden rounded-full border border-white/[0.12] px-2 py-0.5 text-[9px] font-semibold uppercase tracking-[0.12em] text-white/46 sm:inline-flex">
            Beta
          </span>
        </Link>

        <nav className="hidden items-center gap-8 md:flex" aria-label="Main navigation">
          {centerLinks.map((item) => {
            const active = pathname === item.href || pathname?.startsWith(item.href + "/");
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "relative px-1 py-2 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-white/22",
                  active ? "text-white" : "text-white/46 hover:text-white/82",
                )}
              >
                {item.label}
                {active ? <span className="absolute inset-x-0 -bottom-1 h-px rounded-full bg-white/80" aria-hidden="true" /> : null}
              </Link>
            );
          })}
        </nav>

        <div className="flex items-center justify-end gap-3 justify-self-end">
          {rightLinks.map((item) => {
            const active = pathname === item.href || pathname?.startsWith(item.href + "/");
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "hidden px-1 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-white/22 md:inline-flex",
                  active ? "text-white" : "text-white/48 hover:text-white/82",
                )}
              >
                {item.label}
              </Link>
            );
          })}
          <Link
            href="/settings"
            aria-label="Open profile"
            className="hidden size-9 place-items-center rounded-full border border-white/[0.12] bg-white/[0.055] text-[11px] font-bold text-white/78 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition hover:border-white/[0.2] hover:text-white sm:grid"
            title={user?.name ?? "Profile"}
          >
            {initials || "ST"}
          </Link>
          <button
            type="button"
            className="touch-ripple grid size-9 place-items-center rounded-xl border border-white/[0.1] bg-white/[0.035] text-white/66 transition hover:border-white/[0.18] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 md:hidden"
            onClick={onMenuClick}
            aria-label="Open navigation"
          >
            <Menu className="size-4" />
          </button>
        </div>
      </div>

      <nav className="mx-auto mt-4 grid max-w-[24rem] grid-cols-3 rounded-full border border-white/[0.08] bg-white/[0.035] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] md:hidden" aria-label="Study modes">
        {centerLinks.map((item) => {
          const active = pathname === item.href || pathname?.startsWith(item.href + "/");
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "rounded-full px-3 py-2 text-center text-[12px] font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-white/22",
                active ? "bg-white/[0.08] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]" : "text-white/42 hover:text-white/78",
              )}
            >
              {item.label}
            </Link>
          );
        })}
      </nav>
    </header>
  );
}