@php
    // receive $spotlights collection
    $items = $stations ? $stations->map(function($station){

        $title = $station->epgFeed()?->onAirAt(now())?->getTitle() ?? $station->title;
        $title = \App\Helpers\FormattingHelper::formatWithString($title);

        return (object)[
            'image' => $station->getHomepageThumbnail(),
            'url' => $station->getUrl(),
            'text' => $title,
            'sub_thumbnail' => $station->epgFeed()?->onAirAt(now())?->getBrand()?->getThumbnailForHomepage() ?? null,
            'live' => true
        ];
    }) : null;
@endphp

<x-layouts.master
    description="Premier Plus. Four Christian radio stations, live 24/7. Podcasts, music and sermons available on-demand. Never run out of quality Christian content. All completely FREE."
    :radiothons="$radiothons"
>
    <x-sections.header-home
        :items="$items"
    >
        <x-slot name="title">
            <h1 class="h3 text-white px-8">
                Experience&nbsp;Christian audio <br class="hidden sm:block lg:hidden" /> like&nbsp;never before
            </h1>
        </x-slot>
    </x-sections.header-home>

    @if (auth()->check())
        <x-recommendations.index
            recommendation-type="recommended"
            title="Discover"
            area="radio"
        />
    @else
        <x-recommendations.index
            recommendation-type="audio"
            title="Discover"
            area="radio"
        />
    @endif

    <x-promotional-blocks :promo_blocks="$promotional_blocks->take(2)" :start_purple="$promotional_blocks->take(2)->count() % 2 == 0"/>

    <x-recommendations.index-bespoke
        content-types="AudioSeries,Podcast"
        title="Trending Audio"
    />

    @php
        $remaining_two_promo_blocks = $promotional_blocks->splice(2);
    @endphp
    <x-promotional-blocks :promo_blocks="$remaining_two_promo_blocks" :start_purple="$remaining_two_promo_blocks->count() % 2 == 0"></x-promotional-blocks>

    <div class="bg-grad-explore-alt md:bg-grad-explore py-20">
        <div class="container-1 text-white pb-14">
            <h1 class="h3 md:h1 text-center">Explore</h1>
            <h4 class="h4 md:h3 py-7">Sermons</h4>

            <div class="grid grid-cols-2 text-center sm:grid-cols-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-6 gap-4 sm:gap-6 lg:gap-4 xl:gap-6">
                @foreach($sermon_themes as $sermon_theme)
                    <x-cards.thumb
                        :href="$sermon_theme->getSearchUrl()"
                        :title="$sermon_theme->title"
                        :image="$sermon_theme->getThumbnail()"
                    />
                @endforeach
            </div>
        </div>
        <div class="container-1 text-white pb-14">
            <h4 class="h4 md:h3 py-7">Music</h4>

            <div class="grid grid-cols-2 text-center sm:grid-cols-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-6 gap-4 sm:gap-6 lg:gap-4 xl:gap-6">
                @foreach($music_genres as $music_genre)
                    <x-cards.thumb
                        :href="$music_genre->getSearchUrl()"
                        :title="$music_genre->genre"
                        :image="$music_genre->getThumbnail()"
                    />
                @endforeach
            </div>
        </div>
    </div>

    <template x-if="!appRequest">
        <x-sections.footer />
    </template
</x-layouts.master>