export interface ParallaxClassicFixedProps {
  imageSrc?: string;
  eyebrow?: string;
  headline?: string;
  subhead?: string;
}

export default function ParallaxClassicFixed({
  imageSrc = "/heroes/landscape-card-bg.webp",
  eyebrow = "Parallax · 01",
  headline = "Classic fixed background",
  subhead =
    "Pure CSS background-attachment: fixed. Zero JavaScript. The viewport scrolls over a stationary image. Falls back to scroll on iOS Safari.",
}: ParallaxClassicFixedProps) {
  return (
    <section
      className="relative isolate flex min-h-[140svh] w-full items-center justify-center overflow-hidden bg-slate-900"
      style={{
        backgroundImage: `url(${imageSrc})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        backgroundAttachment: "fixed",
      }}
    >
      <div className="absolute inset-0 -z-0 bg-gradient-to-b from-black/55 via-black/30 to-black/70" />
      <div className="relative z-10 mx-auto max-w-3xl px-6 text-center text-white">
        <p className="mb-4 text-xs font-semibold uppercase tracking-[0.3em] text-white/70">
          {eyebrow}
        </p>
        <h1 className="text-balance text-4xl font-semibold leading-[1.1] tracking-tight sm:text-6xl">
          {headline}
        </h1>
        <p className="mx-auto mt-6 max-w-xl text-base leading-relaxed text-white/80 sm:text-lg">
          {subhead}
        </p>
      </div>
    </section>
  );
}