interface HeroProps {
  videoSrc?: string;
}

export function Hero({ videoSrc = "/hero-video.mp4" }: HeroProps) {
  return (
    <section className="relative h-[85vh] w-full overflow-hidden">
      {/* Video Background */}
      <video
        className="absolute inset-0 h-full w-full object-cover"
        autoPlay
        muted
        loop
        playsInline
      >
        <source src={videoSrc} type="video/mp4" />
        Your browser does not support the video tag.
      </video>

      {/* Gradient + dark overlay to match mockup */}
      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent" />

      {/* Content bottom-aligned */}
      <div className="relative z-10 flex h-full items-end">
        <div className="container pb-10 text-white">
          <div className="max-w-5xl space-y-3">
            <h1 className="text-[28px] sm:text-[36px] md:text-[44px] lg:text-[48px] leading-tight font-bold tracking-tight">
              A digital studio & branding powerhouse
              <br />
              making cool shit that performs.
            </h1>
            <p className="max-w-xl text-[10px] sm:text-xs text-gray-300">
              We partner with the world's most ambitious brands to create powerful brands to unlock their full potential. We go beyond design to create compelling, strategic brand image.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

