type PageHeroProps = {
  title: string;
};

export default function PageHero({ title }: PageHeroProps) {
  return (
    <section className="relative h-[300px] md:h-[600px] bg-black flex items-center justify-center text-white">
      {/* Background */}
      <div className="absolute inset-0 overflow-hidden">
        <video
          autoPlay
          muted
          loop
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        >
          <source src="/togwe-hero-bg.mp4" type="video/mp4" />
          {/* Optional fallback text */}
          Your browser does not support the video tag.
        </video>
      </div>
      <div className="relative z-10 text-center px-4">
        <h1 className="relative z-10 text-4xl md:text-5xl font-mono max-w-5xl mx-auto leading-tight">{title}</h1>
      </div>
    </section>
  );
}