const FOOTER_LINKS = {
    Product: [
        {label: 'Features', href: '#'},
        {label: 'Pricing', href: '#'},
        {label: 'Changelog', href: '#'},
        {label: 'Roadmap', href: '#'},
    ],
    Developers: [
        {label: 'Documentation', href: '#'},
        {label: 'API Reference', href: '#'},
        {label: 'GitHub', href: '#'},
        {label: 'Status', href: '#'},
    ],
    Resources: [
        {label: 'Blog', href: '#'},
        {label: 'Guides', href: '#'},
        {label: 'Community', href: '#'},
        {label: 'Support', href: '#'},
    ],
    Company: [
        {label: 'About', href: '#'},
        {label: 'Careers', href: '#'},
        {label: 'Contact', href: '#'},
        {label: 'Privacy', href: '#'},
    ],
};

interface SiteFooterProps {
    variant?: 'landing' | 'minimal';
}

export function SiteFooter({variant = 'minimal'}: SiteFooterProps) {
    const isMinimal = variant === 'minimal';

    if (isMinimal) {
        return (
            <footer className="border-t border-zinc-100 dark:border-zinc-900/50 py-6 bg-white dark:bg-zinc-950">
                <div className="mx-auto max-w-5xl px-6">
                    <div className="flex flex-col md:flex-row items-center justify-between gap-4">
                        {/* Logo + Copyright */}
                        <div className="flex items-center gap-4">
                            <div className="flex items-center gap-2">
                                <img src="/logo.png" alt="GitDataAI" className="h-4 w-4 object-contain"/>
                                <span className="font-semibold text-xs text-zinc-900 dark:text-zinc-100">GitDataAI</span>
                            </div>
                            <span className="text-xs text-zinc-400">
                                © {new Date().getFullYear()} · All rights reserved.
                            </span>
                        </div>

                        {/* Links */}
                        <div className="flex items-center gap-5 text-xs text-zinc-400">
                            <a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Privacy</a>
                            <a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Terms</a>
                            <a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Security</a>
                        </div>
                    </div>
                </div>
            </footer>
        );
    }

    // Landing variant - full footer
    return (
        <footer className="border-t border-zinc-100 dark:border-zinc-900/50 py-20 bg-zinc-50/50 dark:bg-zinc-950/50">
            <div className="mx-auto max-w-5xl px-6 text-center">
                {/* CTA */}
                <h3 className="text-2xl md:text-3xl font-semibold tracking-tight mb-6">
                    Ready for the Agentic Era?
                </h3>
                <div className="flex justify-center gap-3 mb-16">
                    <a href="/auth/register"
                       className="h-10 px-6 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
                        Get Started Free
                    </a>
                    <a href="#"
                       className="h-10 px-6 rounded-full border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-100 dark:hover:bg-zinc-900/50 text-sm font-medium transition-colors">
                        Contact Sales
                    </a>
                </div>

                {/* Links grid */}
                <div
                    className="grid grid-cols-2 md:grid-cols-5 gap-8 text-left pt-12 border-t border-zinc-100 dark:border-zinc-900/50">
                    {/* Brand */}
                    <div className="col-span-2 md:col-span-1">
                        <div className="flex items-center gap-2 mb-4">
                            <img src="/logo.png" alt="GitDataAI" className="h-5 w-5 object-contain"/>
                            <span className="font-semibold text-sm text-zinc-900 dark:text-zinc-100">GitDataAI</span>
                        </div>
                        <p className="text-xs text-zinc-500 leading-relaxed">
                            Infrastructure for the next billion AI Agents.
                            Built for reliability, transparency, and collaboration.
                        </p>
                    </div>

                    {/* Link columns */}
                    {Object.entries(FOOTER_LINKS).map(([cat, links]) => (
                        <div key={cat}>
                            <h4 className="text-xs font-semibold mb-4 uppercase tracking-widest text-zinc-900 dark:text-zinc-100">
                                {cat}
                            </h4>
                            <ul className="space-y-3 text-xs text-zinc-500">
                                {links.map(link => (
                                    <li key={link.label}>
                                        <a href={link.href}
                                           className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
                                            {link.label}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                {/* Bottom */}
                <div
                    className="mt-12 pt-8 border-t border-zinc-100 dark:border-zinc-900/50 flex flex-col md:flex-row items-center justify-between gap-4">
                    <p className="text-xs text-zinc-400">
                        © {new Date().getFullYear()} GitDataAI. Built with Rust + React.
                    </p>
                    <div className="flex items-center gap-5 text-xs text-zinc-400">
                        <a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Privacy Policy</a>
                        <a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Terms of Service</a>
                        <a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Security</a>
                    </div>
                </div>
            </div>
        </footer>
    );
}