@php
    $services = config('constants.services');
@endphp

<footer class="bg-imperial-blue-900 px-4 py-10 lg:px-[120px] lg:py-20" id="footer">
    <div class="flex items-start flex-col gap-4 mb-10 lg:mb-[120px] lg:flex-row lg:justify-between lg:items-center">
        <p class="text-white md:text-xl lg:text-3xl lg:leading-9 lg:max-w-[520px]">
            Delivering top services to help your company achieve its goals.
        </p>

        <a href="https://api.whatsapp.com/send/?phone=628111996693" target="_blank" class="flex items-center gap-2 rounded-full bg-white hover:opacity-80 px-3 py-2 lg:px-6 lg:py-4">
            <img src="{{ asset('icons/whatsapp-blue.svg') }}" alt="whatsapp" class="size-4 lg:size-8">
            <span class="text-sm md:text-xl text-imperial-blue-900">Talk with us</span>
        </a>
    </div>

    <div class="flex flex-col gap-8 lg:flex-row">
        <div class="flex flex-col gap-2 max-w-[50%] text-xs md:text-sm lg:text-base lg:gap-8 lg:max-w-[450px] lg:mr-10">
            <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-[136px] mb-4">

            <a href="tel:021-29368919" class="flex items-center gap-2 text-white font-normal hover:text-primary-hover">
                <img src="{{ asset('icons/phone-white.svg') }}" alt="phone" class="size-3">
                <p>021 - 29368919</p>
            </a>

            <p class="text-white font-normal">
                Gedung Graha MIR Lt.6 Zona A1, Jl. Pemuda No. 09 RT 01 RW 03, Kelurahan Rawamangun, Kecamatan Pulo Gadung, Jakarta Timur 13220
            </p>

            <p class="text-white text-sm font-normal hidden lg:block">
                © {{ date('Y') }} Potensial Cipta Daya. All rights reserved.
            </p>
        </div>

        <div class="flex flex-col gap-2 lg:gap-4 flex-2 text-xs md:text-sm lg:text-base">
            <p class="text-white font-medium">
                Service
            </p>

            <ul class="space-y-2">
                @foreach($services as $service)
                <li>
                    <a href="{{ url('service/' . $service['slug']) }}" class="text-white font-normal hover:text-primary-hover">
                        {{ $service['title'] }}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>

        <div class="flex flex-col gap-2 lg:gap-4 flex-1 text-xs md:text-sm lg:text-base">
            <p class="text-white font-medium">
                Company
            </p>

            <ul class="space-y-2">
                <li>
                    <a href="/about-us" class="text-white font-normal hover:text-primary-hover">
                        About Us
                    </a>
                </li>
            </ul>
        </div>

        <div class="flex flex-col gap-2 lg:gap-4 flex-1 text-xs md:text-sm lg:text-base">
            <p class="text-white font-medium">
                Follow Us
            </p>

            <ul class="space-y-2">
                <li>
                    <a href="https://instagram.com/potensialcipta" class="flex items-center gap-2 text-white font-normal hover:text-primary-hover" target="_blank" rel="noreferrer">
                        <img src="{{ asset('icons/instagram-white.svg') }}" alt="phone" class="size-4">
                        <p>Instagram</p>
                    </a>
                </li>
                <li>
                    <a href="https://tiktok.com/@potensialcipta" class="flex items-center gap-2 text-white font-normal hover:text-primary-hover" target="_blank" rel="noreferrer">
                        <img src="{{ asset('icons/tiktok-white.svg') }}" alt="phone" class="size-4">
                        <p>Tiktok</p>
                    </a>
                </li>
                <li>
                    <a href="http://linkedin.com/in/pt-potensial-cipta-daya-90a3b8345" class="flex items-center gap-2 text-white font-normal hover:text-primary-hover" target="_blank" rel="noreferrer">
                        <img src="{{ asset('icons/linkedin-white.svg') }}" alt="phone" class="size-4">
                        <p>LinkedIn</p>
                    </a>
                </li>
            </ul>
        </div>

        <p class="text-white text-xs md:text-sm font-normal block lg:hidden">
            © {{ date('Y') }} Potensial Cipta Daya. All rights reserved.
        </p>
    </div>

</footer>