import styles from './Features.module.css';

export default function Features() {
    const features = [
        {
            icon: '📅',
            title: 'Smart Scheduling',
            description: 'Schedule posts across all platforms with AI-powered optimal timing suggestions.',
            color: '#667eea',
        },
        {
            icon: '📊',
            title: 'Advanced Analytics',
            description: 'Track performance metrics, engagement rates, and audience insights in real-time.',
            color: '#ec4899',
        },
        {
            icon: '🤖',
            title: 'AI Content Assistant',
            description: 'Generate engaging captions and hashtags with our AI-powered content tools.',
            color: '#14b8a6',
        },
        {
            icon: '👥',
            title: 'Team Collaboration',
            description: 'Work seamlessly with your team with role-based access and approval workflows.',
            color: '#f59e0b',
        },
        {
            icon: '📱',
            title: 'Multi-Platform Support',
            description: 'Manage Facebook, Instagram, Twitter, LinkedIn, and more from one dashboard.',
            color: '#8b5cf6',
        },
        {
            icon: '🔔',
            title: 'Real-Time Notifications',
            description: 'Stay updated with instant alerts for mentions, comments, and engagement.',
            color: '#ef4444',
        },
    ];

    return (
        <section className="section" id="features">
            <div className="container">
                <div className={styles.header}>
                    <div className={styles.badge}>
                        <span>✨</span>
                        <span>Features</span>
                    </div>
                    <h2 className={styles.title}>
                        Everything You Need to <span className="gradient-text">Succeed</span>
                    </h2>
                    <p className={styles.subtitle}>
                        Powerful tools designed to streamline your social media management and boost your online presence.
                    </p>
                </div>

                <div className={styles.featuresGrid}>
                    {features.map((feature, index) => (
                        <div
                            key={index}
                            className={styles.featureCard}
                            style={{ animationDelay: `${index * 0.1}s` }}
                        >
                            <div className={styles.iconWrapper} style={{ background: `${feature.color}20` }}>
                                <span className={styles.icon} style={{ filter: `drop-shadow(0 0 10px ${feature.color})` }}>
                                    {feature.icon}
                                </span>
                            </div>
                            <h3 className={styles.featureTitle}>{feature.title}</h3>
                            <p className={styles.featureDescription}>{feature.description}</p>
                            <div className={styles.learnMore}>
                                Learn more <span className={styles.arrow}>→</span>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}