import ParallaxImage from "@/components/ui/ParallaxImage";

/**
 * Shared banner for the content pages.
 *
 * Carries `data-nav-dark` so the existing navbar probe inverts the bar to its
 * light-on-dark treatment while it overlaps this section — the same mechanism
 * the landing page's dark sections already use.
 */
export default function PageHero({
  eyebrow,
  title,
  intro,
  image,
  fallbackImage,
  alt,
}: {
  eyebrow: string;
  title: string;
  intro: string;
  image: string;
  fallbackImage?: string;
  alt: string;
}) {
  return (
    <section
      data-nav-dark
      className="relative flex h-[68vh] min-h-[460px] w-full items-center justify-center overflow-hidden"
    >
      <ParallaxImage src={image} fallbackSrc={fallbackImage} alt={alt} />
      {/* Two stops rather than one: the top keeps the navbar legible, the
          bottom keeps the body copy legible over a bright sky. */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/35 to-black/65" />

      <div className="relative z-10 mx-auto max-w-[900px] px-6 pt-20 text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-3.5 py-1.5 font-mono text-[10px] font-semibold tracking-[0.2em] text-white/90 uppercase backdrop-blur-md">
          <span className="h-1.5 w-1.5 rounded-full bg-amber-400" />
          {eyebrow}
        </span>
        <h1 className="mt-6 text-4xl leading-[1.05] font-semibold tracking-tighter text-white md:text-6xl">
          {title}
        </h1>
        <p className="mx-auto mt-5 max-w-[54ch] text-base leading-relaxed text-white/80 md:text-lg">
          {intro}
        </p>
      </div>
    </section>
  );
}