import { Container } from "@/components/common/Container";
import { Reveal } from "@/components/motion/Reveal";

interface PageHeroProps {
  eyebrow: string;
  title: string;
  subtitle?: string;
  children?: React.ReactNode;
}

export function PageHero({ eyebrow, title, subtitle, children }: PageHeroProps) {
  return (
    <section className="relative isolate overflow-hidden border-b border-slate-200/60 bg-mesh dark:border-white/[0.06]">
      <div
        aria-hidden
        className="absolute inset-0 -z-10 grid-pattern opacity-60 dark:opacity-40"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute -top-32 start-1/2 -z-10 h-96 w-[42rem] -translate-x-1/2 rounded-full bg-brand-500/15 blur-3xl dark:bg-brand-500/20"
      />

      <Container className="py-20 sm:py-24 lg:py-28">
        <div className="mx-auto max-w-3xl text-center">
          <Reveal>
            <span className="eyebrow">
              <span className="h-1.5 w-1.5 rounded-full bg-brand-500" aria-hidden />
              {eyebrow}
            </span>
          </Reveal>
          <Reveal delay={0.06} className="mt-5">
            <h1 className="text-balance text-display-lg tracking-tight text-slate-900 dark:text-white sm:text-display-xl">
              {title}
            </h1>
          </Reveal>
          {subtitle && (
            <Reveal delay={0.12} className="mt-6">
              <p className="text-balance text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
                {subtitle}
              </p>
            </Reveal>
          )}
          {children && (
            <Reveal delay={0.18} className="mt-8">
              {children}
            </Reveal>
          )}
        </div>
      </Container>
    </section>
  );
}