import type { ReactNode } from "react";

export function PageHero({
  eyebrow,
  title,
  subtitle,
  bgImage,
  children,
}: {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  bgImage?: string;
  children?: ReactNode;
}) {
  return (
    <section className="relative bg-gradient-to-br from-primary to-primary-dark text-primary-foreground overflow-hidden">
      {/* Gallery photo — visible but still inside the blue box */}
      {bgImage && (
        <div
          aria-hidden
          className="absolute inset-0 bg-cover bg-center opacity-55"
          style={{ backgroundImage: `url(${bgImage})` }}
        />
      )}
      {/* Subtle blue color veil so the box still reads as blue */}
      {bgImage && (
        <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-primary/55 to-primary-dark/60" />
      )}
      {/* Dot pattern */}
      <div className="absolute inset-0 opacity-20 [background-image:radial-gradient(circle_at_1px_1px,white_1px,transparent_0)] [background-size:24px_24px]" />
      <div className="relative max-w-7xl mx-auto px-6 py-20 lg:py-28">
        {eyebrow && (
          <div className="inline-block text-xs font-semibold tracking-widest uppercase bg-accent text-accent-foreground px-3 py-1 rounded-full mb-4">
            {eyebrow}
          </div>
        )}
        <h1 className="font-display font-bold text-4xl md:text-5xl lg:text-6xl max-w-3xl">{title}</h1>
        {subtitle && <p className="mt-5 text-lg md:text-xl opacity-90 max-w-2xl">{subtitle}</p>}
        {children && <div className="mt-8">{children}</div>}
      </div>
    </section>
  );
}
