@props([
    'eyebrow' => null,
    'headline' => '',
    'body' => '',
    'features' => [],
    'reverse' => false,
    'sectionId' => 'story',
])

<section
    id="{{ $sectionId }}"
    class="py-20 sm:py-28 {{ $reverse ? 'bg-slate-50/70' : 'bg-white' }}"
    aria-labelledby="{{ $sectionId }}-heading"
>
    <div class="site-container">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 lg:items-center">
            <div class="lg:col-span-5 {{ $reverse ? 'lg:order-2' : '' }} reveal">
                @if($eyebrow)
                    <p class="text-xs font-semibold uppercase tracking-label text-criazo-primary mb-4">{{ $eyebrow }}</p>
                @endif
                <h2 id="{{ $sectionId }}-heading" class="text-2xl sm:text-3xl md:text-4xl font-semibold text-slate-900 leading-[1.15] mb-5">
                    {{ $headline }}
                </h2>
                <p class="text-base sm:text-lg text-slate-600 leading-relaxed max-w-md">
                    {{ $body }}
                </p>
            </div>
            <div class="lg:col-span-7 {{ $reverse ? 'lg:order-1' : '' }} reveal">
                <div class="relative rounded-2xl md:rounded-3xl border border-slate-200/80 bg-gradient-to-b from-white to-slate-50/70 backdrop-blur-sm p-6 sm:p-8 shadow-sm shadow-slate-900/[0.04] overflow-hidden">
                    <div class="absolute -top-20 -right-16 w-52 h-52 rounded-full bg-criazo-50 blur-3xl pointer-events-none" aria-hidden="true"></div>
                    <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-5">{{ __('messages.vertical_restaurants.story_includes_label') }}</p>
                    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-3" role="list">
                        @foreach($features as $feature)
                            <li class="group">
                                <span class="flex items-center gap-2.5 px-3.5 py-2.5 rounded-xl text-sm font-medium text-slate-700 bg-white/90 border border-slate-200/90 group-hover:border-criazo-200 group-hover:bg-criazo-50/50 smooth-transition">
                                    <span class="h-1.5 w-1.5 rounded-full bg-criazo-primary flex-shrink-0" aria-hidden="true"></span>
                                    {{ $feature }}
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>