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

const Features = () => {
    const features = [
        {
            icon: Heart,
            title: 'Make video memes for free',
            description: 'Access 200+ meme templates and backgrounds without paying a cent',
        },
        {
            icon: Video,
            title: 'Easy Video Editor',
            description: 'Simple video editor with draggable text, background, memes and real-time preview',
        },

        {
            icon: Download,
            title: 'Instant Export',
            description: 'Download high-quality MP4 videos optimized for TikTok, Youtube Shorts, Instagram Reels, and more',
        },
        {
            icon: Smartphone,
            title: 'Works Everywhere',
            description: 'Create on desktop, tablet, or mobile with responsive design',
        },
        {
            icon: Library,
            title: 'Library Updates',
            description: 'Fresh viral memes and backgrounds updated regularly',
            comingSoon: true,
        },
        {
            icon: Bot,
            title: 'AI Caption & Backgrounds',
            description: 'Smart caption and background generation coming soon',
            comingSoon: true,
        },
    ];

    return (
        <section className="">
            <div className="mx-auto max-w-6xl space-y-10 px-4 sm:px-6 lg:px-8">
                <div className="text-center">
                    <h2 className="text-foreground mb-4 text-3xl font-bold sm:text-4xl lg:text-5xl">Everything you need to create viral memes</h2>
                    <p className="text-muted-foreground mx-auto max-w-2xl text-lg">Simple, powerful tools that help creators make engaging content</p>
                </div>

                <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 lg:gap-4">
                    {features.map((feature, index) => (
                        <div
                            key={index}
                            className="group bg-card hover:bg-muted/50 relative rounded-2xl border p-6 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">
                                    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;