type Props = {
  kicker: string;
  name: string;
  headline: string;
  lede: string;
  image: string;
};

export function PageHero({ kicker, name, headline, lede, image }: Props) {
  return (
    <section className="relative flex min-h-dvh items-end overflow-hidden bg-bg">
      <img
        src={image}
        alt=""
        className="kenburns absolute inset-0 h-full w-full object-cover"
        fetchPriority="high"
      />
      <div className="hero-scrim absolute inset-0" />
      <div className="relative z-10 w-full max-w-3xl px-6 pb-28 pt-32 sm:px-12 sm:pb-32 lg:px-20 lg:pb-36">
        <div className="stagger-in">
          <p className="mb-2 font-display text-kicker font-medium uppercase tracking-wide">
            {kicker}
          </p>
          <p className="mb-3 font-display text-sm font-semibold uppercase tracking-logo text-muted">
            {name}
          </p>
          <h1 className="font-display text-hero font-semibold uppercase leading-tight tracking-hero whitespace-pre-line">
            {headline}
          </h1>
          <p className="mt-5 max-w-xl text-body leading-body text-fg/90">{lede}</p>
          <div className="mt-8">
            <a
              href="#overview"
              className="inline-flex min-h-11 items-center justify-center border-2 border-fg bg-transparent px-8 py-3 font-display text-[13px] font-semibold uppercase tracking-btn text-fg transition-[background-color,color] duration-[var(--motion-medium)] hover:bg-fg hover:text-bg"
            >
              Learn more
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}