import type { ReactNode } from "react";

export function PageHero({
  eyebrow,
  title,
  subtitle,
  children,
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  children?: ReactNode;
}) {
  return (
    <section className="relative bg-gradient-hero text-cream overflow-hidden">
      <div className="absolute inset-0 opacity-25 pointer-events-none">
        <div className="absolute -top-32 -right-32 h-96 w-96 rounded-full bg-emerald blur-3xl" />
        <div className="absolute -bottom-40 -left-32 h-96 w-96 rounded-full bg-emerald-glow blur-3xl" />
      </div>
      <div className="container-tight relative py-20 md:py-28">
        {eyebrow && (
          <span className="inline-block rounded-full border border-emerald/40 bg-emerald/10 px-3 py-1 text-xs font-semibold tracking-wider uppercase text-emerald-glow">
            {eyebrow}
          </span>
        )}
        <h1 className="mt-5 text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl">
          {title}
        </h1>
        {subtitle && (
          <p className="mt-5 max-w-2xl text-lg md:text-xl text-cream/80 text-pretty">
            {subtitle}
          </p>
        )}
        {children && <div className="mt-8">{children}</div>}
      </div>
    </section>
  );
}