"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Music, Headphones, Heart, Radio, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

const slides = [
  {
    icon: Music,
    title: "Bienvenue sur MusicApp",
    description: "Découvrez des millions de titres et créez vos playlists personnalisées.",
    color: "from-purple-600 to-pink-600",
  },
  {
    icon: Headphones,
    title: "Qualité audio premium",
    description: "Profitez d'une qualité audio exceptionnelle jusqu'au format lossless.",
    color: "from-blue-600 to-cyan-600",
  },
  {
    icon: Heart,
    title: "Vos favoris, partout",
    description: "Téléchargez vos titres préférés et écoutez-les même hors connexion.",
    color: "from-pink-600 to-red-600",
  },
  {
    icon: Radio,
    title: "Découvertes personnalisées",
    description: "Nos recommandations s'adaptent à vos goûts musicaux.",
    color: "from-green-600 to-teal-600",
  },
]

export default function WelcomePage() {
  const router = useRouter()
  const [currentSlide, setCurrentSlide] = useState(0)

  const handleNext = () => {
    if (currentSlide < slides.length - 1) {
      setCurrentSlide((prev) => prev + 1)
    } else {
      router.push("/")
    }
  }

  const handleSkip = () => {
    router.push("/")
  }

  const slide = slides[currentSlide]
  const Icon = slide.icon

  return (
    <div className="flex min-h-screen flex-col bg-background">
      {/* Skip button */}
      <div className="flex justify-end p-4">
        <button onClick={handleSkip} className="text-sm text-muted-foreground hover:text-foreground">
          Passer
        </button>
      </div>

      {/* Content */}
      <div className="flex flex-1 flex-col items-center justify-center px-8">
        {/* Icon */}
        <div
          className={`mb-8 flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br ${slide.color}`}
        >
          <Icon className="h-16 w-16 text-white" />
        </div>

        {/* Text */}
        <h1 className="mb-4 text-center text-2xl font-bold text-foreground">{slide.title}</h1>
        <p className="mb-8 max-w-xs text-center text-muted-foreground">{slide.description}</p>

        {/* Dots */}
        <div className="mb-8 flex gap-2">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`h-2 rounded-full transition-all ${
                index === currentSlide ? "w-8 bg-primary" : "w-2 bg-muted"
              }`}
            />
          ))}
        </div>
      </div>

      {/* Actions */}
      <div className="p-8">
        <Button onClick={handleNext} className="w-full gap-2" size="lg">
          {currentSlide < slides.length - 1 ? (
            <>
              Continuer
              <ChevronRight className="h-5 w-5" />
            </>
          ) : (
            "Commencer"
          )}
        </Button>
      </div>
    </div>
  )
}
