import { Link } from '@inertiajs/react';

export default function Footer() {
    return (
        <footer className="border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
            <div className="mx-auto max-w-7xl px-3 pt-12 pb-8 sm:px-4 sm:pt-16 sm:pb-10 md:px-6 md:pt-20 md:pb-12 lg:px-8 lg:pt-24 lg:pb-16">
                <div className="grid grid-cols-1 gap-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <Link href="/" className="flex items-center gap-2 sm:gap-3">
                            <div className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg bg-[#d4af37] dark:bg-[#b8941f]">
                                <span className="text-base sm:text-xl font-bold text-white">N</span>
                            </div>
                            <span className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">Ngidolihub</span>
                        </Link>
                        <p className="mt-3 sm:mt-4 text-xs sm:text-sm text-gray-600 dark:text-gray-300">
                            Platform streaming unofficial untuk theater show dan event JKT48.
                        </p>
                    </div>
                    <div>
                        <h3 className="text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">Platform</h3>
                        <ul className="mt-3 sm:mt-4 space-y-2">
                            <li>
                                <Link
                                    href="/jadwal"
                                    className="text-xs sm:text-sm text-gray-600 transition-colors hover:text-[#d4af37] dark:text-gray-300 dark:hover:text-[#b8941f]"
                                >
                                    Jadwal Show
                                </Link>
                            </li>
                            <li>
                                <Link
                                    href="/login"
                                    className="text-xs sm:text-sm text-gray-600 transition-colors hover:text-[#d4af37] dark:text-gray-300 dark:hover:text-[#b8941f]"
                                >
                                    Masuk
                                </Link>
                            </li>
                            <li>
                                <Link
                                    href="/login"
                                    className="text-xs sm:text-sm text-gray-600 transition-colors hover:text-[#d4af37] dark:text-gray-300 dark:hover:text-[#b8941f]"
                                >
                                    Daftar
                                </Link>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 className="text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">Informasi</h3>
                        <ul className="mt-3 sm:mt-4 space-y-2">
                            <li>
                                <a
                                    href="#tentang"
                                    className="text-xs sm:text-sm text-gray-600 transition-colors hover:text-[#d4af37] dark:text-gray-300 dark:hover:text-[#b8941f]"
                                >
                                    Tentang Kami
                                </a>
                            </li>
                            <li>
                                <span className="text-xs sm:text-sm text-gray-600 dark:text-gray-300">Kebijakan Privasi</span>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h3 className="text-xs sm:text-sm font-semibold text-gray-900 dark:text-white">Penting</h3>
                        <p className="mt-3 sm:mt-4 text-xs sm:text-sm text-gray-600 dark:text-gray-300">
                            Platform ini adalah unofficial dan tidak memiliki kaitan dengan pihak JKT48 resmi.
                        </p>
                    </div>
                </div>
                <div className="mt-8 sm:mt-10 md:mt-12 border-t border-gray-200 pt-6 pb-0 sm:pt-8 dark:border-gray-800">
                    <p className="text-center text-xs sm:text-sm text-gray-600 dark:text-gray-300">
                        © {new Date().getFullYear()} Ngidolihub. Platform Unofficial - Tidak Terafiliasi dengan JKT48.
                    </p>
                </div>
            </div>
        </footer>
    );
}

