<footer class="bg-charcoal 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="small" />
                <p class="mt-3 text-warm-gray 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-warm-gray text-sm not-italic space-y-1">
                    <p>{{ __('footer.address') }}</p>
                    <p class="ltr-content">{{ __('footer.phone') }}</p>
                    <p class="ltr-content">{{ __('footer.email') }}</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-warm-gray hover:text-off-white 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-warm-gray hover:text-off-white 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-warm-gray/20 text-center">
            <p class="text-warm-gray text-xs sm:text-sm" data-test="footer-copyright">
                &copy; {{ date('Y') }} {{ __('footer.copyright') }}
            </p>
        </div>
    </div>
</footer>
