import Link from "next/link"

export function Footer() {
    return (
        <footer className="border-t py-8 md:py-10 mt-12 bg-muted/30">
            <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
                    {/* Brand */}
                    <div className="col-span-2 md:col-span-1">
                        <span className="text-xl font-bold">Elmeg</span>
                        <p className="text-sm text-muted-foreground mt-2">
                            A place to talk Goose
                        </p>
                    </div>

                    {/* Explore */}
                    <div>
                        <h4 className="font-semibold text-sm mb-3">Explore</h4>
                        <ul className="space-y-2 text-sm text-muted-foreground">
                            <li><Link href="/shows" className="hover:underline hover:text-foreground">Shows</Link></li>
                            <li><Link href="/venues" className="hover:underline hover:text-foreground">Venues</Link></li>
                            <li><Link href="/songs" className="hover:underline hover:text-foreground">Songs</Link></li>
                            <li><Link href="/performances" className="hover:underline hover:text-foreground">Top Performances</Link></li>
                            <li><Link href="/tours" className="hover:underline hover:text-foreground">Tours</Link></li>
                            <li><Link href="/videos" className="hover:underline hover:text-foreground">Videos</Link></li>
                            <li><Link href="/leaderboards" className="hover:underline hover:text-foreground">Leaderboards</Link></li>
                        </ul>
                    </div>

                    {/* Community */}
                    <div>
                        <h4 className="font-semibold text-sm mb-3">Community</h4>
                        <ul className="space-y-2 text-sm text-muted-foreground">
                            <li><Link href="/leaderboards" className="hover:underline hover:text-foreground">Leaderboards</Link></li>
                            <li><Link href="/groups" className="hover:underline hover:text-foreground">Groups</Link></li>
                            <li><Link href="/bugs" className="hover:underline hover:text-foreground">Report a Bug</Link></li>
                        </ul>
                    </div>

                    {/* Legal */}
                    <div>
                        <h4 className="font-semibold text-sm mb-3">Legal</h4>
                        <ul className="space-y-2 text-sm text-muted-foreground">
                            <li><Link href="/about" className="hover:underline hover:text-foreground">About</Link></li>
                            <li><Link href="/terms" className="hover:underline hover:text-foreground">Terms of Service</Link></li>
                            <li><Link href="/privacy" className="hover:underline hover:text-foreground">Privacy Policy</Link></li>
                        </ul>
                    </div>
                </div>

                {/* Bottom bar */}
                <div className="border-t pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
                    <p className="text-xs text-muted-foreground">
                        © {new Date().getFullYear()} Elmeg. All rights reserved.
                    </p>
                    <p className="text-xs text-muted-foreground">
                        Made with care for the community
                    </p>
                </div>
            </div>
        </footer>
    )
}
