const Footer = () => {
    // Safe access to Lucide icons
    const { Globe, MapPin, Phone, Mail, ArrowRight, Facebook, Twitter, Linkedin } = window.lucide || {};

    const handleNav = (e, page) => {
        e.preventDefault();
        window.dispatchEvent(new CustomEvent('navigate', { detail: page }));
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    const LinkItem = ({ page, label }) => (
        <li>
            <a
                href={`#${page}`}
                onClick={(e) => handleNav(e, page)}
                className="text-slate-400 hover:text-brand-primary hover:underline transition-all duration-200 block w-full text-left cursor-pointer"
            >
                {label}
            </a>
        </li>
    );

    if (!Globe) return null; // Prevent render if icons not ready

    return (
        <footer className="bg-slate-950 text-slate-400 font-sans border-t border-slate-800 relative z-50">
            {/* Top Banner */}
            <div className="border-b border-slate-900">
                <div className="max-w-7xl mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between gap-6">
                    <div>
                        <h3 className="text-white text-2xl font-bold mb-2 font-heading">Ready to start a project?</h3>
                        <p className="text-slate-500">空間情報の活用について、お気軽にご相談ください。</p>
                    </div>
                    <button
                        onClick={(e) => handleNav(e, 'contact')}
                        className="px-8 py-3 bg-brand-primary text-white rounded-full font-bold hover:bg-brand-primary/90 transition-all flex items-center gap-2 shadow-lg shadow-brand-primary/20 transform hover:-translate-y-1 cursor-pointer"
                    >
                        Contact Us <ArrowRight size={18} />
                    </button>
                </div>
            </div>

            {/* Main Footer Content */}
            <div className="max-w-7xl mx-auto px-6 py-20">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

                    {/* Brand Column */}
                    <div className="space-y-6">
                        <div className="flex items-center gap-3 text-white">
                            <div className="w-8 h-8 bg-brand-primary rounded-lg flex items-center justify-center">
                                <Globe size={18} />
                            </div>
                            <span className="text-xl font-bold tracking-tight font-heading">mirukuru</span>
                        </div>
                        <p className="text-sm leading-relaxed text-slate-500">
                            株式会社みるくるは、最先端の計測技術と解析ノウハウで、
                            「見えない価値」を可視化し、社会の課題解決に貢献する
                            ジオスペーシャル・ソリューションカンパニーです。
                        </p>
                    </div>

                    {/* Quick Link Column */}
                    <div>
                        <h4 className="text-white font-bold mb-6 font-heading">Company</h4>
                        <ul className="space-y-4 text-sm">
                            <LinkItem page="about" label="About Us" />
                            <LinkItem page="about" label="Access" />
                            <LinkItem page="contact" label="Contact" />
                        </ul>
                    </div>

                    {/* Solutions Column */}
                    <div>
                        <h4 className="text-white font-bold mb-6 font-heading">Services & Products</h4>
                        <ul className="space-y-4 text-sm">
                            <LinkItem page="services" label="Services Overview" />
                            <LinkItem page="products" label="Product Lineup" />
                        </ul>
                    </div>

                    {/* Contact Column */}
                    <div>
                        <h4 className="text-white font-bold mb-6 font-heading">Head Office</h4>
                        <ul className="space-y-4 text-sm">
                            <li className="flex items-start gap-3">
                                <MapPin size={18} className="text-brand-primary shrink-0 mt-0.5" />
                                <span>〒150-0031<br />東京都渋谷区桜丘町1-2<br />渋谷サクラステージ 9F</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <Phone size={18} className="text-brand-primary shrink-0" />
                                <span>03-5422-3207</span>
                            </li>
                            <li className="flex items-center gap-3">
                                <Mail size={18} className="text-brand-primary shrink-0" />
                                <span>contact@mirukuru.co.jp</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            {/* Bottom Bar */}
            <div className="border-t border-slate-900 bg-slate-950">
                <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
                    <p className="text-xs text-slate-600">
                        &copy; {new Date().getFullYear()} Mirukuru Co., Ltd. All Rights Reserved.
                    </p>
                    <div className="flex items-center gap-6 text-slate-600">
                        <a href="#" className="hover:text-white transition-colors"><Facebook size={18} /></a>
                        <a href="#" className="hover:text-white transition-colors"><Linkedin size={18} /></a>
                        <a href="#" className="hover:text-white transition-colors"><Twitter size={18} /></a>
                    </div>
                </div>
            </div>
        </footer>
    );
};

window.App.Components.Footer = Footer;