import { Link } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';

function Footer() {
    const { t } = useLanguage();

    return (
        <footer className="border-t-2 border-black mt-32">
            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 py-16">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
                    {/* Company Info */}
                    <div>
                        <h4 className="text-xl font-black uppercase mb-6">BYOM</h4>
                        <p className="monospace text-sm">
                            AI-powered platform helping influencers grow their brand through advanced analytics and creative tools.
                        </p>
                    </div>

                    {/* Legal Links */}
                    <div>
                        <h4 className="text-lg font-black uppercase mb-6">Legal</h4>
                        <ul className="space-y-3">
                            <li>
                                <Link to="/terms" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    Terms of Service
                                </Link>
                            </li>
                            <li>
                                <Link to="/privacy" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    Privacy Policy
                                </Link>
                            </li>
                        </ul>
                    </div>

                    {/* Company Links */}
                    <div>
                        <h4 className="text-lg font-black uppercase mb-6">Company</h4>
                        <ul className="space-y-3">
                            <li>
                                <Link to="/about" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    About Us
                                </Link>
                            </li>
                            <li>
                                <Link to="/careers" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    Careers
                                </Link>
                            </li>
                            <li>
                                <Link to="/contact" className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    Contact
                                </Link>
                            </li>
                        </ul>
                    </div>

                    {/* Social Links */}
                    <div>
                        <h4 className="text-lg font-black uppercase mb-6">Follow Us</h4>
                        <ul className="space-y-3">
                            <li>
                                <a href="https://twitter.com/byom" target="_blank" rel="noopener noreferrer" 
                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    Twitter
                                </a>
                            </li>
                            <li>
                                <a href="https://linkedin.com/company/byom" target="_blank" rel="noopener noreferrer"
                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    LinkedIn
                                </a>
                            </li>
                            <li>
                                <a href="https://instagram.com/byom" target="_blank" rel="noopener noreferrer"
                                   className="monospace text-sm hover:translate-x-2 transition-transform inline-block">
                                    Instagram
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                {/* Bottom Bar */}
                <div className="border-t-2 border-black mt-12 pt-8 flex justify-between items-center">
                    <p className="monospace text-sm">
                        © {new Date().getFullYear()} BYOM. All rights reserved.
                    </p>
                    <div className="flex items-center gap-4">
                        <span className="monospace text-sm">Made with ♥ in Paris</span>
                    </div>
                </div>
            </div>
        </footer>
    );
}

export default Footer; 