<section class="w-full py-24" style="background-color: {{ trim($d['bg_color'] ?? '') ?: '#ffffff' }}">
    <div class="max-w-3xl mx-auto px-6">
        @if(!empty($d['title']))
            <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12 text-center">{{ $d['title'] }}</h2>
        @endif
        <div class="relative">
            <div class="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 -translate-x-1/2"></div>
            @foreach($d['items'] ?? [] as $item)
                @if(!empty($item['title']) || !empty($item['year']))
                    <div class="relative flex gap-8 mb-12 last:mb-0">
                        <div class="w-8 h-8 rounded-full bg-slate-900 shrink-0 mx-auto md:ml-0 md:translate-x-[-50%] md:ml-[calc(50%-1rem)] border-4 border-white shadow"></div>
                        <div class="flex-1 pb-8">
                            @if(!empty($item['year']))<span class="text-sm font-semibold text-slate-500">{{ $item['year'] }}</span>@endif
                            <h3 class="text-lg font-bold text-slate-900 mt-1">{{ $item['title'] ?? '' }}</h3>
                            @if(!empty($item['description']))<div class="text-slate-600 mt-2 prose prose-slate prose-sm max-w-none">{!! \App\Support\SafeHtml::richText($item['description']) !!}</div>@endif
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</section>
