@extends($site->themeView('layout'))

{{-- Cinema home: featured title, carousels, personal recommendations, editorial selections. --}}
@section('content')
    @if ($hero)
        <section class="relative isolate -mt-16 flex min-h-[70vh] items-end overflow-hidden pt-16">
            <img src="{{ $hero['backdrop'] ?: $hero['poster'] }}" alt="" fetchpriority="high" @class(['absolute inset-0 -z-10 size-full object-cover', 'blur-sm scale-110 opacity-60' => ! $hero['backdrop']])>
            <div class="absolute inset-0 -z-10 bg-gradient-to-t from-[var(--surface)] via-[color-mix(in_oklab,var(--surface)_55%,transparent)] to-black/30"></div>
            <div class="absolute inset-0 -z-10 bg-gradient-to-r from-[var(--surface)]/90 via-transparent"></div>
            <div class="container-site max-w-7xl pb-14">
                <p class="text-sm font-bold tracking-widest text-accent uppercase">{{ __('movies.featured') }}</p>
                <h1 class="mt-2 max-w-3xl text-4xl font-black tracking-tight text-white text-balance md:text-6xl">{{ $hero['title'] }}</h1>
                <p class="mt-3 flex flex-wrap items-center gap-3 text-sm text-white/70">
                    @if ($hero['rating'])<span class="inline-flex items-center gap-1 font-bold text-amber-300"><x-site.icon name="star" class="size-4 fill-current" /> {{ number_format($hero['rating'], 1) }}</span>@endif
                    @if ($hero['year'])<span>{{ $hero['year'] }}</span>@endif
                    <span class="rounded border border-white/30 px-1.5 text-xs uppercase">{{ $hero['type'] === 'tv' ? __('movies.tv_short') : __('movies.movie_short') }}</span>
                </p>
                <p class="mt-4 line-clamp-3 max-w-2xl text-white/80">{{ $hero['overview'] }}</p>
                <div class="mt-6 flex flex-wrap gap-3">
                    <a href="{{ $hero['path'] }}" class="btn bg-accent px-6 py-3 text-base font-bold text-black hover:brightness-110"><x-site.icon name="play" class="size-4" /> {{ $hero['has_video'] ? __('movies.watch_now') : __('movies.see_title') }}</a>
                    <a href="{{ lpath('/'.seg('discover')) }}" class="btn bg-white/15 px-6 py-3 text-base text-white backdrop-blur hover:bg-white/25">{{ __('movies.discover') }}</a>
                </div>
            </div>
        </section>
    @else
        <section class="container-site max-w-7xl pt-12 pb-6">
            <h1 class="text-4xl font-black tracking-tight text-white md:text-5xl">{{ $site->localized('home_heading') ?: $site->name }}</h1>
            @if ($site->localized('tagline'))<p class="mt-3 max-w-2xl text-lg text-white/70">{{ $site->localized('tagline') }}</p>@endif
        </section>
    @endif

    <div class="container-site max-w-7xl space-y-12 py-10">
        @unless ($available)
            <div class="rounded-2xl bg-white/5 p-6 text-white/80 ring-1 ring-white/10">{{ __('movies.catalogue_unavailable') }}</div>
        @endunless

        @include($site->themeView('movies.partials.row'), ['key' => 'streaming', 'title' => __('movies.row_streaming'), 'items' => $rows['streaming'] ?? [], 'more' => lpath('/'.seg('movies')).'?liste=streaming'])

        {{-- Filled by cinema.js from the visitor's favourites (stored on their device). --}}
        <section data-recommendations hidden aria-labelledby="row-reco" class="cn-row relative">
            <h2 id="row-reco" class="text-xl font-bold text-white md:text-2xl">{{ __('movies.for_you') }}</h2>
            <p class="text-sm text-white/50">{{ __('movies.for_you_text') }}</p>
            <div class="relative mt-4"><div class="-mx-4 flex snap-x gap-4 overflow-x-auto px-4 pb-2 [scrollbar-width:none]" data-carousel data-reco-list></div></div>
        </section>

        @include($site->themeView('movies.partials.row'), ['key' => 'added', 'title' => __('movies.row_added'), 'items' => $rows['added'] ?? []])
        @include($site->themeView('movies.partials.row'), ['key' => 'movies', 'title' => __('movies.row_movies'), 'items' => $rows['movies'] ?? [], 'more' => lpath('/'.seg('movies'))])
        @include($site->themeView('movies.partials.row'), ['key' => 'series', 'title' => __('movies.row_series'), 'items' => $rows['series'] ?? [], 'more' => lpath('/'.seg('series'))])

        @if ($collections->isNotEmpty())
            <section aria-labelledby="row-collections">
                <div class="flex items-end justify-between gap-4">
                    <h2 id="row-collections" class="text-xl font-bold text-white md:text-2xl">{{ __('movies.collections') }}</h2>
                    <a href="{{ lpath('/'.seg('collections')) }}" class="text-sm font-semibold text-accent hover:underline">{{ __('movies.see_all') }}</a>
                </div>
                <div class="mt-4 grid gap-4 md:grid-cols-3">
                    @foreach ($collections->take(3) as $collection)
                        <a href="{{ $collection->path() }}" class="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-brand/40 to-accent/20 p-6 ring-1 ring-white/10 transition hover:ring-accent/60">
                            <p class="text-xs font-bold tracking-widest text-accent uppercase">{{ __('movies.selection') }}</p>
                            <p class="mt-2 text-xl font-bold text-white group-hover:underline">{{ $collection->title }}</p>
                            @if ($collection->summary)<p class="mt-2 line-clamp-2 text-sm text-white/70">{{ $collection->summary }}</p>@endif
                            <p class="mt-4 text-xs text-white/50">{{ __('movies.titles_count', ['count' => count($collection->items ?? [])]) }}</p>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif

        @include($site->themeView('movies.partials.row'), ['key' => 'top', 'title' => __('movies.row_top'), 'items' => array_values(array_filter($rows['top'] ?? [], fn ($c) => $c['rating']))])

        @if ($latestPosts->isNotEmpty())
            <section aria-labelledby="row-news">
                <div class="flex items-end justify-between gap-4">
                    <h2 id="row-news" class="text-xl font-bold text-white md:text-2xl">{{ __('movies.news_guides') }}</h2>
                    <a href="{{ lpath('/'.seg('blog')) }}" class="text-sm font-semibold text-accent hover:underline">{{ __('movies.see_all') }}</a>
                </div>
                <div class="mt-4 grid gap-6 md:grid-cols-3">
                    @foreach ($latestPosts as $post)@include($site->themeView('partials.post-card'))@endforeach
                </div>
            </section>
        @endif
    </div>
@endsection