import Image from "next/image";
import Link from "next/link";
import { FaWhatsapp } from "react-icons/fa";

interface HeroSlideProps {
  data: (typeof import("../constants/hero-data").HERO_SLIDES)[0];
  getWaLink: (text: string) => string;
  isPriority?: boolean;
}

export const HeroSlide = ({ data, getWaLink, isPriority }: HeroSlideProps) => (
  <div className="w-full h-full relative group">
    {/* --- Background Image & Overlay --- */}
    <div className="absolute inset-0 z-0">
      <Image
        src={data.image}
        alt={data.alt}
        fill
        priority={isPriority}
        className="object-cover brightness-[0.85] transition-transform duration-5000 group-hover:scale-105"
        sizes="100vw"
      />
      
      <div className="absolute inset-0 bg-linear-to-b from-black/20 via-transparent to-black/40"></div>
    </div>

    {/* --- Content Card --- */}
    <div className="relative h-full w-full flex items-center justify-center z-20 px-6 pt-24 pb-12">
      {" "}
      
      <div className="max-w-5xl w-full bg-white/40 backdrop-blur-xl p-8 md:px-16 md:py-14 rounded-[40px] border border-white/40 shadow-2xl text-center transform transition-all duration-700">

        <p className="text-blue-600 font-black uppercase tracking-[0.3em] text-[9px] md:text-[11px] mb-4">
          {data.subtitle || "High-Impact Promotion"}
        </p>

        {/* Title Utama*/}
        <h1 className="text-3xl md:text-5xl lg:text-6xl font-black text-slate-900 uppercase tracking-tighter leading-[1.1] mb-6">
          {data.title.split(" ").map((word, i) =>
            i === data.title.split(" ").length - 1 ? (
              <span key={i} className="text-blue-600">
                {" "}
                {word}
              </span>
            ) : (
              <span key={i}> {word}</span>
            ),
          )}
        </h1>

        {/* Deskripsi */}
        <p className="text-xs md:text-base font-bold text-slate-700 max-w-2xl mx-auto leading-relaxed mb-10">
          {data.desc}
        </p>

        {/* Tombol CTA */}
        <div className="flex flex-wrap justify-center gap-4">
          <Link
            href={getWaLink(data.title)}
            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 md:px-10 py-3.5 rounded-full font-black uppercase tracking-widest text-[9px] md:text-[10px] transition-all shadow-lg hover:scale-105 active:scale-95"
          >
            <FaWhatsapp size={16} />
            Booking Sekarang
          </Link>
        </div>
      </div>
    </div>
  </div>
);