"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { motion } from "framer-motion"

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

  const slides = [
    {
      image: "/placeholder.svg?height=1080&width=1920",
      title: "Новая коллекция весна-лето 2025",
      subtitle: "Эксклюзивная одежда для тех, кто ценит качество, стиль и индивидуальность",
      cta: "Перейти в каталог",
      link: "/catalog",
    },
    {
      image: "/placeholder.svg?height=1080&width=1920",
      title: "Эксклюзивные модели",
      subtitle: "Создано с любовью к деталям и вниманием к каждому шву",
      cta: "Смотреть коллекции",
      link: "/collections",
    },
    {
      image: "/placeholder.svg?height=1080&width=1920",
      title: "Натуральные материалы",
      subtitle: "Мы используем только лучшие ткани для создания наших изделий",
      cta: "Узнать больше",
      link: "/about",
    },
  ]

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1))
    }, 6000)
    return () => clearInterval(interval)
  }, [slides.length])

  const handleDotClick = (index: number) => {
    setCurrentSlide(index)
  }

  return (
    <section className="relative h-[90vh] min-h-[700px] overflow-hidden">
      {slides.map((slide, index) => (
        <div
          key={index}
          className={`absolute inset-0 transition-opacity duration-1000 ${
            currentSlide === index ? "opacity-100" : "opacity-0 pointer-events-none"
          }`}
        >
          <div className="absolute inset-0 bg-cover bg-center" style={{ backgroundImage: `url('${slide.image}')` }}>
            <div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent"></div>
          </div>

          <div className="relative h-full container mx-auto px-4 flex flex-col justify-center items-start">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: currentSlide === index ? 1 : 0, y: currentSlide === index ? 0 : 20 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="max-w-xl text-white space-y-6"
            >
              <span className="inline-block px-3 py-1 border border-white/30 text-sm backdrop-blur-sm rounded-full mb-4">
                Новая коллекция
              </span>
              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold leading-tight">{slide.title}</h1>
              <p className="text-xl md:text-2xl opacity-90 font-light">{slide.subtitle}</p>
              <div className="flex flex-col sm:flex-row gap-4 pt-4">
                <Button asChild size="lg" className="bg-white text-primary hover:bg-tertiary rounded-full px-8">
                  <Link href={slide.link}>{slide.cta}</Link>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="border-white text-white hover:bg-white/10 rounded-full px-8"
                >
                  <Link href="/collections">Смотреть все</Link>
                </Button>
              </div>
            </motion.div>
          </div>
        </div>
      ))}

      {/* Slide indicators */}
      <div className="absolute bottom-10 left-0 right-0 flex justify-center gap-3">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => handleDotClick(index)}
            className={`w-3 h-3 rounded-full transition-all duration-300 ${
              currentSlide === index ? "bg-white w-10" : "bg-white/50 hover:bg-white/80"
            }`}
            aria-label={`Перейти к слайду ${index + 1}`}
          />
        ))}
      </div>
    </section>
  )
}

