import Link from "next/link";

const navItems = [
  { href: "/", label: "Home", className: "bg-[#e0483d] hover:bg-[#cb3a30]" },
  { href: "/lessons", label: "Lessons", className: "bg-[#f08b24] hover:bg-[#d97706]" },
  { href: "/practice", label: "Practice", className: "bg-[#1faa59] hover:bg-[#168845]" },
];

export function Header() {
  return (
    <header className="sticky top-0 z-50 border-b-4 border-[#1c4ab7] bg-[#2f65e8] text-white">
      <div className="mx-auto max-w-6xl playground-frame border-b-0 border-t-0 bg-[#2f65e8] shadow-none">
        <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
          <Link href="/" className="group flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#ffd043] text-[#10308a] shadow-md">
              <span className="text-lg font-extrabold">C</span>
            </div>
            <div className="rounded-md bg-white px-2.5 py-1 leading-none shadow-sm">
              <p className="text-2xl font-extrabold tracking-tight text-[#17367d]">Cabrits</p>
              <p className="text-xs font-bold uppercase tracking-[0.14em] text-[#3a5ea8]">Math Playground</p>
            </div>
          </Link>
          <div className="flex items-center gap-2 text-xs font-bold sm:text-sm">
            <span className="rounded-full bg-[#1a49b6] px-3 py-1">Ages 12-16</span>
            <span className="rounded-full bg-[#1a49b6] px-3 py-1">Form 1 Term 2</span>
          </div>
        </div>
        <nav className="flex flex-wrap gap-1 bg-[#1b49b5] px-2 pb-2 pt-1">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`rounded-sm px-4 py-2 text-sm font-extrabold text-white transition-colors ${item.className}`}
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}