@php
$features = [
    [
        'id' => '001',
        'title' => 'Expertise and Experience',
        'description' =>
            'Over a decade of advisory experience in strategic governance and ethical leadership.',
        'icon' =>
            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="size-5" viewBox="0 0 256 256"><path d="M216,96A88,88,0,1,0,72,163.83V240a8,8,0,0,0,11.58,7.16L128,225l44.43,22.21A8.07,8.07,0,0,0,176,248a8,8,0,0,0,8-8V163.83A87.85,87.85,0,0,0,216,96ZM56,96a72,72,0,1,1,72,72A72.08,72.08,0,0,1,56,96ZM168,227.06l-36.43-18.21a8,8,0,0,0-7.16,0L88,227.06V174.37a87.89,87.89,0,0,0,80,0ZM128,152A56,56,0,1,0,72,96,56.06,56.06,0,0,0,128,152Zm0-96A40,40,0,1,1,88,96,40,40,0,0,1,128,56Z"></path></svg>',
    ],
    [
        'id' => '002',
        'title' => 'Strategic Insight',
        'description' =>
            'Guidance rooted in internationally recognised standards and best practices.',
        'icon' =>
            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="size-5" viewBox="0 0 256 256"><path d="M215.12,123.64a8,8,0,1,0-14.24-7.28,79.58,79.58,0,0,1-33.08,33.5l-16.58-37.32A40,40,0,0,0,136,40.8V24a8,8,0,0,0-16,0V40.8a40,40,0,0,0-15.22,71.74L56.69,220.75a8,8,0,1,0,14.62,6.5l25.14-56.56A95.48,95.48,0,0,0,128,176a99.13,99.13,0,0,0,31.6-5.21l25.09,56.46a8,8,0,0,0,14.62-6.5l-25-56.25A95.81,95.81,0,0,0,215.12,123.64ZM128,56a24,24,0,1,1-24,24A24,24,0,0,1,128,56Zm0,104a79.52,79.52,0,0,1-25-4l16.42-36.94a39.81,39.81,0,0,0,17.2,0l16.48,37.06A83.21,83.21,0,0,1,128,160Z"></path></svg>',
    ],
    [
        'id' => '003',
        'title' => 'Ethical Commitment',
        'description' =>
            'A firm commitment to integrity, responsible business, and social impact.',
        'icon' =>
            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="size-5" viewBox="0 0 256 256"><path d="M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l55.07-55.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41ZM41.53,64,62,74.22,36.43,125.27,16,115.06Zm116,119.13L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm62-57.87-25.52-51L214.47,64,240,115.06Zm-87.75,92.67a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z"></path></svg>',
    ],
    [
        'id' => '004',
        'title' => 'Tailored Solutions',
        'description' =>
            'Customised advisory services designed to meet your unique governance challenges.',
        'icon' =>
            '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" className="size-5" viewBox="0 0 256 256"><path d="M220.27,158.54a8,8,0,0,0-7.7-.46,20,20,0,1,1,0-36.16A8,8,0,0,0,224,114.69V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36.11,36.11,0,0,0-11.36-26.24,36,36,0,0,0-60.55,23.62,36.56,36.56,0,0,0,.14,6.62H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36.12,36.12,0,0,0-26.24,11.36,35.7,35.7,0,0,0-9.69,27,36.08,36.08,0,0,0,33.31,33.6,35.68,35.68,0,0,0,6.62-.14V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V165.31A8,8,0,0,0,220.27,158.54ZM208,208H64V165.31a8,8,0,0,0-11.43-7.23,20,20,0,1,1,0-36.16A8,8,0,0,0,64,114.69V72h46.69a8,8,0,0,0,7.23-11.43,20,20,0,1,1,36.16,0A8,8,0,0,0,161.31,72H208v32.23a35.68,35.68,0,0,0-6.62-.14A36,36,0,0,0,204,176a35.36,35.36,0,0,0,4-.22Z"></path></svg>',
    ],
];

@endphp

<x-atoms.container as="section" noPadding
    class="grid sm:grid-cols-2 md:grid-cols-4 rounded-xl bg-white border border-gray-200/50 shadow shadow-gray-200/20 mb-12 sm:mb-14 -mt-8 relative sm:mt-14 divide-x divide-y divide-gray-200/50 py-2 sm:py-0">
    @foreach ($features as $feature)
        <div wire:key="feature-{{ $feature['id'] }}" class="py-3 px-4 lg:px-8 lg:py-8 flex flex-col">
            <span class="size-10 rounded-lg flex items-center justify-center bg-gray-100 border border-gray-200/60 text-gray-600">
                {!! $feature['icon'] !!}
            </span>
            <h3 class="text-lg font-semibold text-gray-900 mt-4">{{ $feature['title'] }}</h3>
            <span class="text-sm text-gray-500 mt-2.5">
                {{ $feature['description'] }}
            </span>
        </div>
    @endforeach
</x-atoms.container>