interface PageHeroProps {
  title: string;
  subtitle: string;
  badge?: string;
}

export function PageHero({ title, subtitle, badge }: PageHeroProps) {
  return (
    <section className="relative overflow-hidden bg-[hsl(210,40%,7%)]">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,hsl(210,70%,20%)_0%,transparent_60%)]" />
      <div className="relative mx-auto max-w-7xl px-6 py-20 md:py-28">
        {badge && (
          <p className="mb-4 inline-block rounded-full border border-[hsl(var(--accent))]/30 bg-[hsl(var(--accent))]/10 px-4 py-1.5 text-sm font-medium text-[hsl(168,55%,65%)]">
            {badge}
          </p>
        )}
        <h1 className="max-w-3xl text-balance text-4xl font-bold leading-tight tracking-tight text-white md:text-5xl font-serif">
          {title}
        </h1>
        <p className="mt-6 max-w-2xl text-lg leading-relaxed text-[hsl(210,15%,75%)]">
          {subtitle}
        </p>
      </div>
    </section>
  );
}