<footer class="bg-primary mt-auto" data-test="main-footer">
    <div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            <!-- Logo & Description -->
            <div class="text-center sm:text-start">
                <x-logo size="lg" class="logo-badge" />
                <p class="mt-3 text-cta text-sm">
                    {{ __('footer.description') }}
                </p>
            </div>

            <!-- Contact Information -->
            <div class="text-center sm:text-start">
                <h3 class="text-off-white font-semibold mb-3">{{ __('footer.contact') }}</h3>
                <address class="text-cta text-sm not-italic space-y-2">
                    <p class="flex items-center justify-center sm:justify-start gap-2">
                        <flux:icon name="phone" class="w-4 h-4 text-cta flex-shrink-0" />
                        <a href="tel:+970599353502" class="hover:text-cta-light transition-colors ltr-inline" data-test="footer-phone">
                            +970 599 353 502
                        </a>
                    </p>
                    <p class="flex items-start justify-center sm:justify-start gap-2">
                        <flux:icon name="map-pin" class="w-4 h-4 text-cta flex-shrink-0 mt-0.5" />
                        <span data-test="footer-address">{{ __('footer.address') }}</span>
                    </p>
                    <p class="flex items-center justify-center sm:justify-start gap-2">
                        <flux:icon name="envelope" class="w-4 h-4 text-cta flex-shrink-0" />
                        <a href="mailto:{{ __('footer.email') }}" class="hover:text-cta-light transition-colors ltr-inline" data-test="footer-email">
                            {{ __('footer.email') }}
                        </a>
                    </p>
                </address>
            </div>

            <!-- Legal Links -->
            <div class="text-center sm:text-start sm:col-span-2 lg:col-span-1">
                <h3 class="text-off-white font-semibold mb-3">{{ __('footer.legal') }}</h3>
                <ul class="space-y-2 flex flex-row sm:flex-col gap-4 sm:gap-0 justify-center sm:justify-start">
                    <li>
                        <a
                            href="{{ route('terms') }}"
                            class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
                            data-test="footer-terms"
                        >
                            {{ __('footer.terms') }}
                        </a>
                    </li>
                    <li>
                        <a
                            href="{{ route('privacy') }}"
                            class="text-cta hover:text-cta-light transition-colors text-sm min-h-[44px] inline-flex items-center"
                            data-test="footer-privacy"
                        >
                            {{ __('footer.privacy') }}
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Copyright -->
        <div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-cta/20 text-center">
            <p class="text-cta text-xs sm:text-sm" data-test="footer-copyright">
                &copy; {{ date('Y') }} {{ __('footer.copyright') }}
            </p>
        </div>
    </div>
</footer>
