import React, { useRef } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

interface HeroSlide {
  id: number;
  imageSrc: string;
  imageAlt: string;
}

const heroSlides: HeroSlide[] = [
  {
    id: 1,
    imageSrc: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1920&h=1080&fit=crop',
    imageAlt: 'Luxury Sports Car',
  },
  {
    id: 2,
    imageSrc: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920&h=1080&fit=crop',
    imageAlt: 'Red Sports Car',
  },
  {
    id: 3,
    imageSrc: 'https://images.unsplash.com/photo-1609138315745-4e44ac3bbd8d?w=1920&h=1080&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0',
    imageAlt: 'Ferrari SF90',
  },
  {
    id: 4,
    imageSrc: 'https://images.unsplash.com/photo-1544636331-e26879cd4d9b?w=1920&h=1080&fit=crop',
    imageAlt: 'Black Luxury Vehicle',
  },
  {
    id: 5,
    imageSrc: 'https://images.unsplash.com/photo-1740095960937-c7b03f511da4?w=1920&h=1080&fit=crop&crop=focalpoint&fp-x=0.5&fp-y=0.6&q=80&auto=format&ixlib=rb-4.1.0',
    imageAlt: 'Corvette Z06 - Black Rose',
  },
  {
    id: 6,
    imageSrc: 'https://images.unsplash.com/photo-1520031441872-265e4ff70366?w=1920&h=1080&fit=crop',
    imageAlt: 'Luxury Sedan',
  },
];

interface HeroCarouselProps {
  onGetStarted: () => void;
}

export const HeroCarousel: React.FC<HeroCarouselProps> = ({ onGetStarted }) => {
  const sliderRef = useRef<Slider>(null);

  const settings = {
    dots: true,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    fade: true,
    cssEase: 'cubic-bezier(0.4, 0, 0.2, 1)',
    pauseOnHover: true,
    arrows: true,
  };

  return (
    <div className="relative w-full hero-carousel">
      <Slider ref={sliderRef} {...settings}>
        {heroSlides.map((slide) => (
          <div key={slide.id} className="relative">
            <div className="relative h-[500px] md:h-[600px] lg:h-[700px]">
              <img
                src={slide.imageSrc}
                alt={slide.imageAlt}
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60" />
            </div>
          </div>
        ))}
      </Slider>

      {/* Hero Text Overlay - positioned outside Slider to prevent fading */}
      <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4 pointer-events-none">
        <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 md:mb-8 drop-shadow-lg">
          Track every mile. Own every detail.
        </h1>
        <button
          onClick={onGetStarted}
          className="pointer-events-auto bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 md:py-4 md:px-10 rounded-lg text-lg md:text-xl transition-colors duration-300 shadow-lg shadow-black/30 focus:outline-none focus:ring-2 focus:ring-primary-500/50"
        >
          Get Started
        </button>
      </div>

      <style>{`
        .hero-carousel .slick-dots {
          bottom: 25px;
        }

        .hero-carousel .slick-dots li button:before {
          font-size: 12px;
          color: white;
          opacity: 0.5;
        }

        .hero-carousel .slick-dots li.slick-active button:before {
          color: #7A212A;
          opacity: 1;
        }

        .hero-carousel .slick-prev,
        .hero-carousel .slick-next {
          z-index: 10;
          width: 50px;
          height: 50px;
        }

        .hero-carousel .slick-prev {
          left: 25px;
        }

        .hero-carousel .slick-next {
          right: 25px;
        }

        .hero-carousel .slick-prev:before,
        .hero-carousel .slick-next:before {
          font-size: 50px;
          opacity: 0.6;
        }

        .hero-carousel .slick-prev:hover:before,
        .hero-carousel .slick-next:hover:before {
          opacity: 0.9;
        }
      `}</style>
    </div>
  );
};
