@php
    $summary = Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($event->descriptionHtml())) ?? ''), 160);
    $cancelled = $event->is_cancelled;
    $past = ! $cancelled && $event->isPast();
    $label = $cancelled || $past ? null : $event->timeLabel();
    $canJoin = $event->allowsParticipation() && ($event->registration_url || $event->meeting_url);
    $primary = 'inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg bg-accent px-5 font-bold text-accent-ink hover:brightness-105';
    $secondary = 'inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg px-5 font-bold ring-1 ring-line hover:bg-bg';
@endphp
<x-layouts.site :title="$event->title">
    @push('head')
        <meta name="description" content="{{ $summary }}">
        <meta property="og:type" content="event">
        <meta property="og:title" content="{{ $event->title }}">
        <meta property="og:description" content="{{ $summary }}">
        <meta property="og:url" content="{{ route('events.show', $event) }}">
        @if ($event->coverUrl())
            <meta property="og:image" content="{{ $event->coverUrl() }}">
        @endif
        <meta name="twitter:card" content="{{ $event->coverUrl() ? 'summary_large_image' : 'summary' }}">
        @if ($preview)
            <meta name="robots" content="noindex">
        @endif
    @endpush

    @if ($preview)
        <div role="status" class="bg-accent text-accent-ink">
            <p class="mx-auto max-w-7xl px-4 py-3 font-bold">Vista previa: el público todavía no ve este evento.</p>
        </div>
    @endif

    <article>
        <header class="relative overflow-hidden bg-field text-white">
            <x-site.contours class="[mask-image:linear-gradient(90deg,transparent_0_40%,#000_80%)]" />
            <div class="relative mx-auto max-w-6xl px-4 pt-10 pb-12">
                <nav aria-label="Ruta" class="text-sm text-on-field">
                    <a href="{{ route('home') }}" class="hover:text-white hover:underline">Inicio</a>
                    <span aria-hidden="true" class="px-1.5">/</span>
                    <a href="{{ route('events') }}" class="hover:text-white hover:underline">Eventos</a>
                </nav>

                <div class="mt-6 flex items-start gap-5">
                    {{-- Hoja de calendario: el mismo rasgo que identifica a un evento en la agenda. --}}
                    <div aria-hidden="true" class="hidden w-20 shrink-0 overflow-hidden rounded-xl bg-white text-center text-field sm:block">
                        <span class="block py-1 text-sm font-bold tracking-wider uppercase {{ $past || $cancelled ? 'bg-on-field text-field' : 'bg-accent text-accent-ink' }}">{{ rtrim($event->starts_at->translatedFormat('M'), '.') }}</span>
                        <span class="block pt-2 text-4xl leading-none font-extrabold tabular-nums">{{ $event->starts_at->format('j') }}</span>
                        <span class="block pt-1 pb-2 text-sm">{{ rtrim($event->starts_at->translatedFormat('D'), '.') }}</span>
                    </div>

                    <div class="min-w-0">
                        <p class="flex flex-wrap items-center gap-2 text-sm">
                            @if ($cancelled)
                                <span class="rounded-md bg-white px-2.5 py-1 font-bold text-field">Cancelado</span>
                            @elseif ($past)
                                <span class="rounded-md px-2.5 py-1 font-bold text-white ring-1 ring-white/50 ring-inset">Finalizado</span>
                            @elseif ($label)
                                <span class="inline-flex items-center gap-1.5 rounded-md bg-accent px-2.5 py-1 font-bold text-accent-ink">
                                    <span class="size-1.5 rounded-full bg-accent-ink" aria-hidden="true"></span>{{ $label }}
                                </span>
                            @endif
                            <a href="{{ route('events', ['tipo' => $event->type->slug]) }}" class="rounded-md bg-white/10 px-2.5 py-1 font-semibold text-white hover:bg-white/20">{{ $event->type->name }}</a>
                        </p>
                        <h1 class="mt-4 text-[clamp(1.9rem,4.2vw,3.2rem)] leading-[1.05] font-extrabold tracking-tight text-balance wrap-anywhere [font-stretch:120%] {{ $cancelled ? 'line-through decoration-2' : '' }}">{{ $event->title }}</h1>
                        <p class="mt-4 text-lg text-on-field">
                            <time datetime="{{ $event->starts_at->toIso8601String() }}">{{ $event->scheduleLabel() }}</time>
                        </p>
                    </div>
                </div>
            </div>
        </header>

        <div class="mx-auto grid max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[1fr_21rem] lg:py-14">
            {{-- Ficha: en celular va antes que la descripción; en escritorio acompaña la lectura. --}}
            <aside class="lg:order-2" aria-label="Datos del evento">
                <div class="rounded-3xl bg-surface p-6 lg:sticky lg:top-24">
                    @if ($past)
                        <div role="status" class="mb-5 rounded-xl bg-bg p-4 ring-1 ring-line">
                            <p class="font-bold">Evento finalizado</p>
                            <p class="mt-1 text-muted">Ya se realizó. Queda aquí como registro.</p>
                        </div>
                    @endif
                    @if ($cancelled)
                        <div role="status" class="mb-5 rounded-xl bg-bg p-4 ring-1 ring-line">
                            <p class="font-bold">Evento cancelado</p>
                            @if ($event->cancellation_note)
                                <p class="mt-1 text-muted wrap-anywhere">{{ $event->cancellation_note }}</p>
                            @endif
                        </div>
                    @endif

                    <dl class="grid gap-5">
                        <div>
                            <dt class="text-sm font-semibold text-muted">Cuándo</dt>
                            <dd class="mt-0.5 font-semibold">{{ $event->scheduleLabel() }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-semibold text-muted">Modalidad</dt>
                            <dd class="mt-0.5 font-semibold">{{ $event->modality->getLabel() }}</dd>
                        </div>
                        @if ($event->venue || $event->campus)
                            <div>
                                <dt class="text-sm font-semibold text-muted">Dónde</dt>
                                <dd class="mt-0.5 font-semibold wrap-anywhere">
                                    {{ $event->venue }}
                                    @if ($event->campus)
                                        <span class="block font-normal text-muted">{{ $event->campus->getLabel() }}</span>
                                    @endif
                                    @if ($event->map_url)
                                        <a href="{{ $event->map_url }}" target="_blank" rel="noopener" class="mt-1 inline-block font-semibold text-link underline underline-offset-4">Ver en el mapa</a>
                                    @endif
                                </dd>
                            </div>
                        @endif
                        @if ($event->organizer)
                            <div>
                                <dt class="text-sm font-semibold text-muted">Organiza</dt>
                                <dd class="mt-0.5 font-semibold wrap-anywhere">{{ $event->organizer }}</dd>
                            </div>
                        @endif
                    </dl>

                    @if ($canJoin)
                        <div class="mt-6 grid gap-2.5 border-t border-line pt-6">
                            @if ($event->registration_url)
                                <a href="{{ $event->registration_url }}" target="_blank" rel="noopener" class="{{ $primary }}">Inscribirme</a>
                            @endif
                            @if ($event->meeting_url)
                                <a href="{{ $event->meeting_url }}" target="_blank" rel="noopener" class="{{ $event->registration_url ? $secondary : $primary }}">Unirme a la videollamada</a>
                            @endif
                        </div>
                    @endif
                </div>
            </aside>

            <div class="min-w-0 lg:order-1">
                @if ($relatedNews)
                    <a href="{{ route('news.show', $relatedNews) }}" class="group mb-8 flex items-center gap-4 rounded-2xl bg-field p-5 text-white">
                        <span class="min-w-0 flex-1">
                            <span class="block text-sm font-semibold text-on-field">Así se vivió</span>
                            <span class="mt-0.5 block text-lg leading-snug font-bold wrap-anywhere group-hover:underline">{{ $relatedNews->title }}</span>
                        </span>
                        <span aria-hidden="true" class="text-2xl text-accent">→</span>
                    </a>
                @endif

                @if ($event->coverUrl())
                    {{-- Sin recorte: un afiche vertical se ve completo. --}}
                    <figure class="mb-10 flex justify-center rounded-3xl bg-surface p-3">
                        <img src="{{ $event->coverUrl() }}" alt="{{ $event->cover_alt }}" class="max-h-[75vh] w-auto max-w-full rounded-2xl object-contain {{ $cancelled ? 'opacity-60 grayscale' : '' }}">
                    </figure>
                @endif

                <div class="prose prose-lg prose-site rich-content max-w-none wrap-anywhere">
                    {!! $event->descriptionHtml() !!}
                </div>

                <footer class="mt-14 border-t border-line pt-6">
                    <a href="{{ route('events') }}" class="inline-flex min-h-12 items-center gap-2 rounded-lg bg-surface px-5 font-bold hover:text-link">
                        <span aria-hidden="true">←</span> Todos los eventos
                    </a>
                </footer>
            </div>
        </div>
    </article>
</x-layouts.site>