<!-- coming-soon-page -->
<section class="relative z-1 overflow-hidden">
    <div class="container-lg">
        <div class="row justify-center">
            <div class="lg:w-1/2 w-full max-sm:mb-10 flex flex-col items-start py-50">
                <div class="btn style-1 btn-black">
                    @if ($logo_type == 'text_logo')
                    <div class="text-logo">
                        @if (!empty($logo_text))
                        <h1 class="site-title">
                            <a href="{{url( '/' )}}" title="{{$logo_title}}">
                                {{$logo_text}}
                            </a>
                        </h1>
                        @endif
                    </div>
                    @else
                    <a 
                        href="{{url( '/' )}}" 
                        title="{{$logo_title}}"
                        class="inline-flex justify-center items-center sm:w-70 sm:h-50 w-50 h-30 rounded-[50px] bg-linear-(--btn-gradient)"
                    >
                        <img src="{{$logo}}" alt="{{$logo_alt}}" class="size-full object-none" />
                    </a>
                    @endif
                </div>
                <div class="lg:max-w-600 my-auto">
                    @if(!empty($comingsoon_page_title))
                        <h2 class="xl:text-7xxl/85 md:text-5xl/50 text-4xl heading-text font-bold xl:mb-30 mb-15">{!! $comingsoon_page_title  !!}</h2>
                    @endif
                    <div class="countdown flex sm:gap-40 gap-20 mb-20" data-date="{{ $comingsoon_launch_date }}">
                        <div class="date flex flex-col items-center">
                            <span class="time sm:text-5xxl text-3xl font-semibold dark:text-white" id="day">00</span>
                            <span class="text uppercase dark:text-white max-sm:text-sm"> Days</span>
                        </div>
                        <div class="date flex flex-col items-center">
                            <span class="time sm:text-5xxl text-3xl font-semibold dark:text-white" id="hour">00</span>
                            <span class="text uppercase dark:text-white max-sm:text-sm">Hours</span>
                        </div>
                        <div class="date flex flex-col items-center">
                            <span class="time sm:text-5xxl text-3xl font-semibold dark:text-white" id="min">00</span>
                            <span class="text uppercase dark:text-white max-sm:text-sm">Minutes</span>
                        </div>
                        <div class="date flex flex-col items-center">
                            <div class="time lost sm:text-5xxl text-3xl font-semibold dark:text-white" id="second">00</div>
                            <span class="text uppercase dark:text-white max-sm:text-sm">Seconds</span>
                        </div>
                    </div>
                    @if(!empty($comingsoon_page_desc))
                        <p class="2xxl:text-lg text-base">{!! $comingsoon_page_desc !!}</p>
                    @endif
                    <form class="xl:my-40 my-30 dzSubscribe">
                        <div class="dzSubscribeMsg"></div>
                        <div class="form-group">
                            <div class="relative flex flex-wrap items-stretch w-full">
                                <input name="dzEmail" required="required" type="email" class="relative flex-1 w-[1%] h-60 py-15 px-20 text-lg !rounded-s-full bg-white border-2 border-primary placeholder:text-bodycolor" placeholder="Your Email Address">
                                <div class="-ml-px">
                                    <button name="submit" value="Submit" type="submit" class="btn btn-primary h-full !rounded-s-none px-25">
                                        <span class="md:block hidden text-lg">{{ __('Subscribe Now') }}</span>
                                        <span class="md:hidden">
                                            <i class="fa-solid fa-paper-plane"></i>
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="dz-social-icon style-4">
                    @if( $show_social_icon )
                    <ul class="flex items-center gap-10">
                        {!! get_social_icons('','border border-[#999] size-50 block text-center p-15 text-lg rounded-full hover:bg-primary duration-500 text-[#999] hover:text-black') !!}
                    </ul>
                    @endif
                    <div class="flex justify-left sm:items-center max-sm:flex-col-reverse mt-25">
                        <p>{!! $copyright_title !!}</p>
                    </div>
                </div>
            </div>
            <div class="lg:w-1/2 !px-0 max-lg:!mt-20">
                <div class="lg:w-[50vw] lg:h-screen">
                    <div class="relative h-full before:absolute before:bg-primary 2xl:before:w-150 sm:before:w-100 before:w-70 2xl:before:h-400 sm:before:h-200 before:h-160 before:top-0 before:right-0 after:absolute after:bg-secondary after:bottom-0 2xl:after:w-354 sm:after:w-300 after:w-245 2xl:after:h-287 sm:after:h-200 after:h-85 2xl:after:-left-180 after:-left-140">
                        <img class="h-full object-cover" loading="lazy" src="{{ $comingsoon_bg }}" alt="comingsoon" width="1200" height="1372">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
