import Link from "next/link"

export function Footer() {
    return (
        <footer className="border-t mt-12">
            {/* Sub-footer: Band & Community Links */}
            <div className="bg-muted/30 py-8">
                <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {/* Listen */}
                        <div className="text-center md:text-left">
                            <h4 className="font-semibold text-sm mb-3">Listen</h4>
                            <ul className="space-y-2 text-sm text-muted-foreground">
                                <li><a href="https://www.nugs.net/goose-concerts-live-downloads-in-mp3-flac-or-online-music-streaming/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Nugs.net</a></li>
                                <li><a href="https://goosetheband.bandcamp.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Bandcamp</a></li>
                                <li><a href="https://open.spotify.com/artist/6qqNVTkY8uBg9cP3Jd7DAH" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Spotify</a></li>
                                <li><a href="https://relisten.net/goose" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Relisten</a></li>
                            </ul>
                        </div>

                        {/* Community */}
                        <div className="text-center md:text-left">
                            <h4 className="font-semibold text-sm mb-3">Community</h4>
                            <ul className="space-y-2 text-sm text-muted-foreground">
                                <li><a href="https://elgoose.net" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">ElGoose.net</a></li>
                                <li><a href="https://www.reddit.com/r/GooseTheBand" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Reddit</a></li>
                                <li><a href="https://wysterialane.org" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">Wysteria Lane</a></li>
                                <li><a href="https://wtedradio.com" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-foreground">WTED Radio</a></li>
                            </ul>
                        </div>

                        {/* Explore */}
                        <div className="text-center md:text-left">
                            <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="/songs" className="hover:underline hover:text-foreground">Songs</Link></li>
                                <li><Link href="/venues" className="hover:underline hover:text-foreground">Venues</Link></li>
                                <li><Link href="/performances" className="hover:underline hover:text-foreground">Top Performances</Link></li>
                                <li><Link href="/videos" className="hover:underline hover:text-foreground">Videos</Link></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {/* Main footer: System Links */}
            <div className="py-6 bg-background">
                <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                        {/* Brand & Copyright */}
                        <div className="flex items-center gap-4">
                            <span className="text-lg font-bold">Elmeg</span>
                            <span className="text-xs text-muted-foreground">
                                © {new Date().getFullYear()} All rights reserved
                            </span>
                        </div>

                        {/* System Links */}
                        <nav className="flex flex-wrap items-center justify-center gap-1 md:gap-4 text-sm text-muted-foreground">
                            <Link href="/about" className="hover:underline hover:text-foreground px-3 py-2">About</Link>
                            <Link href="/terms" className="hover:underline hover:text-foreground px-3 py-2">Terms</Link>
                            <Link href="/privacy" className="hover:underline hover:text-foreground px-3 py-2">Privacy</Link>
                            <Link href="/bugs" className="hover:underline hover:text-foreground px-3 py-2">Report Bug</Link>
                        </nav>
                    </div>
                </div>
            </div>
        </footer>
    )
}
