{{--
    Footer simple, moderne et optimisé.
    - Utilise une structure en grille flexible.
    - Icônes SVG inline pour la performance.
    - Design épuré avec une typographie claire et une hiérarchie visuelle forte.
--}}
<footer class="bg-slate-900 text-slate-400" aria-labelledby="footer-heading">
    <h2 id="footer-heading" class="sr-only">Pied de page</h2>
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        
        {{-- Grille principale du contenu --}}
        <div class="pt-20 pb-12 grid grid-cols-1 md:grid-cols-12 gap-x-8 gap-y-16">
            
            {{-- Colonne 1: Logo et Description --}}
            <div class="md:col-span-5 lg:col-span-4 space-y-6">
                <img class="h-10 w-auto" src="{{ asset('/logo-tawjihi.svg') }}" alt="Logo Tawjihi.tn en blanc">
                <p class="text-base leading-7">
                    منصة تعليمية شاملة تهدف إلى دعم الطلاب وأولياء الأمور في تونس من خلال توفير الموارد التعليمية، الأخبار، والنصائح اللازمة للنجاح الأكاديمي.
                </p>
            </div>

            {{-- Colonnes 2 & 3: Liens --}}
            <div class="md:col-span-7 lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 gap-8">
                <div class="space-y-4">
                    <h3 class="text-sm font-semibold uppercase tracking-wider text-white">روابط سريعة</h3>
                    <ul role="list" class="space-y-3">
                        <li><a href="{{ route('home') }}" class="footer-link">الرئيسية</a></li>
                        <li><a href="{{ route('articles') }}" class="footer-link">المدونة</a></li>
                        <li><a href="{{ route('actualite') }}" class="footer-link">اخبار</a></li>
                        <li><a href="{{ route('contact') }}" class="footer-link">كلمونا</a></li>
                    </ul>
                </div>
                <div class="space-y-4">
                    <h3 class="text-sm font-semibold uppercase tracking-wider text-white">موارد</h3>
                    <ul role="list" class="space-y-3">
                        <li><a href="{{ route('faq') }}" class="footer-link">سوال و جواب</a></li>
                        <li><a href="{{ route('testimonials') }}" class="footer-link">حكايات الطالب</a></li>
                        <li><a href="https://score.tawjihi.tn/" target="_blank" class="footer-link">احسب سكورك</a></li>
                     </ul>
                </div>
                <div class="space-y-4">
                  <div class="flex space-x-5">
                <a href="#" class="social-link">
                    <span class="sr-only">Facebook</span>
                    {{-- Icône SVG pour Facebook --}}
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="social-link">
                    <span class="sr-only">Instagram</span>
                    {{-- Icône SVG pour Instagram --}}
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.013-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.08 2.525c.636-.247 1.363-.416 2.427-.465C9.53 2.013 9.884 2 12.315 2zM12 7a5 5 0 100 10 5 5 0 000-10zm0-2a7 7 0 110 14 7 7 0 010-14zm4.5-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="social-link">
                    <span class="sr-only">YouTube</span>
                    {{-- Icône SVG pour YouTube --}}
                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.78 22 12 22 12s0 3.22-.42 4.814c-.23.861-.907 1.538-1.768 1.768C18.218 19 12 19 12 19s-6.218 0-7.812-.42c-.861-.23-1.538-.907-1.768-1.768C2.002 15.22 2 12 2 12s0-3.22.42-4.814c.23-.861.907-1.538 1.768-1.768C5.782 5 12 5 12 5s6.218 0 7.812.418zM9.57 15.57l4.86-3.57-4.86-3.57v7.14z" clip-rule="evenodd" /></svg>
                </a>
            </div>
                </div>
            </div>
        </div>

        {{-- Barre inférieure du footer --}}
        <div class="mt-8 border-t border-white/10 pt-8 pb-10 flex flex-col-reverse items-center gap-y-6 sm:flex-row sm:justify-between">
            <p class="text-sm leading-5">© {{ date('Y') }} Tawjihi.tn. جميع الحقوق محفوظة.</p>
           
        </div>
    </div>
</footer>

{{-- 
    Note pour le logo: 
    J'ai utilisé 'logo-tawjihi-white.svg'. Assurez-vous d'avoir une version blanche ou monochrome de votre logo
    pour qu'elle soit bien visible sur le fond sombre du footer.
--}}

{{-- Styles à ajouter à votre fichier CSS principal (e.g., app.css) --}}
<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* Styles des composants personnalisés du footer */
    @layer components {
        .footer-link {
            @apply text-base leading-6 transition-colors duration-200 hover:text-white hover:underline;
        }
        .social-link {
            @apply text-slate-500 transition-colors duration-200 hover:text-slate-300;
        }
    }
</style>