{{-- Homepage Footer --}}
<footer class="bg-white border-t border-gray-100 py-14">
    <div class="max-w-6xl mx-auto px-6">

        <div class="grid md:grid-cols-5 gap-10 mb-10">

            {{-- Brand --}}
            <div class="space-y-4">
                <div class="flex items-center gap-2.5">
                    <div class="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center shadow-sm shadow-indigo-200">
                        <x-heroicon-o-bolt class="w-4 h-4 text-white"/>
                    </div>
                    <span class="font-bold text-gray-900 text-lg tracking-tight">aziros</span>
                </div>
                <p class="text-sm text-gray-500 leading-relaxed">
                    Dein KI-gestützter Produktivitäts-Hub. Kalender, Aufgaben und Assistent — alles in einer Plattform.
                </p>
            </div>

            {{-- Produkt --}}
            <div>
                <h4 class="text-sm font-semibold text-gray-900 mb-4">Produkt</h4>
                <ul class="space-y-2.5 text-sm text-gray-500">
                    <li><a href="{{ route('homepage.index') }}#features" class="hover:text-indigo-600 transition-colors">Features</a></li>
                    <li><a href="{{ route('homepage.preise') }}" class="hover:text-indigo-600 transition-colors">Preise</a></li>
                    <li><a href="{{ route('homepage.index') }}#how-it-works" class="hover:text-indigo-600 transition-colors">So funktioniert's</a></li>
                    <li><a href="{{ route('register') }}" class="hover:text-indigo-600 transition-colors">Kostenlos starten</a></li>
                </ul>
            </div>

            {{-- Unternehmen --}}
            <div>
                <h4 class="text-sm font-semibold text-gray-900 mb-4">Unternehmen</h4>
                <ul class="space-y-2.5 text-sm text-gray-500">
                    <li><a href="{{ route('homepage.ueber-uns') }}" class="hover:text-indigo-600 transition-colors">Über uns</a></li>
                    <li><a href="{{ route('homepage.kontakt') }}" class="hover:text-indigo-600 transition-colors">Kontakt</a></li>
                </ul>
            </div>

            {{-- Rechtliches --}}
            <div>
                <h4 class="text-sm font-semibold text-gray-900 mb-4">Rechtliches</h4>
                <ul class="space-y-2.5 text-sm text-gray-500">
                    <li><a href="{{ route('homepage.datenschutz') }}" class="hover:text-indigo-600 transition-colors">Datenschutz</a></li>
                    <li><a href="{{ route('homepage.impressum') }}" class="hover:text-indigo-600 transition-colors">Impressum</a></li>
                    <li><a href="{{ route('homepage.agb') }}" class="hover:text-indigo-600 transition-colors">AGB</a></li>
                </ul>
            </div>

            {{-- App herunterladen --}}
            <div>
                <h4 class="text-sm font-semibold text-gray-900 mb-4">App herunterladen</h4>
                <ul class="space-y-3 text-sm text-gray-500">
                    <li>
                        <div class="relative inline-block">
                            <span class="flex items-center gap-1.5 opacity-50 cursor-not-allowed">
                                <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                                    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                                </svg>
                                App Store (iOS)
                            </span>
                            <span class="absolute -top-2 -right-2 text-[9px] bg-indigo-600 text-white px-1.5 py-0.5 rounded-full font-semibold leading-none">Bald</span>
                        </div>
                    </li>
                    <li>
                        <div class="relative inline-block">
                            <span class="flex items-center gap-1.5 opacity-50 cursor-not-allowed">
                                <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24">
                                    <path fill="#4CAF50" d="M1.22 0c-.23.27-.22.7-.22 1.06V22.94c0 .36-.01.8.22 1.06l.09.08 12.32-12.32v-.52L1.31-.08z"/>
                                    <path fill="#FFC107" d="M17.7 16.57l-4.1-4.1v-.52l4.1-4.1.1.05 4.9 2.78c1.4.8 1.4 2.1 0 2.9l-4.9 2.78z"/>
                                    <path fill="#FF3D00" d="M17.8 16.52L13.63 12.37 1.22 24.78c.46.49 1.22.55 2.08.06l14.5-8.32"/>
                                    <path fill="#388E3C" d="M17.8 7.48L3.3.16C2.44-.33 1.68-.27 1.22.22l12.41 12.15z"/>
                                </svg>
                                Google Play
                            </span>
                            <span class="absolute -top-2 -right-2 text-[9px] bg-indigo-600 text-white px-1.5 py-0.5 rounded-full font-semibold leading-none">Bald</span>
                        </div>
                    </li>
                </ul>
            </div>

        </div>

        {{-- Bottom bar --}}
        <div class="border-t border-gray-100 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
            <span class="text-sm text-gray-400">&copy; {{ date('Y') }} aziros GmbH. Alle Rechte vorbehalten.</span>
            <div class="flex items-center gap-3">
                <a href="{{ route('login') }}" class="text-sm text-gray-500 hover:text-indigo-600 font-medium transition-colors">Anmelden</a>
                <span class="text-gray-300">&middot;</span>
                <a href="{{ route('register') }}" class="text-sm text-indigo-600 hover:text-indigo-700 font-semibold transition-colors">Kostenlos starten</a>
            </div>
        </div>

    </div>
</footer>
