@props(['banners'])
{{--
    Portada del inicio con banners. Todas las diapositivas ocupan la misma
    celda: la portada mide lo que la más alta y la página no salta al
    cambiar. Comportamiento: resources/js/site/hero-banners.js.
--}}
@php
    $firstImageId = $banners->first(fn ($banner) => $banner->imageUrl() !== null)?->id;
    $control = 'inline-flex size-11 items-center justify-center rounded-full ring-1 ring-white/40 ring-inset hover:bg-white/10';
@endphp

<section
    data-hero-banners
    {{-- El tiempo entre diapositivas se cambia solo aquí: el script y la barra de avance lo leen. --}}
    data-interval="3000"
    style="--hero-interval: 3000ms"
    aria-roledescription="carrusel"
    aria-label="Destacados"
    class="group/hero relative overflow-hidden bg-field text-white"
>
    <x-site.contours class="[mask-image:linear-gradient(180deg,transparent_0_55%,#000_80%)] lg:[mask-image:linear-gradient(90deg,transparent_0_30%,#000_62%)]" />
    <h1 class="sr-only">Facultad de Administración</h1>

    <div class="relative grid">
        @foreach ($banners as $banner)
            <article
                data-hero-slide
                aria-roledescription="diapositiva"
                aria-label="{{ $loop->iteration }} de {{ $loop->count }}"
                class="hero-slide col-start-1 row-start-1 grid min-w-0 items-center"
                @if ($loop->first) data-active @else hidden @endif
            >
                @if ($banner->isPoster())
                    <h2 class="sr-only">{{ $banner->title }}</h2>
                    @if ($banner->imageUrl())
                        @php $posterLink = $banner->links()[0] ?? null; @endphp
                        <div class="mx-auto w-full max-w-7xl px-4 pt-8 pb-6 lg:pt-12">
                            @if ($posterLink)
                                <a href="{{ $posterLink['url'] }}" @if ($posterLink['external']) target="_blank" rel="noopener" @endif class="block rounded-3xl">
                            @endif
                            <picture>
                                @if ($banner->mobileImageUrl())
                                    <source media="(max-width: 639px)" srcset="{{ $banner->mobileImageUrl() }}">
                                @endif
                                <img
                                    src="{{ $banner->imageUrl() }}"
                                    alt="{{ $banner->image_alt }}"
                                    @if ($banner->id === $firstImageId) fetchpriority="high" @else loading="lazy" @endif
                                    class="mx-auto max-h-[72vh] w-auto max-w-full rounded-3xl object-contain"
                                >
                            </picture>
                            @if ($posterLink)
                                </a>
                            @endif
                        </div>
                    @endif
                @else
                    <div class="mx-auto grid w-full max-w-7xl items-center gap-10 px-4 pt-14 pb-8 lg:pt-20 {{ $banner->imageUrl() ? 'lg:grid-cols-[1.15fr_.85fr]' : '' }}">
                        <div class="min-w-0">
                            @if ($banner->label)
                                <p class="flex items-center gap-3 font-bold tracking-wide text-accent uppercase wrap-anywhere">
                                    <span class="h-0.5 w-8 shrink-0 bg-accent" aria-hidden="true"></span>{{ $banner->label }}
                                </p>
                            @endif
                            <h2 class="max-w-[18ch] text-[clamp(2.2rem,5vw,4.25rem)] leading-none font-extrabold tracking-tight text-balance wrap-anywhere [font-stretch:125%] {{ $banner->label ? 'mt-5' : '' }}">{{ $banner->title }}</h2>
                            @if ($banner->description)
                                <p class="mt-6 max-w-[48ch] text-lg leading-relaxed text-on-field wrap-anywhere">{{ $banner->description }}</p>
                            @endif
                            @if ($banner->links())
                                <div class="mt-8 flex flex-wrap gap-3">
                                    @foreach ($banner->links() as $link)
                                        <a
                                            href="{{ $link['url'] }}"
                                            @if ($link['external']) target="_blank" rel="noopener" @endif
                                            class="inline-flex min-h-12 items-center rounded-full px-6 font-bold wrap-anywhere {{ $loop->first ? 'bg-accent text-accent-ink hover:brightness-105' : 'ring-1 ring-white/60 ring-inset hover:bg-white/10' }}"
                                        >{{ $link['label'] }}</a>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        @if ($banner->imageUrl())
                            <img
                                src="{{ $banner->imageUrl() }}"
                                alt=""
                                @if ($banner->id === $firstImageId) fetchpriority="high" @else loading="lazy" @endif
                                class="aspect-[16/10] w-full rounded-3xl object-cover lg:aspect-[4/3.2]"
                            >
                        @endif
                    </div>
                @endif
            </article>
        @endforeach
    </div>

    @if ($banners->count() > 1)
        {{-- Cada punto es una barra: la activa se llena en el tiempo que falta para el cambio. --}}
        <div data-hero-controls hidden class="relative mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 pb-8">
            <div class="flex items-center gap-1.5">
                @foreach ($banners as $banner)
                    <button
                        type="button"
                        data-hero-dot
                        aria-label="Ir a la diapositiva {{ $loop->iteration }}"
                        @if ($loop->first) aria-current="true" @endif
                        class="group/dot flex h-11 w-8 items-center sm:w-12"
                    >
                        <span class="block h-1 w-full overflow-hidden rounded-full bg-white/30 group-hover/dot:bg-white/50">
                            <span class="hero-dot-fill block h-full origin-left rounded-full bg-accent"></span>
                        </span>
                    </button>
                @endforeach
            </div>
            <div class="flex items-center gap-2">
                <button type="button" data-hero-toggle aria-label="Pausar" class="{{ $control }}">
                    <svg class="size-5 group-data-[paused]/hero:hidden" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6 4h3v12H6zM11 4h3v12h-3z"/></svg>
                    <svg class="hidden size-5 group-data-[paused]/hero:block" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7 4.5v11l9-5.5z"/></svg>
                </button>
                <button type="button" data-hero-prev aria-label="Anterior" class="{{ $control }}">
                    <svg class="size-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5l-5 5 5 5"/></svg>
                </button>
                <button type="button" data-hero-next aria-label="Siguiente" class="{{ $control }}">
                    <svg class="size-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 5l5 5-5 5"/></svg>
                </button>
            </div>
        </div>
    @else
        <div class="pb-8" aria-hidden="true"></div>
    @endif
</section>