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

const Features = () => {
    const features = [
        {
            icon: Video,
            title: 'Web-powered Video Editor',
            description: 'Easy video editor with editable text, background, memes, built into the web. No additional software required.',
            gradient: 'bg-gradient-to-br from-transparent to-blue-500/5 dark:to-blue-400/10 hover:bg-gradient-to-tl',
        },
        {
            icon: Heart,
            title: 'Built-in over 200+ memes, for now',
            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',
        },

        {
            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',
        },
        {
            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',
        },
        {
            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',
        },
    ];

    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.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;
