import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { Reveal } from "./motion";

export function PageHero({
  eyebrow,
  title,
  subtitle,
  breadcrumbs = [],
}: {
  eyebrow?: string;
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  breadcrumbs?: { label: string; href?: string }[];
}) {
  return (
    <section className="relative overflow-hidden navy-bg text-white">
      <div className="absolute inset-0 grid-pattern opacity-30" />
      <div className="absolute -top-24 -right-24 size-72 rounded-full bg-[var(--brand-royal)]/30 blur-3xl" />
      <div className="absolute -bottom-24 -left-24 size-72 rounded-full bg-[var(--brand-cyan)]/20 blur-3xl" />
      <div className="container-mx relative py-16 lg:py-24">
        <Reveal>
          {breadcrumbs.length > 0 && (
            <nav className="flex items-center gap-1.5 text-xs text-white/50 mb-5">
              <Link href="/" className="hover:text-white">Home</Link>
              {breadcrumbs.map((b) => (
                <span key={b.label} className="flex items-center gap-1.5">
                  <ChevronRight className="size-3" />
                  {b.href ? <Link href={b.href} className="hover:text-white">{b.label}</Link> : <span className="text-white/80">{b.label}</span>}
                </span>
              ))}
            </nav>
          )}
          {eyebrow && (
            <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white text-xs font-semibold tracking-wide uppercase">
              <span className="size-1.5 rounded-full bg-[var(--brand-cyan)]" />
              {eyebrow}
            </span>
          )}
          <h1 className="mt-4 text-4xl sm:text-5xl font-extrabold tracking-tight leading-[1.08] text-balance max-w-3xl">
            {title}
          </h1>
          {subtitle && (
            <p className="mt-5 text-lg text-white/70 leading-relaxed max-w-2xl">{subtitle}</p>
          )}
        </Reveal>
      </div>
    </section>
  );
}