@php
    $mission_vission = [
        [
            'id'=>'01',
            'title' => 'Mission',
            'description' => 'To deliver innovative and integrated solutions in strategic risk governance, responsible business management, and ethical leadership to support sustainable enterprise growth.',
            'icon'=>'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-5" viewBox="0 0 256 256"><path d="M96,208a8,8,0,0,1-8,8H39.38A15.4,15.4,0,0,1,24,200.62V192a8,8,0,0,1,16,0v8H88A8,8,0,0,1,96,208Zm64-8H128a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm64-56a8,8,0,0,0-8,8v48H200a8,8,0,0,0,0,16h16.89A15.13,15.13,0,0,0,232,200.89V152A8,8,0,0,0,224,144Zm-8-72H168a8,8,0,0,0,0,16h48v24a8,8,0,0,0,16,0V88A16,16,0,0,0,216,72ZM24,80V56A16,16,0,0,1,40,40H92.69A15.86,15.86,0,0,1,104,44.69l29.66,29.65A8,8,0,0,1,128,88H32A8,8,0,0,1,24,80Zm16-8h68.69l-16-16H40Zm-8,88a8,8,0,0,0,8-8V120a8,8,0,0,0-16,0v32A8,8,0,0,0,32,160Z"></path></svg>'
        ],
        [
            'id'=>'02',
            'title' => 'Vision',
            'description' => 'To be the strategic partner of choice, guiding organisations towards responsible performance and sustainable growth through robust risk governance, rigorous ESG practices, and ethical leadership.',
            'icon'=>'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="size-5" viewBox="0 0 256 256"><path d="M221.87,83.16A104.1,104.1,0,1,1,195.67,49l22.67-22.68a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32l27.72-27.72a40,40,0,1,0,17.87,31.09,8,8,0,1,1,16-.9,56,56,0,1,1-22.38-41.65L184.3,60.39a87.88,87.88,0,1,0,23.13,29.67,8,8,0,0,1,14.44-6.9Z"></path></svg>'
        ]
    ]
@endphp

<x-atoms.container as="section" id="mission-vision" class="flex flex-col gap-16 mt-28 scroll-mt-32">

    <div class="flex flex-col md:flex-row gap-16">
        
        <div class="flex-1 md:py-6 lg:py-12 space-y-5">
            <div class="max-w-3xl pb-7">
                <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>
                    Mission and vission
                </span>
                <h2 class="text-gray-900 text-2xl md:text-3xl lg:text-4xl font-semibold mt-3">
                    Our mission and vision
                </h2>
            </div>
            @foreach ($mission_vission as $value)
            <div wire:key="value-{{ $value['id'] }}" class="flex flex-col sm:flex-row gap-5 p-5 rounded-xl bg-white/50 border border-gray-200/50 shadow shadow-gray-200/40">
                <span class="size-10 rounded-lg flex items-center justify-center bg-gray-100 border border-gray-200/60">
                    {!! $value['icon'] !!}
                </span>
                <div class="flex-1">
                    <h3 class="text-gray-900 text-lg font-semibold">
                        {{ $value['title'] }}
                    </h3>
                    <span class="mt-2 text-gray-600 text-sm">
                        {{ $value['description'] }}
                    </span>
                </div>
            </div>
            @endforeach
        </div>
        <div class="relative md:w-1/2 flex">
            <div class="relative size-full sm:pl-10 md:pl-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>
</x-atoms.container>