import Link from "next/link";
import { GraduationCap } from "lucide-react";
import { UserNav } from "@/components/user-nav";

const navLinks = [
  { href: "/#nasil-calisir", label: "Nasıl çalışır?" },
  { href: "/#karsilastirma", label: "Karşılaştır" },
  { href: "/#sss", label: "SSS" },
];

export function SiteHeader() {
  return (
    <header className="sticky top-6 z-50 mt-6 print:hidden">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-3 px-4">
        <Link
          href="/"
          className="group flex items-center gap-3 font-bricolage text-xl"
        >
          <span>
            <span className="font-light text-3xl tracking-tighter">Kolay</span>
            <span className="font-semibold text-3xl tracking-tighter">
              Tercih
            </span>
          </span>
        </Link>
        <nav className="hidden items-center gap-1 rounded-full border border-slate-200 bg-white p-1.5 text-base font-medium text-slate-600 sm:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="rounded-full px-5 py-2 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900"
            >
              {link.label}
            </Link>
          ))}
        </nav>
        <UserNav />
      </div>
    </header>
  );
}