@php
    $values = [
        [
            'id' => 1,
            'title' => 'Integrity',
            'description' => 'Upholding the highest standards of ethical conduct in all our engagements.',
            '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="M80.57,117A8,8,0,0,1,91,112.57l29,11.61V96a8,8,0,0,1,16,0v28.18l29-11.61A8,8,0,1,1,171,127.43l-30.31,12.12L158.4,163.2a8,8,0,1,1-12.8,9.6L128,149.33,110.4,172.8a8,8,0,1,1-12.8-9.6l17.74-23.65L85,127.43A8,8,0,0,1,80.57,117ZM224,56v56c0,52.72-25.52,84.67-46.93,102.19-23.06,18.86-46,25.27-47,25.53a8,8,0,0,1-4.2,0c-1-.26-23.91-6.67-47-25.53C57.52,196.67,32,164.72,32,112V56A16,16,0,0,1,48,40H208A16,16,0,0,1,224,56Zm-16,0L48,56l0,56c0,37.3,13.82,67.51,41.07,89.81A128.25,128.25,0,0,0,128,223.62a129.3,129.3,0,0,0,39.41-22.2C194.34,179.16,208,149.07,208,112Z"></path></svg>', // Represents integrity
        ],
        [
            'id' => 2,
            'title' => 'Excellence',
            'description' => 'Delivering high-quality, strategic insights and practical solutions.',
            '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="M239.43,133l-32-80h0a8,8,0,0,0-9.16-4.84L136,62V40a8,8,0,0,0-16,0V65.58L54.26,80.19A8,8,0,0,0,48.57,85h0v.06L16.57,165a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32a7.92,7.92,0,0,0-.57-3L66.92,93.77,120,82V208H104a8,8,0,0,0,0,16h48a8,8,0,0,0,0-16H136V78.42L187,67.1,160.57,133a7.92,7.92,0,0,0-.57,3c0,23.31,24.54,32,40,32s40-8.69,40-32A7.92,7.92,0,0,0,239.43,133ZM56,184c-7.53,0-22.76-3.61-23.93-14.64L56,109.54l23.93,59.82C78.76,180.39,63.53,184,56,184Zm144-32c-7.53,0-22.76-3.61-23.93-14.64L200,77.54l23.93,59.82C222.76,148.39,207.53,152,200,152Z"></path></svg>', // Represents excellence
        ],
        [
            'id' => 3,
            'title' => 'Innovation',
            'description' => 'Developing creative and sustainable strategies to address complex challenges.',
            '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="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"></path></svg>', // Represents innovation
        ],
        [
            'id' => 4,
            'title' => 'Social Impact',
            'description' => 'Ensuring our work contributes positively to society and business sustainability.',
            '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="M144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17a8,8,0,1,0,12.24,10.3C50.25,181.19,77.91,168,108,168s57.75,13.19,77.87,37.15a8,8,0,0,0,12.26-10.3C183.18,177.07,164.6,164.44,144,157.68ZM56,100a52,52,0,1,1,52,52A52.06,52.06,0,0,1,56,100Zm196.25,43.07-4.66-2.69a23.6,23.6,0,0,0,0-8.76l4.66-2.69a8,8,0,1,0-8-13.86l-4.67,2.7a23.92,23.92,0,0,0-7.58-4.39V108a8,8,0,0,0-16,0v5.38a23.92,23.92,0,0,0-7.58,4.39l-4.67-2.7a8,8,0,1,0-8,13.86l4.66,2.69a23.6,23.6,0,0,0,0,8.76l-4.66,2.69a8,8,0,0,0,8,13.86l4.67-2.7a23.92,23.92,0,0,0,7.58,4.39V164a8,8,0,0,0,16,0v-5.38a23.92,23.92,0,0,0,7.58-4.39l4.67,2.7a7.92,7.92,0,0,0,4,1.07,8,8,0,0,0,4-14.93ZM216,136a8,8,0,1,1,8,8A8,8,0,0,1,216,136Z"></path></svg>', // Represents social impact
        ],
    ];

@endphp

<x-atoms.container id="core-values" as="section" class="mt-28 scroll-mt-32">
    <span class="flex w-max text-sm text-gray-600 items-center mx-auto text-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>
        Our core values
    </span>
    <h2 class="mt-6 text-gray-900 text-2xl md:text-3xl lg:text-4xl font-semibold lg:mt-8 mx-auto max-w-2xl text-center">
        Building Stronger Boards, Responsible Leadership, and Sustainable Organisations
    </h2>
    <div class="mt-16 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        @foreach ($values as $value)
            <div wire:key="value-{{ $value['id'] }}" class="flex flex-col 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>
                <h3 class="mt-4 text-gray-900 text-lg font-semibold">
                    {{ $value['title'] }}
                </h3>
                <span class="mt-2 text-gray-600 text-sm">
                    {{ $value['description'] }}
                </span>
            </div>
        @endforeach
    </div>
</x-atoms.container>