const Features = () => {
    const features = [
        {
            icon: "cpu",
            title: "Blazing Fast Performance",
            description: "Optimized with modern React and Tailwind for lightning-fast load times and smooth animations."
        },
        {
            icon: "smartphone",
            title: "Fully Responsive",
            description: "Looks great on any device, from mobile phones to large desktop displays."
        },
        {
            icon: "moon",
            title: "Dark Mode Ready",
            description: "Automatic dark mode detection with toggle option for user preference."
        },
        {
            icon: "code",
            title: "Clean Code",
            description: "Modular components with proper separation of concerns for easy maintenance."
        }
    ];

    return (
        <section className="py-16 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
                        Why Choose PixelPulse?
                    </h2>
                    <p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                        We combine cutting-edge technology with elegant design to deliver exceptional digital experiences.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {features.map((feature, index) => (
                        <div 
                            key={index}
                            className="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 group"
                        >
                            <div className="w-14 h-14 bg-indigo-100 dark:bg-pink-900 rounded-lg flex items-center justify-center mb-6 group-hover:bg-indigo-500 dark:group-hover:bg-pink-500 transition-colors">
                                <i 
                                    data-feather={feature.icon} 
                                    className="text-indigo-500 dark:text-pink-500 w-6 h-6 group-hover:text-white transition-colors"
                                ></i>
                            </div>
                            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
                                {feature.title}
                            </h3>
                            <p className="text-gray-600 dark:text-gray-300">
                                {feature.description}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}