@php
    $whoWeServe = [
        [
            'title' => 'Financial Services and Insurance',
            'description' => 'Governance enhancement and strategic oversight'
        ],
        [
            'title' => 'Mining and Energy',
            'description' => 'ESG integration and sustainable governance practices'
        ],
        [
            'title' => 'Infrastructure and Logistics',
            'description' => 'Strategic risk management in complex operational environments'
        ],
        [
            'title' => 'Public Sector and Government Institutions',
            'description' => 'Responsible leadership and regulatory compliance'
        ],
    ];
@endphp

<x-atoms.container as="section" class="flex flex-col md:flex-row gap-16 mt-28">
    <div class="relative md:w-1/2 flex">
        <div class="relative size-full sm:pr-10 md:pr-0">
            <img src="/risk_show.webp" alt="Showcasing risk in enterprise" width="1500" height="1000"
                class="min-h-72 md:min-h-0 lg:w-[87%] rounded-xl h-auto md:h-full object-cover object-center">
        </div>
        <div
            class="absolute w-64 left-1/2 -translate-x-1/2 -bottom-6 p-2 bg-white backdrop-blur-md border border-gray-300/50 rounded-xl shadow-sm shadow-gray-200/49 flex items-center before:absolute before:inset-x-3 before:h-2 before:flex before:bg-white/80 before:border before:border-gray-300/50 before:rounded-b-xl before:-bottom-2 before:shadow-sm before:shadow-bg-gray-200/40 before:shadow-transparent">
            <span aria-hidden="true"
                class="size-12 flex items-center justify-center rounded-lg bg-primary-50 text-primary-600 mr-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-6"
                    viewBox="0 0 256 256">
                    <path
                        d="M160,40a32,32,0,1,0-32,32A32,32,0,0,0,160,40ZM128,56a16,16,0,1,1,16-16A16,16,0,0,1,128,56Zm90.34,78.05L173.17,82.83a32,32,0,0,0-24-10.83H106.83a32,32,0,0,0-24,10.83L37.66,134.05a20,20,0,0,0,28.13,28.43l16.3-13.08L65.55,212.28A20,20,0,0,0,102,228.8l26-44.87,26,44.87a20,20,0,0,0,36.41-16.52L173.91,149.4l16.3,13.08a20,20,0,0,0,28.13-28.43Zm-11.51,16.77a4,4,0,0,1-5.66,0c-.21-.2-.42-.4-.65-.58L165,121.76A8,8,0,0,0,152.26,130L175.14,217a7.72,7.72,0,0,0,.48,1.35,4,4,0,1,1-7.25,3.38,6.25,6.25,0,0,0-.33-.63L134.92,164a8,8,0,0,0-13.84,0L88,221.05a6.25,6.25,0,0,0-.33.63,4,4,0,0,1-2.26,2.07,4,4,0,0,1-5-5.45,7.72,7.72,0,0,0,.48-1.35L103.74,130A8,8,0,0,0,91,121.76L55.48,150.24c-.23.18-.44.38-.65.58a4,4,0,1,1-5.66-5.65c.12-.12.23-.24.34-.37L94.83,93.41a16,16,0,0,1,12-5.41h42.34a16,16,0,0,1,12,5.41l45.32,51.39c.11.13.22.25.34.37A4,4,0,0,1,206.83,150.82Z">
                    </path>
                </svg>
            </span>
            <div class="flex flex-col">
                <span class="font-semibold text-xl text-gray-900">+20</span>
                <span class="text-sm text-gray-600">Satisfaction</span>
            </div>
        </div>
    </div>
    <div class="flex-1 md:py-6 lg:py-12">
        <span class="inline-flex text-sm text-gray-600 items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                class="mr-2 size-4" viewBox="0 0 256 256">
                <path
                    d="M232,120h-8.34A96.14,96.14,0,0,0,136,32.34V24a8,8,0,0,0-16,0v8.34A96.14,96.14,0,0,0,32.34,120H24a8,8,0,0,0,0,16h8.34A96.14,96.14,0,0,0,120,223.66V232a8,8,0,0,0,16,0v-8.34A96.14,96.14,0,0,0,223.66,136H232a8,8,0,0,0,0-16Zm-96,87.6V200a8,8,0,0,0-16,0v7.6A80.15,80.15,0,0,1,48.4,136H56a8,8,0,0,0,0-16H48.4A80.15,80.15,0,0,1,120,48.4V56a8,8,0,0,0,16,0V48.4A80.15,80.15,0,0,1,207.6,120H200a8,8,0,0,0,0,16h7.6A80.15,80.15,0,0,1,136,207.6ZM128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Z">
                </path>
            </svg>
            Who we serve
        </span>
        <h2 class="text-gray-900 text-2xl md:text-3xl lg:text-4xl font-semibold mt-6 lg:mt-8">
            Our client
        </h2>
        <div class="mt-6 space-y-3 lg:mt-8 text-gray-700">
            <p>
                We proudly support organisations and leadership teams committed to aligning governance, risk, and ethics
                with sustainable business performance.
            </p>
            <p>
                We work across key industries where risk governance, responsible management, and ethical leadership are critical to sustainable growth:
            </p>
            <ul class="space-y-1 pl-4 text-gray-600 list-disc list-outside">
                @foreach ($whoWeServe as $serve)
                    <li wire:key="{{ $loop->index }}">
                        <span class="font-semibold">
                           {{ $serve['title'] }} :
                        </span>
                        <div class="inline">
                           {{ $serve['description'] }}
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="flex flex-wrap items-center gap-5 mt-8">
            <a href="/contact" class="btn btn-md btn-solid btn-solid-primary text-white rounded-xl" wire:navigate>
                Let's discuss
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="ml-2">
                    <path d="M5 12h14"></path>
                    <path d="m12 5 7 7-7 7"></path>
                </svg>
            </a>
            <a href="tel:+243" class="btn gap-x-2 w-max">
                <span
                    class="border border-gray-200 text-gray-700 rounded-full size-10 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                        class="size-5" viewBox="0 0 256 256">
                        <path
                            d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z">
                        </path>
                    </svg>
                </span>
                <div class="flex flex-col">
                    <span class="text-sm text-gray-600">Have Any Question</span>
                    <h3 class="font-medium text-gray-900">
                        (+27) 60 123 4567
                    </h3>
                </div>
            </a>
        </div>
    </div>
</x-atoms.container>