<div class="w-full flex-col items-start">
    <div class="self-stretch py-16 bg-white border-t border-border lg:justify-center items-center flex">
        <div class="container mx-auto px-4 items-center flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-0">

            <div class="flex-col gap-8 flex lg:grow lg:max-w-96">
                <div class="self-stretch flex-col justify-start items-start gap-6 flex">
                    <div>
                        <x-public.rann-logo height="4rem" role="image"/>
                    </div>
                    <div class="self-stretch flex-col justify-start items-start gap-2 flex">
                        <div class="self-stretch text-2xl font-bold">{{ __('footer.contact.title') }}</div>
                        <div class="self-stretch text-muted">
                            {{ __('footer.contact.desc') }}
                        </div>
                    </div>
                    <x-public.button size="medium" tag="a" href="#">
                        <div class="text-xl font-bold">{{ __('navbar.contact_me') }}</div>
                    </x-public.button>
                </div>
            </div>

            <div class="w-full lg:w-auto items-start flex flex-col lg:flex-row gap-8 lg:gap-24">
                <div class="w-full lg:w-56 flex-col gap-8 flex">
                    <div class="self-stretch text-2xl font-bold">{{ __('footer.links.title') }}</div>
                    <ul class="flex flex-col gap-2">
                        @foreach(\App\Models\SocialMediaLink::all() as $socialMediaLink)
                            <li>
                                <a href="{{ $socialMediaLink['url'] }}" class="text-muted hover:text-primary">
                                    {{ \Illuminate\Support\Str::ucfirst($socialMediaLink['name']) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="w-full lg:w-56 flex-col gap-8 flex">
                    <div class="self-stretch text-2xl font-bold">{{ __('footer.legals-infos.title') }}</div>
                    <ul class="flex flex-col gap-2">
                        <li>
                            <a href="{{ route('legal-mentions') }}"
                               class="text-muted hover:text-primary">{{ __('generic.legal_mentions') }}</a>
                        </li>
                        <li>
                            <a href="{{ route('terms') }}"
                               class="text-muted hover:text-primary">{{ __('generic.terms') }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="self-stretch py-3 bg-black justify-center items-center gap-2.5 flex">
        <div class="h-5 items-center flex container mx-auto px-4">
            <div class="text-white">© Copyright 2024 - Roxanna Valtre. Tout droits réservés.</div>
        </div>
    </div>
</div>