const SimpleTwitterIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg>
);

const SimpleDiscordIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="9" cy="12" r="1" /><circle cx="15" cy="12" r="1" /><path d="M7.5 7.5c3.5-1 7-1 10.5 0 2.5 3 2.5 7.5 0 10.5-3.5 1-7 1-10.5 0-2.5-3-2.5-7.5 0-10.5z" /></svg>
);

const SimpleGithubIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg>
);

const Footer = () => {
    return (
        <footer className="border-t border-white/10 pt-16 pb-8 mt-32 relative overflow-hidden fade-in-up">
            {/* Decorative background glow */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-2xl h-px bg-gradient-to-r from-transparent via-[#7C3AED] to-transparent opacity-50"></div>

            <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
                <div className="md:col-span-2">
                    <div className="flex items-center gap-3 mb-6">
                        <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-[#7C3AED] to-[#38BDF8] flex items-center justify-center">
                            <span className="font-bold text-white text-sm">D</span>
                        </div>
                        <span className="font-bold text-xl">DoxaMarket</span>
                    </div>
                    <p className="text-gray-400 max-w-sm mb-6">
                        The next generation of prediction markets. Trade on real-world events seamlessly with the power of DoxaWallet.
                    </p>
                    <div className="flex items-center gap-4">
                        <a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors text-gray-400 hover:text-white">
                            <SimpleTwitterIcon size={18} />
                        </a>
                        <a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors text-gray-400 hover:text-white">
                            <SimpleDiscordIcon size={18} />
                        </a>
                        <a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 transition-colors text-gray-400 hover:text-white">
                            <SimpleGithubIcon size={18} />
                        </a>
                    </div>
                </div>

                <div>
                    <h4 className="font-bold mb-4 text-white">Ecosystem</h4>
                    <ul className="flex flex-col gap-3 text-gray-400 text-sm">
                        <li><a href="#" className="hover:text-white transition-colors">DoxaWallet</a></li>
                        <li><a href="#" className="hover:text-white transition-colors">Prediction Markets</a></li>
                        <li><a href="#" className="hover:text-white transition-colors">Liquid Staking</a></li>
                        <li><a href="#" className="hover:text-white transition-colors">Developers</a></li>
                    </ul>
                </div>

                <div>
                    <h4 className="font-bold mb-4 text-white">Resources</h4>
                    <ul className="flex flex-col gap-3 text-gray-400 text-sm">
                        <li><a href="#" className="hover:text-white transition-colors">Documentation</a></li>
                        <li><a href="#" className="hover:text-white transition-colors">Help Center</a></li>
                        <li><a href="#" className="hover:text-white transition-colors">Blog</a></li>
                        <li><a href="#" className="hover:text-white transition-colors">Audits</a></li>
                    </ul>
                </div>
            </div>

            <div className="max-w-7xl mx-auto px-6 border-t border-white/5 pt-8 flex flex-col md:flex-row items-center justify-between text-xs text-gray-500">
                <p>&copy; {new Date().getFullYear()} Doxa Ecosystem. All rights reserved.</p>
                <div className="flex items-center gap-6 mt-4 md:mt-0">
                    <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
                    <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
                </div>
            </div>
        </footer>
    );
};


window.Footer = Footer;

window.Footer = Footer;