<x-layouts.app>
    <!-- navigation -->
    <div class=" sticky -top-4 lg:-top-11 z-50 transition duration ease-in-out pt-4 lg:pt-11" x-data="{ atTop: false }">
        <div x-data="mobile_menu" class="w-full  sticky top-0 z-50">
            <div class="mx-auto " :class="{ 'container px-3 md:px-0 lg:px-4': !atTop }">
                <!-- glass-bg -->
                <nav class="px-2 md:px-4 py-2.5 bg-white shadow-lg shadow-[#4c4c4c30]" :class="{ 'rounded-lg': !atTop }"
                     @scroll.window="atTop = (window.pageYOffset < 50 ) ? false: true">
                    <div class="flex flex-wrap justify-between items-right mx-auto max-w-screen-xl">
                        <a href="/" class="flex items-center">
                            <img src="{{theme('/img/ghadir.png')}}" class="mr-3 h-6 sm:h-9" alt="" />
                        </a>
                        <div class="flex items-center md:order-2 relative" x-data="popup">
                            <a @click.prevent="show" href="#" class="bg-[#007f3f] text-white hover:bg-brand-800 focus:ring-4 font-bold rounded-lg text-sm px-4 py-2 md:px-8 md:py-2.5 mr-1 md:mr-2 bg-gradient-to-tr from-brand-300 to-brand-700 focus:outline-none">ورود | ثبت نام</a>
                            <button @click="toggle" type="button" class="mr-1 inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mega-menu" aria-expanded="false">
                                <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                            </button>
                        </div>
                        <div class="hidden justify-between items-center w-full text-sm md:flex md:w-auto md:order-1">
                            <ul class="flex flex-col mt-4 font-medium md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0">
                                <li>
                                    <a href="{{url('/')}}" class="block py-2 pr-4 pl-3 text-brand-500 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-brand-700 md:p-0 dark:text-brand-100 md:dark:hover:text-brand-400 dark:hover:bg-gray-700 dark:hover:text-brand-100 md:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">خانه</a>
                                </li>
                                <li>
                                    <a href="{{url('videos')}}" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-brand-500 md:p-0 dark:text-gray-400 md:dark:hover:text-brand-400 dark:hover:bg-gray-700 dark:hover:text-brand-100 md:dark:hover:bg-transparent dark:border-gray-700">دسته بندی</a>
                                </li>
                                <li>
                                    <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-brand-500 md:p-0 dark:text-gray-400 md:dark:hover:text-brand-400 dark:hover:bg-gray-700 dark:hover:text-brand-100 md:dark:hover:bg-transparent dark:border-gray-700">پخش زنده</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>

            <!-- mobile menu -->
            <div x-show="mobile_menu" class="bg-gray-600 bg-opacity-20 fixed z-40 h-screen w-screen top-0">
                <div
                    x-show="mobile_menu"
                    x-transition:enter="transition ease-in-out duration-200 transform"
                    x-transition:enter-start="translate-x-5 opacity-0"
                    x-transition:enter-end="translate-x-0 opacity-100"
                    x-transition:leave="transition ease-in-out duration-200"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="translate-x-5 opacity-0"
                    @click.away="toggle"
                    class="fixed z-50 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-disable-body-scrolling-label">
                    <h5 id="drawer-disable-body-scrolling-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">منو</h5>
                    <button @click="close" type="button" aria-controls="drawer-disable-body-scrolling" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 left-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                    </button>
                    <div class="py-4 overflow-y-auto">
                        <ul class="space-y-2">
                            <li>
                                <a href="" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <span class="ml-3">خانه</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <span class="ml-3">دسته بندی</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <span class="ml-3">پخش زنده</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--/ mobile menu -->
        </div>
    </div>
    <!-- Header Hero -->
    <div class="w-full bg-hero-pattern-sm bg-cover bg-no-repeat bg-right-center xl:max-w-[1536px] xl:px-7 xl:m-auto">
        <div class="w-full to-transparent flex relative min-h-[600px]">
            <div class="container mx-auto z-10 md:p-8 p-3 mt-20">
                <h1 class="text-white lg:text-gray-800 text-5xl pb-12 font-bold text-center lg:text-right">غدیر تی وی</h1>
                <div class="w-full block">
                    <p class="lg:w-1/2 md:w-1/2 text-white lg:text-gray-800 font-normal drop-shadow-md m-auto lg:m-0 text-center lg:text-right">پس بایسته است این سخن را حاضران به غائبان و فرزند داران به فرزندان تا برپایی رستاخیز ابلاغ کنند</p>
                </div>

                <div class="w-full flex mt-7 justify-center lg:justify-start">
                    <a href="#" class="text-white dark:text-brand-100 bg-gradient-to-t from-red-700 to-red-500 lg:from-[#ef4444b5] lg:to-[#dc2626c9]   hover:bg-gray-200 focus:ring-4  rounded-lg text-sm px-7 py-2 md:px-12 md:py-2.5 ml-1 md:ml-2 font-bold dark:bg-gray-100 dark:hover:bg-brand-300 focus:outline-none dark:focus:ring-brand-800 shadow-sm">پخش زنده</a>
                    <a href="#" class="text-gray-700 border border-white bg-gray-200 hover:bg-brand-800 lg:bg-opacity-60 focus:ring-4 focus:ring-blue-300  rounded-lg text-sm px-4 py-2 md:px-8 font-bold md:py-2.5 mr-1 md:mr-2 focus:outline-none shadow-sm">آرشیو برنامه‌ها</a>
                </div>

            </div>

            <div>
                <img src="{{theme('/img/bg/ekmal.png')}}" class="absolute w-full max-w-[700px] top-3 right-0 p-5 opacity-5 z-[1]" alt="">
                <img src="{{theme('/img/bg/intro-bg.svg')}}" class="absolute bottom-12 w-[730px] left-0 right-0 lg:right-auto m-auto lg:px-3 px-0" alt="">
                <img src="{{theme('/img/bg/ghadire-khom.png')}}" class="absolute lg:block hidden w-[730px] bottom-12 left-0 right-0 lg:right-auto m-auto lg:px-3 px-0" alt="">
            </div>
        </div>
    </div>
    <!--/ Header Hero -->

    <!-- banner -->
    <livewire:widgets.custom :widget="widget('banner_with_icon')" :view="'theme::widgets.banner_with_icon'" />
    <!--/ banner -->

    <!-- vod widget -->
    <livewire:widgets.custom :widget="widget('videos_slider')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 1-->
    <livewire:widgets.custom :widget="widget('videos_slider_1')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 2-->
    <livewire:widgets.custom :widget="widget('videos_slider_2')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 3-->
    <livewire:widgets.custom :widget="widget('videos_slider_3')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 4-->
    <livewire:widgets.custom :widget="widget('videos_slider_4')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 5-->
    <livewire:widgets.custom :widget="widget('videos_slider_5')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 6-->
    <livewire:widgets.custom :widget="widget('videos_slider_6')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- vod widget 7-->
    <livewire:widgets.custom :widget="widget('videos_slider_7')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->


    <!-- vod widget 8-->
    <livewire:widgets.custom :widget="widget('videos_slider_8')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->


    <!-- vod widget 9-->
    <livewire:widgets.custom :widget="widget('videos_slider_9')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->


    <!-- vod widget 10-->
    <livewire:widgets.custom :widget="widget('videos_slider_10')" :view="'theme::widgets.videos_slider'" />
    <!--/ vod widget -->

    <!-- banner eblagh -->
    <div class="w-full relative">
        <div class="absolute lg:w-3/5 md:w-[400px] w-3/5 top-0  left-0 rounded-tr-[140px] rounded-bl-[140px]  before:w-full before:bg-gray-300 h-full
  bg-gradient-to-b from-white to-gray-100
  z-[-1]"></div>

        <div class="container mx-auto p-4">
            <div class="flex flex-wrap lg:flex-nowrap md:flex-nowrap pt-5">
                <img src="{{theme('img/icons/ali-mola.gif')}}" class="w-[400px] -mt-4" alt="">
                <div class="px-4 z-20 ">
                    <div class="flex">
                        <h3 class="md:text-2xl text-xl text-center w-full dark:text-white text-gray-700 mb-4 font-bold mr-3">
                            <img src="{{theme('/img/vectors/eblagh-1.svg')}}" class="w-[700px] " alt="">
                        </h3>
                    </div>
                    <div class="w-full block text-gray-500 text-lg text-center leading-8">
                        <p class="z-0">پس بایسته است این سخن را حاضران به غائبان و فرزند داران به فرزندان تا برپایی رستاخیز ابلاغ کنند<p>
                    </div>
                    <div class="mt-6 z-0 flex justify-center">
                        <a href="#" class="text-[#007f3f]  border-2 border-[#007f3f] hover:bg-gray-200 font-medium rounded-lg text-sm px-8 py-2 focus:outline-none shadow-sm">بیشتر بدانید</a>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--/ banner eblagh -->

</x-layouts.app>
