"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import CustomButton from "./CustomButton";

const images = [
  "/images/kitchen/kitchen-1.jpg",
  "/images/kitchen/kitchen-2.jpg",
  "/images/bathroom/bathroom-1.jpg",
  "/images/bathroom/bathroom-2.jpg",
  "/images/bathroom/bathroom-3.jpg",
];

export default function HeroBanner() {
  const containerRef = useRef(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const slides = gsap.utils.toArray(".slide");

      gsap.set(slides, { autoAlpha: 0, zIndex: 0 });
      gsap.set(slides[0], { autoAlpha: 1, zIndex: 1 });

      let current = 0;

      const showSlide = (index) => {
        const prev = slides[current];
        const next = slides[index];

        gsap.set(next, { zIndex: 2 });
        gsap.to(prev, { autoAlpha: 0, duration: 1 });
        gsap.to(next, {
          autoAlpha: 1,
          duration: 1,
          onComplete: () => {
            gsap.set(prev, { zIndex: 0 });
            gsap.set(next, { zIndex: 1 });
            current = index;
          },
        });
      };

      const interval = setInterval(() => {
        const nextIndex = (current + 1) % slides.length;
        showSlide(nextIndex);
      }, 4000);

      return () => clearInterval(interval);
    }, containerRef);

    return () => ctx.revert();
  }, []);

  return (
    <section
      ref={containerRef}
      className="relative h-[600px] md:h-[800px] w-full overflow-hidden"
    >
      {images.map((src, idx) => (
        <div
          key={idx}
          className="slide absolute inset-0"
          style={{
            backgroundImage: `url(${src})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        >
          {/* Optional overlay */}
          <div className="absolute inset-0 bg-black/40"></div>
        </div>
      ))}

      {/* Hero content */}
      <div className="absolute inset-0 flex flex-col items-center justify-center text-center text-white z-10">
        <h1 className="text-4xl md:text-6xl font-bold mb-4">
          Transform Your Home
        </h1>
        <p className="text-lg md:text-xl mb-6">
          Renovations • Extensions • Designs
        </p>
       
        <CustomButton text="Get Started" />
      </div>
    </section>
  );
}
