Frontend-Smart_Ticketing/src/components/Hero.tsx

import { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const SLIDES = [
  {
    id: 1,
    title1: "Music Festival",
    title2: "Concert",
    subtitle: "Jual Ticket di Smart Ticketing Aja",
    gradientText: "from-cyan-400 via-indigo-400 to-purple-400",
    gradientSub: "from-emerald-400 to-cyan-400",
    blob1: "bg-purple-600/30",
    blob2: "bg-cyan-500/20",
    blob3: "bg-indigo-600/20"
  },
  {
    id: 2,
    title1: "Standup Comedy",
    title2: "Special Show",
    subtitle: "Pesan Kursi Terbaikmu Sekarang",
    gradientText: "from-pink-400 via-rose-400 to-red-500",
    gradientSub: "from-orange-400 to-amber-400",
    blob1: "bg-pink-600/30",
    blob2: "bg-rose-500/20",
    blob3: "bg-red-600/20"
  },
  {
    id: 3,
    title1: "E-Sports",
    title2: "Tournament",
    subtitle: "Dukung Tim Favoritmu Langsung",
    gradientText: "from-blue-400 via-cyan-400 to-teal-400",
    gradientSub: "from-lime-400 to-emerald-400",
    blob1: "bg-blue-600/30",
    blob2: "bg-teal-500/20",
    blob3: "bg-cyan-600/20"
  }
];

export default function Hero() {
  const [currentSlide, setCurrentSlide] = useState(0);

  // Auto-play
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
    }, 5000);
    return () => clearInterval(timer);
  }, []);

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

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

  const slide = SLIDES[currentSlide];

  return (
    <div className="relative min-h-[90vh] flex items-center justify-center overflow-hidden bg-slate-950 pt-20 transition-colors duration-1000">
      {/* Abstract Backgrounds (Dynamic based on slide) */}
      <div className="absolute inset-0 w-full h-full transition-all duration-1000">
        <div className={`absolute top-0 left-1/4 w-[800px] h-[800px] ${slide.blob1} rounded-full blur-[150px] mix-blend-screen animate-pulse transition-colors duration-1000`} />
        <div className={`absolute bottom-0 right-1/4 w-[600px] h-[600px] ${slide.blob2} rounded-full blur-[120px] mix-blend-screen transition-colors duration-1000`} />
        <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[500px] ${slide.blob3} rounded-full blur-[150px] transition-colors duration-1000`} />
      </div>

      {/* Content Container */}
      <div className="relative z-10 text-center px-4 max-w-5xl mx-auto flex flex-col items-center">
        
        {/* Large Decorative Text */}
        <h1 
          key={`title1-${slide.id}`}
          className={`font-display font-black text-6xl md:text-8xl lg:text-9xl text-transparent bg-clip-text bg-gradient-to-r ${slide.gradientText} drop-shadow-2xl mb-2 tracking-tighter uppercase animate-in fade-in slide-in-from-bottom-4 duration-700`}
        >
          {slide.title1}
        </h1>
        <h2 
          key={`title2-${slide.id}`}
          className="font-display font-black text-6xl md:text-8xl lg:text-9xl text-slate-100 drop-shadow-2xl tracking-tighter uppercase mb-8 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-100 fill-mode-backwards"
        >
          {slide.title2}
        </h2>

        {/* Subtitle Call to action */}
        <div className="inline-block relative animate-in fade-in slide-in-from-bottom-4 duration-700 delay-200 fill-mode-backwards" key={`sub-${slide.id}`}>
          <div className={`absolute inset-0 bg-gradient-to-r ${slide.gradientSub} blur-xl opacity-30 transition-colors duration-1000`}></div>
          <h3 className={`relative font-display font-extrabold text-3xl md:text-5xl text-transparent bg-clip-text bg-gradient-to-r ${slide.gradientSub} tracking-tight uppercase transition-colors duration-1000`}>
            {slide.subtitle}
          </h3>
        </div>

        {/* Decorative Elements */}
        <div className="absolute top-1/4 left-10 md:left-20 animate-bounce delay-100 hidden lg:block">
          <div className="w-16 h-16 rounded-3xl bg-gradient-to-tr from-cyan-400 to-blue-500 rotate-12 shadow-[0_0_30px_rgba(34,211,238,0.4)]" />
        </div>
        <div className="absolute bottom-1/4 right-10 md:right-20 animate-bounce delay-300 hidden lg:block">
          <div className="w-20 h-20 rounded-full bg-gradient-to-tr from-yellow-400 to-orange-500 shadow-[0_0_30px_rgba(250,204,21,0.4)]" />
        </div>
      </div>

      {/* Slide Indicators */}
      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex items-center gap-3 z-20">
        {SLIDES.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-3 h-3 rounded-full transition-all duration-300 ${
              currentSlide === index ? 'bg-white w-8' : 'bg-white/30 hover:bg-white/60'
            }`}
          />
        ))}
      </div>

      {/* Carousel Controls */}
      <button 
        onClick={prevSlide}
        className="absolute left-4 md:left-10 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/10 transition-all backdrop-blur-md z-20"
      >
        <ChevronLeft className="w-6 h-6" />
      </button>
      <button 
        onClick={nextSlide}
        className="absolute right-4 md:right-10 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/50 hover:text-white hover:bg-white/10 transition-all backdrop-blur-md z-20"
      >
        <ChevronRight className="w-6 h-6" />
      </button>
    </div>
  );
}