import { Link } from "@inertiajs/react";
import { MapPin, Mail, Phone } from "lucide-react";

export function Footer() {
    return (
        <footer className="border-t border-white/5 bg-black py-16 relative z-10 w-full">
            <div className="container mx-auto px-6">
                <div className="grid md:grid-cols-4 gap-12 mb-16">
                    <div className="col-span-1 md:col-span-2">
                        <Link href="/" className="mb-6 block">
                            <img 
                                src="/brand/Nihonbuzz-Academy-Dark-LS-Regular.png" 
                                alt="NihonBuzz" 
                                className="h-8 w-auto transition-transform hover:scale-105 duration-300"
                            />
                        </Link>
                        <p className="text-muted-foreground mb-8 max-w-sm leading-relaxed">
                            Ekosistem belajar Bahasa Jepang modern untuk penguasaan JLPT, Karir, dan Budaya. Platform LMS terintegrasi untuk siswa Indonesia.
                        </p>
                            <div className="flex gap-6">
                                {['Instagram', 'Youtube', 'TikTok'].map((social) => (
                                    <Link key={social} href="#" className="text-muted-foreground hover:text-primary transition-colors text-sm font-bold">
                                        {social}
                                    </Link>
                                ))}
                            </div>
                    </div>
                    
                    <div>
                        <h5 className="font-bold text-white mb-6 text-sm">Program & Kursus</h5>
                        <ul className="space-y-4 text-sm text-muted-foreground font-medium">
                            <li><Link href="#" className="hover:text-primary transition-colors">Persiapan JLPT N5 - N2</Link></li>
                            <li><Link href="#" className="hover:text-primary transition-colors">Mastery Kanji & Vocab</Link></li>
                            <li><Link href="#" className="hover:text-primary transition-colors">Kaiwa Professional</Link></li>
                            <li><Link href="#" className="hover:text-primary transition-colors">Dashboard Siswa</Link></li>
                        </ul>
                    </div>

                    <div>
                        <h5 className="font-bold text-white mb-6 text-sm">Hubungi Kami</h5>
                        <ul className="space-y-4 text-sm text-muted-foreground font-medium">
                            <li className="flex items-start gap-3">
                                <MapPin className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                                <span className="leading-relaxed text-xs">Jl. Palapa VII No.1, Kedoya Sel., Kec. Kb. Jeruk, Jakarta Barat 11520</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <Mail className="w-4 h-4 text-primary shrink-0" />
                                <a href="mailto:hello@nihonbuzz.org" className="hover:text-primary transition-colors">hello@nihonbuzz.org</a>
                            </li>
                            <li className="flex items-center gap-3">
                                <Phone className="w-4 h-4 text-primary shrink-0" />
                                <span>+62 851-2988-0919</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div className="border-t border-white/5 pt-8 text-center">
                    <p className="text-muted-foreground text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">
                        &copy; {new Date().getFullYear()} NihonBuzz Academy. All rights reserved.
                    </p>
                </div>
            </div>
        </footer>
    );
}