<!-- Footer -->
<footer class="mt-10 bg-black pt-10 text-sm text-white">
    <section
        class="container mx-auto grid grid-cols-12 gap-4 border-b border-neutral-600 px-2 py-4 md:px-[20px] lg:px-[100px] xl:px-[169px]">
        <!-- company info -->
        <div class="col-span-12 md:col-span-3">
            <img src="{{ asset('images/' . $general->image) }}" alt="logo" />
            <p class="line-clamp-3">
                {{ $general->description }}
            </p>
        </div>
        <!-- Links -->
        <ul class="col-span-12 space-y-3 text-xs text-neutral-500 sm:col-span-6 md:col-span-3">
            <h1
                class="relative text-sm font-semibold text-white before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:-translate-x-3 before:bg-[#F06728]">
                Links
            </h1>
            @foreach ($footerPages as $route)
                <li>
                    <a href="{{ url($route->page->permalink) }}"
                        class="transition-colors hover:text-neutral-200">{{ $route->page->name }}</a>
                </li>
            @endforeach

        </ul>
        <!-- Others -->
        <ul class="col-span-12 space-y-3 text-xs text-neutral-500 sm:col-span-6 md:col-span-3">
            <h1
                class="relative text-sm font-semibold text-white before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:-translate-x-3 before:bg-[#F06728]">
                Others
            </h1>

        </ul>
        <!-- Social -->
        <ul class="col-span-12 space-y-3 text-neutral-200 sm:col-span-6 md:col-span-3">
            <h1
                class="relative text-sm font-semibold text-white before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:-translate-x-3 before:bg-[#F06728]">
                Others
            </h1>
            <h2 class="text-xs">Follow us on Social Media</h2>
            <div class="flex flex-wrap items-center gap-3 text-lg">
                @php
                    $data = json_decode($general->social);
                @endphp
                @foreach ($data as $value)
                    <a href="{{ $value['1'] }}"
                        class="flex h-7 w-7 items-center justify-center rounded-sm ">{!! $value['0'] !!}</a>
                @endforeach


            </div>
        </ul>
    </section>
    <section class="p-4 text-center text-xs text-neutral-500">
        &copy; 2024 <span class="text-neutral-400">DATADSS</span>. All Rights
        Reserved
    </section>
</footer>
