import heroImage from "@/assets/hero-bg.jpg";

export const HeroSection = () => {
  const scrollToContact = () => {
    const contactSection = document.getElementById("contact-whatsapp");
    if (contactSection) {
      contactSection.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
      {/* Background Image with Stronger Overlay for legibility */}
      <div className="absolute inset-0 z-0">
        <img
          src={heroImage}
          alt="Espaço Só Folia decorado para festa"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-foreground/70 via-foreground/50 to-foreground/80" />
      </div>

      {/* Content */}
      <div className="relative z-20 container mx-auto px-6 text-center">
        <div className="max-w-3xl mx-auto animate-fade-in">
          {/* Logo/Brand */}
          <div className="mb-6">
            <span className="inline-block px-4 py-2 rounded-full bg-yellow/90 text-foreground font-display font-bold text-sm tracking-wide uppercase">
              Buffet Infantil
            </span>
          </div>

          {/* Main Title */}
          <h1 className="font-display font-extrabold text-4xl md:text-6xl lg:text-7xl text-white leading-tight mb-6">
            Só Folia
          </h1>

          {/* Subtitle */}
          <p className="text-xl md:text-2xl text-white/90 font-light mb-4 max-w-2xl mx-auto">
            Onde a alegria das crianças encontra a tranquilidade dos pais
          </p>

          <p className="text-lg text-white/80 mb-10 max-w-xl mx-auto">
            Um espaço feito para celebrar momentos especiais e criar memórias inesquecíveis
          </p>

          {/* CTA Button - Scrolls to contact */}
          <button
            onClick={() => {
              const contactSection = document.getElementById("contact-whatsapp");
              if (contactSection) {
                contactSection.scrollIntoView({ behavior: "smooth" });
              }
            }}
            className="btn-whatsapp"
          >
            <span>Fale conosco</span>
          </button>
        </div>
      </div>

      {/* Decorative Elements */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background to-transparent z-10" />
    </section>
  );
};
