import Image from "next/image";
import { AudioVisualizer } from "@/components/audio-visualizer";

type PageHeroProps = {
  eyebrow: string;
  title: string;
  description: string;
  image?: string;
};

export function PageHero({
  eyebrow,
  title,
  description,
  image = "/images/brand/channel.webp",
}: PageHeroProps) {
  return (
    <section className="page-hero">
      <div className="page-hero-background" data-parallax>
        <Image src={image} alt="" fill priority sizes="100vw" />
      </div>
      <div className="page-hero-overlay" />
      <div className="shell page-hero-copy" data-reveal>
        <div className="hero-kicker">
          <AudioVisualizer bars={12} />
          <span>{eyebrow}</span>
        </div>
        <h1>{title}</h1>
        <p>{description}</p>
      </div>
    </section>
  );
}