import Link from 'next/link'

export function PageHero({
  title,
  subtitle,
  breadcrumb,
}: {
  title: string
  subtitle?: string
  breadcrumb: string
}) {
  return (
    <section className="bg-navy text-navy-foreground">
      <div className="mx-auto max-w-7xl px-4 py-16 md:py-20">
        <p className="text-sm font-semibold uppercase tracking-widest text-navy-foreground/70">
          <Link href="/" className="transition-colors hover:text-navy-foreground">
            Home
          </Link>
          <span className="px-2">/</span>
          <span className="text-navy-foreground">{breadcrumb}</span>
        </p>
        <h1 className="mt-3 text-4xl font-bold text-balance md:text-5xl">{title}</h1>
        {subtitle && <p className="mt-4 max-w-2xl text-lg leading-relaxed text-navy-foreground/80 text-pretty">{subtitle}</p>}
      </div>
    </section>
  )
}