import type { ReactNode } from "react";

export function PageHero({ eyebrow, title, description, children }: {
  eyebrow?: string;
  title: string;
  description?: string;
  children?: ReactNode;
}) {
  return (
    <section className="relative overflow-hidden bg-primary text-primary-foreground">
      <div className="absolute inset-0 opacity-30 [background:radial-gradient(circle_at_20%_10%,oklch(0.65_0.18_142/.5),transparent_50%),radial-gradient(circle_at_80%_90%,oklch(0.78_0.10_75/.4),transparent_55%)]" />
      <div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
        {eyebrow && (
          <span className="inline-block rounded-full bg-highlight/20 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-highlight">
            {eyebrow}
          </span>
        )}
        <h1 className="mt-4 max-w-3xl text-balance font-display text-4xl font-semibold leading-tight sm:text-5xl lg:text-6xl">
          {title}
        </h1>
        {description && (
          <p className="mt-5 max-w-2xl text-lg text-primary-foreground/80">{description}</p>
        )}
        {children && <div className="mt-8">{children}</div>}
      </div>
    </section>
  );
}