<section class="bg-[#f8f9fa] dark:bg-slate-950 py-16 sm:py-24">
    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div class="rounded-3xl bg-white dark:bg-slate-900 border border-lime-100 dark:border-slate-800 p-8 sm:p-12 shadow-sm">
            <flux:heading size="xl" class="text-slate-900 dark:text-slate-100">
                {{ $title }}
            </flux:heading>

            <flux:text class="mt-4 text-slate-600 dark:text-slate-300 leading-relaxed max-w-3xl">
                {{ $description }}
            </flux:text>

            @if ($highlights)
                <div class="mt-8 grid gap-3 sm:grid-cols-3">
                    @foreach ($highlights as $item)
                        <div class="rounded-xl bg-lime-50 dark:bg-slate-800 px-4 py-3 text-sm text-lime-700 dark:text-lime-300 border border-lime-100 dark:border-slate-700">
                            {{ $item }}
                        </div>
                    @endforeach
                </div>
            @endif

            @if ($sections)
                <div class="mt-8 grid gap-4 md:grid-cols-3">
                    @foreach ($sections as $section)
                        <article class="rounded-2xl border border-lime-100 dark:border-slate-700 bg-white dark:bg-slate-900 p-5">
                            <h3 class="font-semibold text-slate-900 dark:text-slate-100">{{ $section['title'] }}</h3>
                            <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">{{ $section['body'] }}</p>
                        </article>
                    @endforeach
                </div>
            @endif

            <div class="mt-8 flex flex-wrap gap-3">
                <flux:button href="{{ route('blog') }}" variant="primary">Read the blog</flux:button>
            </div>
        </div>
    </div>
</section>
