@php
    $sections = collect($block->get('sections') ?: []);
    $width = match ($variant) {
        'prose_narrow' => 'max-w-3xl', 'two_column' => 'max-w-6xl', 'with_toc' => 'max-w-6xl', default => 'max-w-4xl',
    };
@endphp
<div class="{{ $width }} mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('title'))
        <h1 class="ec-heading text-3xl sm:text-4xl font-bold mb-3">{{ $block->get('title') }}</h1>
    @endif
    @if ($block->get('last_updated'))
        <p class="ec-muted text-sm mb-8">{{ $block->get('last_updated') }}</p>
    @endif

    <div class="{{ $variant === 'with_toc' ? 'grid lg:grid-cols-[16rem_1fr] gap-12' : '' }}">
        @if ($variant === 'with_toc' && $sections->isNotEmpty())
            <nav class="hidden lg:block self-start sticky top-24" aria-label="{{ __('فهرس الصفحة') }}">
                <ul class="flex flex-col gap-2 text-sm">
                    @foreach ($sections as $i => $s)
                        @php $anchor = data_get($s, 'anchor') ?: 'sec-' . ($i + 1); @endphp
                        <li><a href="#{{ $anchor }}" class="ec-muted hover:underline">{{ $block->get("sections.{$i}.heading") ?: data_get($s, 'heading') }}</a></li>
                    @endforeach
                </ul>
            </nav>
        @endif

        <div class="ec-prose {{ $variant === 'two_column' ? 'md:columns-2 md:gap-12' : '' }}">
            @if ($block->get('body'))
                {!! clean_html($block->get('body')) !!}
            @endif

            @foreach ($sections as $i => $s)
                @php $anchor = data_get($s, 'anchor') ?: 'sec-' . ($i + 1); @endphp
                <section id="{{ $anchor }}" class="mt-10 break-inside-avoid scroll-mt-24">
                    @if (data_get($s, 'heading'))
                        <h2 class="ec-heading text-xl font-semibold mb-3">{{ $block->get("sections.{$i}.heading") ?: data_get($s, 'heading') }}</h2>
                    @endif
                    {!! clean_html($block->get("sections.{$i}.body") ?: data_get($s, 'body')) !!}
                </section>
            @endforeach
        </div>
    </div>
</div>
