"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { Star } from "lucide-react";

const heroImages = [
  "/images/gallery-3.png",
  "/images/residential.png",
  "/images/generator.png",
  "/images/gallery-1.png",
  "/images/gallery-2.png"
];

export default function HeroCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % heroImages.length);
    }, 5000); // Change image every 5 seconds

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="relative">
      {/* Main Image Container */}
      <div className="relative rounded shadow-2xl overflow-hidden border-8 border-white/5 h-[500px]">
        {heroImages.map((image, index) => (
          <div
            key={index}
            className={`absolute inset-0 transition-opacity duration-1000 ${index === currentIndex ? "opacity-100" : "opacity-0"
              }`}
          >
            <Image
              src={image}
              alt={`Professional electrical services - ${index === 0 ? 'Commercial' : index === 1 ? 'Residential' : index === 2 ? 'Generator Installation' : 'Project'} ${index + 1}`}
              fill
              sizes="50vw"
              priority={index === 0}
              className={`object-cover ${index === currentIndex ? "animate-ken-burns" : ""
                }`}
            />
          </div>
        ))}

        {/* Gradient Overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-[color:var(--bg-dark)]/80 to-transparent"></div>

        {/* Master Electricians Badge - Centered */}
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2">
          <div className="bg-white/95 backdrop-blur p-6 rounded shadow-lg flex items-center justify-between gap-8">
            <div>
              <p className="font-display font-bold text-[color:var(--bg-dark)] text-lg">
                Master Electricians
              </p>
              <p className="text-[color:var(--muted)] text-sm">
                Top-rated professionals
              </p>
            </div>
            <div className="flex text-[color:var(--brand)]">
              <Star fill="currentColor" size={20} />
              <Star fill="currentColor" size={20} />
              <Star fill="currentColor" size={20} />
              <Star fill="currentColor" size={20} />
              <Star fill="currentColor" size={20} />
            </div>
          </div>
        </div>
      </div>

      {/* Floating element - Positioned lower and more to the left */}
      <div className="absolute -bottom-16 -left-32 bg-[color:var(--brand)] text-white p-8 rounded shadow-2xl z-20 max-w-xs transition-transform hover:scale-105">
        <p className="font-display font-bold text-3xl mb-1">50+</p>
        <p className="text-sm opacity-90 uppercase tracking-widest font-bold">
          Years of Excellence in South Texas
        </p>
      </div>
    </div>
  );
}
