@props([
    'videoProfileSrc',
])

<x-group
    x-data="{ width: window.innerWidth, height: window.innerHeight, profileModal: false }"
    x-on:resize.window="width = window.innerWidth; height = window.innerHeight"
    x-bind:class="(height < 400) ? 'h-[480px] py-24' : 'h-screen'"
    class="bg-gray-600 w-full bg-cover h-screen relative sm:px-12 max-sm:items-stretch -mt-12"
    style="background-image: url({{ asset('images/heroku.svg') }})"
>
    <x-box
        class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-black/70 to-white/10 z-0" />

    <x-box class="sm:hidden" />

    {{-- Welcome Message --}}
    <x-stack class="z-[1] font-bold text-white max-sm:px-6 ps-24">
        <x-text class="text-3xl sm:text-4xl font-poppins">
            Selamat Datang di Desa Bilanrengi!
        </x-text>
        <x-text class="font-light">
            Harmoni Alam dan Tradisi di Parigi, Gowa.
        </x-text>
        <a
            class="mt-6"
            href="#explore-bilanrengi"
        >
            <x-button
                variant="tertiary"
                class="gap-3 bg-tertiary-100 hover:bg-tertiary-200"
            >
                <span>Jelajahi Bilanrengi</span>
                <i class="ph ph-arrow-bend-right-down"></i>
            </x-button>
        </a>
    </x-stack>

    {{-- Video Pill --}}
    <x-group
        class="absolute bottom-0 sm:right-[10%] max-sm:w-full sm:max-w-md bg-secondary-100 h-24 sm:rounded-lg overflow-hidden z-[1]"
        x-ref="video-pill"
    >
        <span class="w-8 relative"></span>
        <x-image
            src="{{ asset('images/video-placeholder.jpg') }}"
            class="size-24 object-cover hover:cursor-pointer hover:opacity-80"
            x-on:click="profileModal = true"
        />
        <x-group class="h-full flex-1 bg-secondary-200 text-white px-8 justify-center">
            <x-stack>
                <x-text class="font-bold">Kenali Desa Bilanrengi</x-text>
                <x-text class="font-light text-gray-300">Nonton video perkenalan singkat
                    desa kami.
                </x-text>
            </x-stack>
        </x-group>
    </x-group>

    <x-modal.base
        title="Profil Desa Bilanrengi"
        model="profileModal"
        size="3xl"
        boxClass="w-full h-full relative overflow-visible"
        titleClass="[&>span]:text-lg"
    >
        <iframe
            class="w-full h-[480px] bg-slate-500 rounded"
            src="{{ $videoProfileSrc }}?autoplay=1&mute=0"
        >
        </iframe>
    </x-modal.base>
</x-group>