@props([
    'station',
    'sponsor' => null
])

@php
    switch($station->id) {
        case(1):
            $gradient = 'bg-grad-brand-radio';
            $logo = 'brand-radio';
            $height = 'sm:max-h-[100px] max-h-[50px]';
        break;
        case(2):
            $gradient = 'bg-grad-brand-praise';
            $logo = 'brand-praise';
            $height = 'sm:max-h-[130px] max-h-[65px]';
        break;
        case(3):
            $gradient = 'bg-grad-brand-gospel';
            $logo = 'brand-gospel';
            $height = 'sm:max-h-[130px] max-h-[65px]';
        break;
        case(4):
            $gradient = 'bg-grad-brand-teaching';
            $logo = 'brand-teaching';
            $height = 'sm:max-h-[130px] max-h-[65px]';
        break;
        case(5):
            $gradient = 'bg-grad-brand-christmas';
            $logo = 'brand-christmas-open-doors';
            $height = 'sm:max-h-[210px] max-h-[200px]';
        break;
    }

    $logoMargin = ($sponsor?->position === 'bottom') ? 'mb-4' : 'mb-8';
@endphp

<div class="{{ $gradient }} relative">
    <div class="overflow-hidden">
        <div class="container-2 relative">
            <div class="absolute inset-0">
                @switch($station->id)
                    @case(1)
                        <x-icon name="header-radio-christian-bg" class="opacity-70 block md:hidden h-[170%] w-auto absolute top-0 bottom-0 left-[50%]  translate-y-[15%] translate-x-[-50%]" />
                        <x-icon name="header-radio-christian-bg" class="hidden md:block h-[170%] w-auto absolute top-0 bottom-0 left-0  translate-y-[-50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-christian-bg" class="hidden md:block h-[170%] w-auto absolute top-0 bottom-0 right-0 translate-y-[10%] translate-x-[50%]" />
                        @break
                    @case(2)
                        <x-icon name="header-radio-praise-bg" class="opacity-70 block md:hidden h-[140%] w-auto absolute top-0 bottom-0 left-[50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-praise-bg" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 left-0  translate-x-[-40%] lg:translate-x-[-30%] xl:translate-x-[-20%]" />
                        <x-icon name="header-radio-praise-bg" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 right-0 translate-x-[40%] lg:translate-x-[30%] xl:translate-x-[20%]" />
                        @break
                    @case(3)
                        <x-icon name="header-radio-gospel-bg" class="opacity-70 block md:hidden h-[170%] w-auto absolute top-0 bottom-0 left-[50%]  translate-y-[40%] translate-x-[-60%] sm:translate-x-[-50%]" />
                        <x-icon name="header-radio-gospel-bg" class="hidden md:block h-[130%] w-auto absolute top-0 bottom-0 left-0  translate-y-[40%] translate-x-[-40%]" />
                        <x-icon name="header-radio-gospel-bg" class="hidden md:block h-[130%] w-auto absolute top-0 bottom-0 right-0 translate-y-[40%] translate-x-[40%]" />
                        @break
                    @case(4)
                        <x-icon name="header-radio-teaching-bg-a" class="opacity-70 block md:hidden h-[140%] w-auto absolute top-0 bottom-0 left-[50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-teaching-bg-a" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 left-0  translate-y-[-20%] translate-x-[-40%] lg:translate-x-[-30%] xl:translate-x-[-20%]" />
                        <x-icon name="header-radio-teaching-bg-b" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 right-0 translate-y-[40%] translate-x-[40%] lg:translate-x-[30%] xl:translate-x-[20%]" />
                        @break
                    @case(5)
                        <x-icon name="header-radio-christmas-bg-c" class="opacity-60 block md:hidden h-[140%] w-auto absolute top-0 bottom-0 left-[50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-christmas-bg-a" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 left-0 translate-x-[-35%] lg:translate-x-[-10%] xl:translate-x-[-0%] " />
                        <x-icon name="header-radio-christmas-bg-b" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 right-0 translate-y-[15%] lg:translate-x-[20%] translate-x-[0%] xl:translate-x-[10%] md:translate-x-[40%]" />
                        @break
                @endswitch
            </div>

            <x-sections.header-top
                :is-contained="false"
                donate-btn="btn-purple"
                :donate="$station->donate_link"
            />

            <div class="
                container-1 flex items-center relative -mt-6
                {{ (!$sponsor || $sponsor?->position === 'bottom') ? 'flex-col' : 'flex-row justify-center' }}
                {{ $station->hasSchedule() ? 'min-h-[280px] '. ($sponsor ? 'pb-20' : '') : 'min-h-[230px]' }}
            ">
                <div class="{{ !$sponsor ? 'w-full flex justify-center' : 'flex max-w-[50%]' }}">
                    <x-icon :name="$logo" class="text-white {{ $height }} {{ $logoMargin }} self-start" />
                </div>
                @if($sponsor && $sponsor->position === 'right')
                    <div class="{{ $station->id === 2 ? 'ml-5' : '' }} flex flex-col items-center">
                        <p class="text-white font-semibold text-sm italic">{{ $sponsor->preface_text }}</p>
                        <img src="{{ Storage::url($sponsor->image) }}" alt="sponsor" class="w-32">
                    </div>
                @endif
                @if($sponsor && $sponsor->position === 'bottom')
                    <div class="flex items-center">
                        <p class="text-white font-semibold text-sm italic mr-3">{{ $sponsor->preface_text }}</p>
                        <img src="{{ Storage::url($sponsor->image) }}" alt="sponsor" class="w-32">
                    </div>
                @endif
            </div>
        </div>
    </div>

    @if ($station->hasSchedule())
        <div
            x-data="{
                coverArtUrl: '',
                setCoverArt(event) { this.coverArtUrl = event.detail.image },
                updated: false,
            }"
            @headercoverart.window="setCoverArt"
            @recommendations-updated.window="updated = true"
            class="absolute bottom-0 left-[50%] aspect-square w-36 translate-y-3 translate-x-[-50%]"
        >
            <div class="inset-0 absolute bg-center bg-cover" :style="`background-image: url('${coverArtUrl}')`"></div>
        </div>
    @endif
</div>