const Footer = () => {
    const currentYear = new Date().getFullYear();
    const socialLinks = [
        { icon: "github", url: "#" },
        { icon: "twitter", url: "#" },
        { icon: "instagram", url: "#" },
        { icon: "linkedin", url: "#" }
    ];

    return (
        <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div className="md:col-span-2">
                        <div className="flex items-center mb-4">
                            <i data-feather="zap" className="text-indigo-500 dark:text-pink-500 w-6 h-6"></i>
                            <span className="ml-2 text-xl font-bold text-gray-900 dark:text-white">
                                PixelPulse
                            </span>
                        </div>
                        <p className="text-gray-600 dark:text-gray-300 mb-4">
                            Elevating digital experiences with cutting-edge technology and elegant design.
                        </p>
                        <div className="flex space-x-4">
                            {socialLinks.map((social, index) => (
                                <a 
                                    key={index}
                                    href={social.url}
                                    className="text-gray-500 dark:text-gray-400 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors"
                                >
                                    <i data-feather={social.icon} className="w-5 h-5"></i>
                                </a>
                            ))}
                        </div>
                    </div>

                    <div>
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            Quick Links
                        </h3>
                        <ul className="space-y-2">
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Home</a></li>
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Features</a></li>
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Pricing</a></li>
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Contact</a></li>
                        </ul>
                    </div>

                    <div>
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            Legal
                        </h3>
                        <ul className="space-y-2">
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Privacy Policy</a></li>
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Terms of Service</a></li>
                            <li><a href="#" className="text-gray-600 dark:text-gray-300 hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">Cookie Policy</a></li>
                        </ul>
                    </div>
                </div>

                <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
                    <p className="text-center text-gray-500 dark:text-gray-400">
                        &copy; {currentYear} PixelPulse Reactor. All rights reserved.
                    </p>
                </div>
            </div>
        </footer>
    );
}