"use client";
import React from 'react';
import { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const slides = [
  {
    title: "Turn Your Expertise into Intelligent AI Agents",
    description: "Effortlessly convert your existing services into AI-powered agents. Empower your business with innovative, interactive tools that open new revenue streams.",
    buttonText: "Get Started Today",
    buttonLink: "#",
    image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60" // Semi-transparent overlay for better text readability
  },
  {
    title: "Design Without Coding",
    description: "Leverage our drag-and-drop builder to create custom AI solutions—no programming skills required. Your ideas, our platform, endless possibilities.",
    buttonText: "Explore the Builder",
    buttonLink: "#",
    image: "https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  },
  {
    title: "Unleash Your Creative Potentialr",
    description: "From forms and video editing to AI writing and newsletters, our fully integrated creative suite brings your vision to life with the power of AI.",
    buttonText: "Discover Our Tools",
    buttonLink: "#",
    image: "https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  },
  {
    title: "Monetize Your Skills & Services",
    description: "Build your own community or tap into our marketplace to sell AI-powered subscriptions to SMBs. Turn your expertise into a recurring revenue engine.",
    buttonText: "Learn How to Monetize",
    buttonLink: "#",
    image: "https://plus.unsplash.com/premium_photo-1661338826350-49e4fd1b004e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  },
  {
    title: "Step Into the Future of Business",
    description: "Embrace the next era of innovation. Transform, scale, and thrive with our AI-powered platform that adapts to your business needs.",
    buttonText: "Start Your Free Trial",
    buttonLink: "#",
    image: "https://plus.unsplash.com/premium_photo-1661425631372-6f9530fc211f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  }
];

const HeroCarousel = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 10000);

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

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  return (
    <div className='h-screen flex flex-col items-end justify-end'>
      <div className="relative h-[92%] w-full overflow-hidden">
        {/* Slides */}
        <div className="relative h-full w-full">
          {slides.map((slide, index) => (
            <div
              key={index}
              className={`absolute inset-0 h-full w-full transition-all duration-700 ${currentSlide === index
                  ? 'translate-x-0 opacity-100'  // Show current slide
                  : currentSlide > index
                    ? '-translate-x-full opacity-0' // Slide left for previous slides
                    : 'translate-x-full opacity-0'  // Slide right for next slides
                }`}
            >
              {/* Background Image */}
              <div
                className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-transform duration-700"
                style={{
                  backgroundImage: `url(${slide.image})`,
                  transform: currentSlide === index ? 'scale(1.05)' : 'scale(1)'
                }}
              />
              {/* Overlay */}
              <div className={`absolute inset-0 ${slide.overlayClass}`} />

              {/* Content */}
              <div className="relative flex h-full flex-col items-start justify-end py-40 px-20 text-left">
                <div className="max-w-3xl">
                  <h1 className="mb-6 text-6xl  text-white drop-shadow-lg">
                    {slide.title}
                  </h1>
                  <p className="mb-8 text-xl text-white drop-shadow-lg">
                    {slide.description}
                  </p>
                  <a
                    href={slide.buttonLink}
                    className="rounded-lg mt-10 bg-white px-8 py-3 text-lg font-semibold text-gray-900 transition-colors hover:bg-gray-100"
                  >
                    {slide.buttonText}
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Navigation Buttons */}
        {/* <button
        onClick={prevSlide}
        className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
      >
        <ChevronLeft size={28} />
      </button>
      <button
        onClick={nextSlide}
        className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
      >
        <ChevronRight size={28} />
      </button> */}

        {/* Slide Indicators */}
        <div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 space-x-3">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`h-2 rounded-full transition-all ${currentSlide === index ? 'w-8 bg-white' : 'w-2 bg-white/50'
                }`}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default HeroCarousel;