"use client";

import { Sparkles, ChevronRight } from "lucide-react";
import { Card } from "@/components/ui/Card";

export function HowItWorks() {
    return (
        <Card className="p-6 bg-[#111]/50  border-white/5">
            <h3 className="text-lg font-bold mb-4 flex items-center gap-2 text-white">
                <Sparkles className="w-5 h-5 text-purple-400" />
                How It Works
            </h3>
            <div className="space-y-3 text-sm text-gray-400">
                <div className="flex items-start gap-3">
                    <ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
                    <p>
                        Analyzes your listening history and library using
                        Last.fm similarity data
                    </p>
                </div>
                <div className="flex items-start gap-3">
                    <ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
                    <p>
                        Discovers similar artists across tiers: High (80-100%),
                        Medium (50-79%), Explore (30-49%), Wild Cards (0-29%)
                    </p>
                </div>
                <div className="flex items-start gap-3">
                    <ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
                    <p>
                        One song per album downloads the full album to
                        /music/discovery
                    </p>
                </div>
                <div className="flex items-start gap-3">
                    <ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
                    <p>
                        Liked albums move to your library. Others removed at
                        week end.
                    </p>
                </div>
                <div className="flex items-start gap-3">
                    <ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
                    <p>Albums won't repeat for 6 months</p>
                </div>
                <div className="flex items-start gap-3">
                    <ChevronRight className="w-4 h-4 mt-0.5 text-purple-400/60 shrink-0" />
                    <p>
                        If albums aren't available, they're automatically
                        replaced and you can still preview them via Deezer
                    </p>
                </div>
            </div>
        </Card>
    );
}