import { Link } from 'react-router-dom';

function Footer() {
    return (
        <footer className="mt-32 bg-white/80 backdrop-blur-sm relative">
            {/* Gradient border top */}
            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
            
            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
                    {/* Company Info */}
                    <div>
                        <h4 className="font-light text-2xl tracking-tight relative group mb-4">
                            byom
                            <div className="absolute -right-2 -top-2 w-1.5 h-1.5 bg-brand-purple rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300"></div>
                        </h4>
                        <p className="text-sm text-gray-500">
                            AI-powered platform helping influencers grow their brand through advanced analytics and creative tools.
                        </p>
                    </div>

                    {/* Legal Links */}
                    <div>
                        <h4 className="text-sm font-medium text-gray-900 mb-4">Legal</h4>
                        <ul className="space-y-3">
                            <li>
                                <Link to="/terms" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                    Terms of Service
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/privacy" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                    Privacy Policy
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </Link>
                            </li>
                        </ul>
                    </div>

                    {/* Company Links */}
                    <div>
                        <h4 className="text-sm font-medium text-gray-900 mb-4">Company</h4>
                        <ul className="space-y-3">
                            <li>
                                <Link to="/about" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                    About Us
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/careers" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                    Careers
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </Link>
                            </li>
                            <li>
                                <Link to="/contact" className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group">
                                    Contact
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </Link>
                            </li>
                        </ul>
                    </div>

                    {/* Social Links */}
                    <div>
                        <h4 className="text-sm font-medium text-gray-900 mb-4">Follow Us</h4>
                        <ul className="space-y-3">
                            <li>
                                <a href="https://twitter.com/byom" target="_blank" rel="noopener noreferrer" 
                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                    Twitter
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/company/byom" target="_blank" rel="noopener noreferrer"
                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                    LinkedIn
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </a>
                            </li>
                            <li>
                                <a href="https://instagram.com/byom" target="_blank" rel="noopener noreferrer"
                                   className="text-sm text-gray-500 hover:text-brand-purple transition-colors relative group flex items-center gap-2">
                                    <div className="w-1 h-1 bg-brand-purple rounded-full"></div>
                                    Instagram
                                    <div className="absolute -bottom-1 left-0 w-0 h-px bg-brand-purple group-hover:w-full transition-all duration-300"></div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                {/* Bottom Bar */}
                <div className="mt-16 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 relative">
                    {/* Gradient border top */}
                    <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-brand-purple/20 via-brand-pink/20 to-brand-blue/20"></div>
                    
                    <p className="text-sm text-gray-500">
                        © {new Date().getFullYear()} BYOM. All rights reserved.
                    </p>
                    <div className="flex items-center gap-2">
                        <span className="text-sm text-gray-500">Made with</span>
                        <span className="text-brand-pink animate-pulse">♥</span>
                        <span className="text-sm text-gray-500">in Paris</span>
                    </div>
                </div>
            </div>
        </footer>
    );
}

export default Footer;
