import { Download, Heart, Library, Smartphone, Video } from 'lucide-react';

const Features = () => {
    const features = [
        {
            icon: Video,
            title: 'No installation needed',
            description: 'Easy video editor with editable text, background, memes, built into the web.',
            gradient: 'bg-gradient-to-br from-transparent to-blue-500/5 dark:to-blue-400/10 hover:bg-gradient-to-tl',
            order: 3,
        },
        {
            icon: Heart,
            title: 'Built-in meme & backgrounds',
            description: 'Access meme and background with our editor without paying a cent.',
            gradient: 'bg-gradient-to-br from-transparent to-pink-500/5 dark:to-pink-400/10 hover:bg-gradient-to-tl',
            order: 1,
        },
        {
            icon: Download,
            title: 'Export in minutes',
            description: 'Download high-quality 720p MP4 videos optimized for TikTok, Youtube Shorts, Instagram Reels, and more.',
            gradient: 'bg-gradient-to-br from-transparent to-green-500/5 dark:to-green-400/10 hover:bg-gradient-to-tl',
            order: 2,
        },
        {
            icon: Smartphone,
            title: 'Works Everywhere',
            description: 'Create on desktop, tablet, or mobile! Potato devices not recommended though.',
            gradient: 'bg-gradient-to-br from-transparent to-purple-500/5 dark:to-purple-400/10 hover:bg-gradient-to-tl',
            order: 4,
        },
        {
            icon: Library,
            title: 'Meme Library Updates',
            description: 'Soon we will be adding more memes and backgrounds to the library!',
            comingSoon: true,
            gradient: 'bg-gradient-to-br from-transparent to-orange-500/5 dark:to-orange-400/10 hover:bg-gradient-to-tl',
            order: 5,
        },
    ];

    return (
        <section className="">
            <div className="mx-auto max-w-6xl space-y-10 px-4 sm:px-6 lg:px-8">
                <div className="flex flex-wrap justify-center gap-3 md:grid-cols-2 lg:grid-cols-3 lg:gap-4">
                    {features
                        .sort((a, b) => a.order - b.order)
                        .map((feature, index) => (
                            <div
                                key={index}
                                className={`group hover:bg-muted/50 relative h-auto min-h-[275px] w-[275px] rounded-2xl border p-6 shadow-lg ${feature.gradient} transition-all duration-300 lg:p-8`}
                            >
                                {feature.comingSoon && (
                                    <div className="bg-foreground text-background absolute -top-2 -right-2 rounded-full px-2 py-1 text-xs font-medium">
                                        Coming Soon!
                                    </div>
                                )}

                                <div className="mb-4">
                                    <feature.icon className="text-foreground h-8 w-8" />
                                </div>

                                <h3 className="text-foreground mb-2 text-xl font-semibold">{feature.title}</h3>

                                <p className="text-muted-foreground leading-relaxed">{feature.description}</p>
                            </div>
                        ))}
                </div>
            </div>
        </section>
    );
};

export default Features;