import Image from "next/image";

type HeroBannerProps = {
  priority?: boolean;
};

export default function HeroBanner({ priority = true }: HeroBannerProps) {
  return (
    <section className="hero-hover w-full">
      <div className="relative h-[320px] w-full overflow-hidden bg-[#cfd7ea] sm:h-[420px] lg:h-[560px]">
        <Image
          src="/SiteMente-Banner.jpg"
          alt="SiteMente hero banner with AI voice visual"
          fill
          sizes="100vw"
          priority={priority}
          className="object-contain"
        />
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/0 via-white/0 to-white/10" />
        <div className="hero-voice-ring hero-voice-ring--one" />
        <div className="hero-voice-ring hero-voice-ring--two" />
        <div className="hero-voice-ring hero-voice-ring--three" />
      </div>
    </section>
  );
}