@use('Core\Localization\LocalizedDate')

{{--
    @intent Página pública do módulo **Demo** (F3): demonstra módulo → shell do Portal, o serviço
    **Media** (ADR-026) e o serviço **Security** (ADR-019/ADR-029).

    @description Só **tokens** (utilitários derivados de `--color-*`), sem cor de paleta hardcoded,
    sem `dark:` (o tema já vira nos tokens) e sem estilo inline — ADR-016/ADR-010. A imagem passa
    pelo componente único do Media (`<x-media::picture>`: AVIF/WebP + `width`/`height`).
--}}
@php
    /** @var array<string, mixed>|null $payload */
    $payload = is_array($milestone->media_data) ? ($milestone->media_data['payload'] ?? null) : null;
    $payload = is_array($payload) ? $payload : null;
@endphp

<x-layout::portal preset="padrao" :title="$milestone->title" :description="$milestone->description">
    <article class="mx-auto flex max-w-4xl flex-col gap-8 py-12">
        <div class="overflow-hidden rounded-2xl border border-line bg-surface shadow-sm">
            @if ($payload !== null)
                <x-media::picture
                    :path="$payload['path'] ?? null"
                    :sources="$payload['responsive'] ?? []"
                    :alt="$milestone->title"
                    :width="$payload['width'] ?? 0"
                    :height="$payload['height'] ?? 0"
                    figure-class="m-0"
                    img-class="w-full h-auto"
                    sizes="100vw"
                />
            @else
                <span class="flex h-48 items-center justify-center bg-civic-surface-low text-civic-outline" aria-hidden="true">
                    <x-ui::icon name="image" class="h-10 w-10" />
                </span>
            @endif
        </div>

        <div class="flex flex-col gap-6">
            <header class="flex flex-wrap items-center justify-between gap-3">
                <h1 class="text-3xl font-extrabold tracking-tight text-ink">{{ $milestone->title }}</h1>
                <span class="rounded-full bg-civic-surface-high px-3 py-1 text-xs font-bold uppercase tracking-wider text-ink">
                    {{ $milestone->status }}
                </span>
            </header>

            <p class="flex flex-wrap items-center gap-2 border-b border-line pb-4 text-sm text-ink-muted">
                <x-ui::icon name="calendar" />
                <strong>{{ __('demo::show.deadline') }}</strong>
                <span>{{ LocalizedDate::long($milestone->deadline) }}</span>
            </p>

            <div class="prose">{{ $milestone->description }}</div>

            @if ($milestone->sensitive_notes)
                <section class="flex flex-col gap-3">
                    <h2 class="text-xs font-bold uppercase tracking-widest text-ink-muted">
                        {{ __('demo::show.protected_data') }}
                    </h2>

                    <x-security::security-data-card
                        :label="__('demo::show.notes_label')"
                        :value="$milestone->sensitive_notes"
                        :hash="$notesHash"
                    />
                </section>
            @endif
        </div>
    </article>
</x-layout::portal>