@extends('layouts.app')

@section('content')
    <x-page-hero title="Services and Solutions" :subtitle="config('offerings.intro')" :breadcrumbs="[['label' => 'Services']]" />

    @foreach (config('offerings.items') as $item)
        <section id="{{ $item['id'] }}" @class(['section scroll-mt-20', 'bg-slate-50' => $loop->even])>
            <div class="container-page grid gap-6 lg:grid-cols-3">
                <div class="lg:col-span-2">
                    <x-section-heading :title="$item['title']" :subtitle="$item['text']" />
                    @isset($item['link'])
                        <a href="{{ route($item['link']['route']) }}{{ isset($item['link']['fragment']) ? '#'.$item['link']['fragment'] : '' }}" class="font-semibold text-brand-700 hover:underline">{{ $item['link']['label'] }} &rarr;</a>
                    @endisset
                </div>
                <ul class="checklist rounded-lg border border-slate-200 bg-white p-6 text-sm">
                    @foreach ($item['points'] as $point)
                        <li>{{ $point }}</li>
                    @endforeach
                </ul>
                @isset($item['image'])
                    <img src="{{ \App\Support\Assets::url($item['image']) }}" alt="{{ $item['image_alt'] }}" width="1536" height="1024" loading="lazy" decoding="async"
                         class="mx-auto w-full max-w-4xl rounded-2xl shadow-xl shadow-brand-700/10 ring-1 ring-slate-200 lg:col-span-3">
                @endisset
            </div>
        </section>
    @endforeach
@endsection