const FOOTER_LINKS = {
    Platform: ['Git Repositories', 'Issues & PRs', 'Collaborative Rooms', 'AI Agents'],
    Skills: ['Skill Registry', 'Publish a Skill', 'Skill Documentation', 'Community'],
    Developers: ['Documentation', 'CLI Reference', 'API Reference', 'Status'],
    Company: ['About', 'Careers', 'Contact', 'Privacy'],
};

const FOOTER_HREFS: Record<string, string[]> = {
    Platform: ['/solutions', '/solutions', '/solutions/rooms', '/solutions'],
    Skills: ['/skills', '/skills/publish', '/skills/docs', '/network'],
    Developers: ['/docs', '/docs', '/network/api', '/status'],
    Company: ['/about', '/careers', '/contact', '/privacy'],
};

interface LandingFooterProps {
    onRegister: () => void;
}

export function LandingFooter({onRegister}: LandingFooterProps) {
    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">
                    <button onClick={onRegister}
                            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
                    </button>
                    <button
                        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
                    </button>
                </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">
                            The unified platform for code collaboration and AI-powered development.
                            Built for teams that ship.
                        </p>
                    </div>

                    {/* Link columns */}
                    {Object.entries(FOOTER_LINKS).map(([cat, links]) => {
                        const hrefs = FOOTER_HREFS[cat];
                        return (
                            <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, i) => (
                                        <li key={link}>
                                            <a href={hrefs[i]} className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
                                                {link}
                                            </a>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        );
                    })}
                </div>
            </div>
        </footer>
    );
}