{{--
    @intent Bloco `text-image`: texto rico + imagem do catálogo Media (ADR-026), lado configurável.
    @description A ordem do DOM é texto → imagem (leitura previsível); o lado visual é só CSS
                 (`md:flex-row-reverse`), sem posição absoluta e sem JS.
--}}
@use('Services\RichText\Contracts\RichTextRenderer')

@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $title = is_string($props['title'] ?? null) ? $props['title'] : null;
    $ast = is_array($props['body'] ?? null) ? $props['body'] : null;
    $html = $ast !== null ? app(RichTextRenderer::class)->toHtml($ast) : '';
    $image = is_array($media['image'] ?? null) && is_string($media['image']['path'] ?? null) ? $media['image'] : null;
    $alt = is_string($props['image_alt'] ?? null) ? $props['image_alt'] : '';
    $side = is_string($props['image_side'] ?? null) ? $props['image_side'] : 'left';
    $headingId = is_string($blockId) && $blockId !== ''
        ? preg_replace('/[^a-z0-9-]/', '', strtolower($blockId)).'-title'
        : null;
@endphp

@if ($title !== null && $html !== '')
    <section
        @if ($headingId !== null) aria-labelledby="{{ $headingId }}" @else aria-label="{{ $title }}" @endif
        class="flex flex-col gap-4"
    >
        <h2 id="{{ $headingId }}" class="text-2xl font-bold tracking-tight text-civic-ink">{{ $title }}</h2>

        <div @class([
            'flex flex-col gap-6 md:items-start',
            'md:flex-row-reverse' => $side === 'right',
            'md:flex-row' => $side !== 'right',
        ])>
            <div class="prose max-w-3xl flex-1 text-civic-outline">
                {!! $html !!}
            </div>

            @if ($image !== null)
                <div class="w-full md:w-2/5">
                    <x-media::picture
                        :path="$image['path']"
                        :sources="$image['sources'] ?? []"
                        :alt="$alt"
                        :width="$image['width'] ?? 0"
                        :height="$image['height'] ?? 0"
                        figure-class="contents"
                        img-class="w-full rounded-2xl object-cover"
                        sizes="(min-width: 768px) 40vw, 100vw"
                    />
                </div>
            @endif
        </div>
    </section>
@endif