'use client';

import { useState, useEffect, useCallback } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { AnimatePresence, motion } from 'framer-motion';
import { heroSlides } from '@/lib/products-data';

/* ── Slide animation variants ────────────────────────────── */
const slideVariants = {
  enter: { opacity: 0, x: 60 },
  center: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: -60 },
};

export default function HeroSlider() {
  const [current, setCurrent] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const total = heroSlides.length;

  /* Advance to next slide */
  const next = useCallback(() => {
    setCurrent((prev) => (prev + 1) % total);
  }, [total]);

  /* Go to previous slide */
  const prev = useCallback(() => {
    setCurrent((prev) => (prev - 1 + total) % total);
  }, [total]);

  /* Auto-rotate every 5 seconds */
  useEffect(() => {
    if (isPaused) return;
    const interval = setInterval(next, 5000);
    return () => clearInterval(interval);
  }, [isPaused, next]);

  /* Pause on interaction (mouse enter / touch start) */
  const handlePause = () => setIsPaused(true);
  const handleResume = () => setIsPaused(false);

  const slide = heroSlides[current];

  return (
    <section
      className="relative w-full overflow-hidden"
      style={{ height: 'clamp(300px, 50vw, 560px)' }}
      onMouseEnter={handlePause}
      onMouseLeave={handleResume}
      onTouchStart={handlePause}
      onTouchEnd={handleResume}
      role="region"
      aria-label="Hero slider"
    >
      {/* ── Slides ──────────────────────────────────────────── */}
      <AnimatePresence mode="wait">
        <motion.div
          key={current}
          variants={slideVariants}
          initial="enter"
          animate="center"
          exit="exit"
          transition={{ duration: 0.6, ease: 'easeInOut' }}
          className={`hero-slide active flex items-center bg-gradient-to-r ${slide.gradient}`}
        >
          <div className="mx-auto flex max-w-7xl items-center px-4 sm:px-6 lg:px-8">
            <div className="max-w-xl">
              {/* Badge */}
              <span
                className={`mb-4 inline-block rounded-full px-4 py-1 text-xs font-semibold ${slide.badgeColor}`}
              >
                {slide.badge}
              </span>

              {/* Title */}
              <h1 className="font-heading text-3xl font-bold text-white md:text-5xl lg:text-6xl">
                {slide.title}
              </h1>

              {/* Subtitle */}
              <p className="mt-1 text-sm font-medium text-white/70 md:text-base">
                {slide.subtitle}
              </p>

              {/* Description */}
              <p className="mt-3 max-w-md text-sm text-white/80 md:text-base">
                {slide.description}
              </p>

              {/* CTA button */}
              <a
                href="#"
                className="mt-6 inline-block rounded-full bg-brand px-8 py-3 font-semibold text-white transition-colors hover:bg-brand-dark"
              >
                {slide.cta}
              </a>
            </div>
          </div>
        </motion.div>
      </AnimatePresence>

      {/* ── Left / Right arrows ──────────────────────────────── */}
      <button
        onClick={prev}
        aria-label="Previous slide"
        className="absolute left-3 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-colors hover:bg-white/40"
      >
        <ChevronLeft className="h-5 w-5" />
      </button>
      <button
        onClick={next}
        aria-label="Next slide"
        className="absolute right-3 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-colors hover:bg-white/40"
      >
        <ChevronRight className="h-5 w-5" />
      </button>

      {/* ── Dot indicators ───────────────────────────────────── */}
      <div className="absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 gap-2">
        {heroSlides.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrent(i)}
            aria-label={`Go to slide ${i + 1}`}
            className={`h-2 rounded-full transition-all duration-300 ${
              i === current
                ? 'w-6 bg-white'
                : 'w-2 bg-white/50 hover:bg-white/70'
            }`}
          />
        ))}
      </div>
    </section>
  );
}
