@extends('.app')
@section('content')

<!-- Main Section Start -->
<section id="main" class="main active">
    <div class="main__content d-flex">
        <div class="container-fluid px-0 fullheight">
            <div class="row gx-0 gx-lg-5 fullheight">


                @if (session('message') && session('message') === 'success')
                    <!-- Reply Messages Start-->
                    <div class="reply-group subscription-ok" style="opacity: 1!important; top:20%">
                        <i class="fa-solid fa-circle-check reply-group__icon"></i>
                        <p class="reply-group__title txt-light">Done!</p>
                        <span class="reply-group__text">Thanks for subscribing. We will reach out to you soon!</span>
                    </div>
                @elseif(session('message') && session('message') === 'failed')
                    <div class="reply-group subscription-error">
                        <i class="fa-solid fa-face-frown-open reply-group__icon"></i>
                        <p class="reply-group__title">Ooops!</p>
                        <span class="reply-group__text">Something went wrong. Please try again later.</span>
                    </div>
                    <!-- Reply Messages End-->
                @endif




                <!-- Main Section Intro Start -->
                <div class="col-12 col-lg-8 main__intro">

                    <!-- Intro Content Start -->
                    <div class="intro__content">

                        <!-- Headline Start -->
                        <div id="headline" class="headline">
                            <h1 class="headline__title">
                                Introducing the<span class="text-decoration-underline">
                                    UFIC Schengen Zone</span>
                            </h1>

                            <br/>

                            <p class="headline__title text-body">
                                Our website is under construction but in the meantime<br>
                                Join our Friday<span class="text-decoration-underline">
                                    <a href="{{route('game-night', $kahootGamePin)}}" id="about-trigger3" class="navigation__link kahoot-game-link" data-ref="about">
                                        Kahoot Game Night</a>
                                </span>
                            </p>

                            <div class="headline__btnholder d-flex">
                                <a href="#0" id="about-trigger2" class="btn-bottom download">
                    <span class="circle">
                      <i class="circle__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 25 25">
                          <path fill="#393C44" d="M25,4.8V24v1h-1H3.8v-1h19.5L0,0.7L0.7,0L24,23.3V4.8H25z"/>
                        </svg>
                      </i>
                    </span>
                                    <span class="caption">Talk to us!</span>
                                </a>
                            </div>
                        </div>
                        <!-- Headline End -->

                    </div>
                    <!-- Intro Content End -->

                </div>
                <!-- Main Section Intro End -->

                <!-- Main Section Media Start -->
                <div class="col-12 col-lg-4 main__media">

                    <!-- Media Content Start -->
                    <div class="media__content border-radius-l">

                        <!-- Image Background Start -->
                        <div class="media__image"></div>
                        <!-- Image Background End -->

                        <!-- Main Section Split Swiper Slider Start -->
                        <!-- Slider main container -->

                        @for ($i = 1; $i <= 20; $i++)
                            <style>
                                .split-slide-{{ $i }} {
                                    background-image: url({{asset('emeric/img/backgrounds/'.$i.'.webp')}});
                                    background-size: cover;
                                }
                            </style>
                        @endfor

                        <div class="swiper">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                @for ($i = 1; $i <= 20; $i++)
                                    <div class="swiper-slide split-slide split-slide-{{ $i }}"></div>
                                @endfor
                            </div>
                            <!-- Pagination -->
{{--                            <div class="swiper-pagination split-slider-pagination-emeric d-flex align-items-center justify-content-center"></div>--}}
                            <!-- Navigation buttons -->
                            <div class="swiper-button-prev split-slider-btn-emeric split-slider-btn-emeric-prev">
                                <span class="circle"></span>
                                <i class="fa-solid fa-chevron-left"></i>
                            </div>
                            <div class="swiper-button-next split-slider-btn-emeric split-slider-btn-emeric-next">
                                <span class="circle"></span>
                                <i class="fa-solid fa-chevron-right"></i>
                            </div>
                        </div>
                        <!-- Main Section Split Swiper Slider End -->

                    </div>
                    <!-- Media Content End -->

                </div>
                <!-- Main Section Media End -->

                <!-- Socials Mobile Start -->
                <div class="col-12 socials-mobile border-radius-l">
                    <ul>
                        <li>
                            <a href="https://www.instagram.com/" target="_blank">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.behance.net/" target="_blank">
                                <i class="fa-brands fa-behance"></i>
                            </a>
                        </li>
                        <li>
                            <a href="https://dribbble.com/" target="_blank">
                                <i class="fa-brands fa-dribbble"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- Socials Mobile End -->

            </div>
        </div>
    </div>
</section>
<!-- Main Section End -->

<!-- Notify Popup Start -->
<div id="notify" class="popup notify">
    <div class="popup__container">

        <!-- Popup Content Start -->
        <div class="popup__content border-radius-l">
            <!-- popup close button -->
            <a id="notify-close" class="btn btn-s btn-s-icon popup-close" href="#0">
                <span class="btn__background light"></span>
                <span class="btn__text dark">
            <i class="fa-solid fa-xmark"></i>
            <em class="btn-title">Close</em>
            <em class="btn-hover">Close</em>
          </span>
            </a>

            <!-- Notify Popup Title Start -->
            <div class="popup-title">
                <p class="popup-title__title">Get to know more about <span class="text-decoration-underline">
                                    UFIC Schengen Zone</span></p>
                <p class="popup-title__text">Tell us you email address and we will reach out to you as soon as possible!</p>
            </div>
            <!-- Notify Popup Title End -->

            <!-- Notify Form Container Start -->
            <div class="form-container">


                <!-- Notify Contact Form Start-->
                <form class="form notify-form form-dark" method="post" action="{{route('newsletter')}}">
                    @csrf
                    <input class="margin-l" type="email" name="email" placeholder="Your Email" required>
                    <button class="btn btn-l" type="submit">
                        <span class="btn__background dark"></span>
                        <span class="btn__text light">
                            <em class="btn-title">Submit</em>
                            <em class="btn-hover">Submit</em>
                      </span>
                    </button>
                </form>
                <!-- Notify Contact Form End-->

            </div>
            <!-- Notify Form Container End -->

        </div>
        <!-- Popup Content End -->

    </div>
</div>
<!-- Notify Popup End -->

<!-- Contact Section Start -->
<section id="contact" class="inner contact">
    <div class="inner__content d-flex">
        <div class="container-fluid px-0 fullheight">
            <div class="row gx-0 gx-lg-5 fullheight">

                <!-- Inner Data Start -->
                <div class="col-12 col-lg-8 inner__data">

                    <!-- Inner Section Blocks Start -->
                    <div class="innerdata__blocks">

                        <!-- Scroll Blocks (Desktop) Start -->
                        <div class="blocks__scroll">

                            <!-- Inner Container - Section Title Start -->
                            <div class="blocks__container">
                                <div class="content-block">
                                    <div class="container-fluid px-0">
                                        <div class="row gx-5">
                                            <div class="col-12">
                                                <h2 class="inner__title">Shalom!</h2>
                                            </div>
                                            <div class="col-12 col-md-4">
{{--                                                <img class="inner__name" src="img/svg/section-name-contact.svg" alt="About Me">--}}
                                            </div>
                                            <div class="col-12 col-md-8">
                                                <p class="inner__text">Let's get in touch. You can call us or leave a request here.
                                                    See you soon, be Inspired child of GOD!<span> 24hrs 7 days a week</span>.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Inner Container - Section Title End -->

                            <!-- Inner Container - Contact Data Start -->
                            <div class="blocks__container">
                                <div class="content-block">
                                    <div class="container-fluid p-0">
                                        <div class="row gx-5 gy-5 align-items-stretch">
                                            <!-- contact data single item -->
                                            <div class="col-12 col-md-6 col-xl-4">
                                                <div class="contactdata__item contactdata-item-1 card-auto card-gradient border-radius-s">
                                                    <div class="contactdata__image contactdata-image-1"></div>
                                                    <div class="contactdata__title">
                                                        <h5>Location</h5>
                                                    </div>
                                                    <div class="contactdata__descr">
                                                        <p class="small">
                                                            <a class="contact-link" href="https://maps.app.goo.gl/2ZNBRRoxcy3qDoyj6" target="_blank">ALL OVER,<br>EUROPE</a>
                                                        </p>
                                                        <p class="small">
{{--                                                            <a class="contact-link" href="https://goo.gl/maps/xap5o3MZBuC6DFHz8" target="_blank">3400 Broadway,<br>Oakland, CA 94611</a>--}}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- contact data single item -->
                                            <div class="col-12 col-md-6 col-xl-4">
                                                <div class="contactdata__item contactdata-item-2 card-auto card-white border-radius-s">
                                                    <div class="contactdata__image contactdata-image-2"></div>
                                                    <div class="contactdata__title">
                                                        <h5>Learn more</h5>
                                                    </div>
                                                    <div class="contactdata__descr">
                                                        <ul class="contactdata__socials">
                                                            <li>
                                                                <a class="contact-link" href="https://emmanuelmakandiwa.com/" target="_blank">EMANNUEL MAKANDIWA</a>
                                                            </li>
                                                            <li>
                                                                <a class="contact-link" href="https://www.ufiministries.org/" target="_blank">UFIC MINISTRIES</a>

                                                            </li>
                                                            <li>
                                                                <a class="contact-link" href="https://agapefamilycare.org/" target="_blank">AGAPE FAMILY CARE</a>
                                                            </li>

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- contact data single item -->
                                            <div class="col-12 col-md-6 col-xl-4">
                                                <div class="contactdata__item contactdata-item-3 card-auto card-white border-radius-s">
                                                    <div class="contactdata__image contactdata-image-3"></div>
                                                    <div class="contactdata__title">
                                                        <h5>Contact</h5>
                                                    </div>
                                                    <div class="contactdata__descr">
                                                        <p class="small">
                                                            <a class="contact-link" href="https://chat.whatsapp.com/IlTsw7TZGNnAUOxnmY6p4B">WHATSAPP GROUP CHAT</a>
                                                            <br>
                                                            <a class="contact-link" href="tel:+49 160 92482567">Our Leader Brother Fortune +49 160 92482567</a>
                                                        </p>
                                                        <p class="small">
                                                            <a class="contact-link" href="mailto:support@uficschengen.com?subject=Message%20from%20your%20site">support@uficschengen.eu</a>
                                                            <br>
                                                            <a class="contact-link" href="mailto:shalom@uficschengen.com?subject=Message%20from%20your%20site">shalom@uficschengen.eu</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Inner Container - Contact Data End -->

                            <!-- Inner Container - Form Start -->
                            <div class="blocks__container">
{{--                                <!-- h3 title -->--}}
{{--                                <div class="content-block">--}}
{{--                                    <h3>Just say hello!</h3>--}}
{{--                                    <p class="block__text">Want to know more about my work, tell me about your project or just to say hello?--}}
{{--                                        Drop me a line and I'll get back as soon as possible.--}}
{{--                                    </p>--}}
{{--                                </div>--}}
{{--                                <!-- contact form -->--}}
{{--                                <div class="content-block">--}}
{{--                                    <div class="form-container">--}}

{{--                                        <!-- Contact Form Reply Group Start -->--}}
{{--                                        <div class="reply-group">--}}
{{--                                            <i class="fa-solid fa-circle-check reply-group__icon"></i>--}}
{{--                                            <p class="reply-group__title">Done!</p>--}}
{{--                                            <span class="reply-group__text">Thanks for your message. We will get back as soon as possible</span>--}}
{{--                                        </div>--}}
{{--                                        <!-- Contact Form Reply Group End -->--}}

{{--                                        <!-- Contact Form Start -->--}}
{{--                                        <form class="form form-dark contact-form" id="contact-form">--}}
{{--                                            <!-- Hidden Required Fields -->--}}
{{--                                            <input type="hidden" name="project_name" value="Emeric - Coming Soon & Portfolio Template">--}}
{{--                                            <input type="hidden" name="admin_email" value="support@mixdesign.club">--}}
{{--                                            <input type="hidden" name="form_subject" value="Contact Form Message">--}}
{{--                                            <!-- END Hidden Required Fields-->--}}
{{--                                            <div class="container-fluid px-0">--}}
{{--                                                <div class="row gx-5">--}}
{{--                                                    <div class="col-12 col-md-6">--}}
{{--                                                        <input type="text" name="Name" placeholder="Your Name*" required>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="col-12 col-md-6">--}}
{{--                                                        <input type="text" name="Company" placeholder="Company Name">--}}
{{--                                                    </div>--}}
{{--                                                    <div class="col-12 col-md-6">--}}
{{--                                                        <input type="email" name="E-mail" placeholder="Email Adress*" required>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="col-12 col-md-6">--}}
{{--                                                        <input type="tel" name="Phone" placeholder="Phone Number*" required>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="col-12">--}}
{{--                                                        <textarea class="margin-s" name="Message" placeholder="A Few Words*" required></textarea>--}}
{{--                                                    </div>--}}
{{--                                                    <div class="col-12">--}}
{{--                                                        <span class="inputs-description">*Required fields</span>--}}
{{--                                                        <button class="btn btn-l" type="submit">--}}
{{--                                                            <span class="btn__background dark"></span>--}}
{{--                                                            <span class="btn__text light">--}}
{{--                                  <em class="btn-title">Submit</em>--}}
{{--                                  <em class="btn-hover">Submit</em>--}}
{{--                                </span>--}}
{{--                                                        </button>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </form>--}}
{{--                                        <!-- Contact Form End  -->--}}

{{--                                    </div>--}}
{{--                                </div>--}}
                            </div>
                            <!-- Inner Container - Form End -->

                            <!-- Inner Container - Marquee Start -->
                            <div class="blocks__container">
                                <div class="decor">
                                    <!-- Marquee Start -->
                                    <a class="marquee small marquee-relative link-l-arrow" href="https://themeforest.net/user/mix_design/portfolio" target="_blank">
                                        <div class="marquee-content scroll">
                                            <span>shalom@uficschengen.eu</span>
                                            <span>shalom@uficschengen.eu</span>
                                            <span>shalom@uficschengen.eu</span>
                                            <span>shalom@uficschengen.eu</span>
                                        </div>
                                        <div class="marquee-content scroll">
                                            <span>shalom@uficschengen.eu</span>
                                            <span>shalom@uficschengen.eu</span>
                                            <span>shalom@uficschengen.eu</span>
                                            <span>shalom@uficschengen.eu</span>
                                        </div>
                                    </a>
                                    <!-- Marquee End -->
                                </div>
                            </div>
                            <!-- Inner Container - Marquee End -->

                        </div>
                        <!-- Scroll Blocks (Desktop) End -->

                    </div>
                    <!-- Inner Section Blocks End -->

                </div>
                <!-- Inner Data End -->

                <!-- Inner Media Start -->
                <div class="col-12 col-lg-4 inner__media">

                    <!-- Inner Media Content Start -->
                    <div class="innermedia__content border-radius-l">

                        <!-- Image Background Start -->
                        <div class="innermedia__image innermedia-image-3"></div>
                        <!-- Image Background End -->

                        <div class="video-background">
                            <video id="main-video" preload="auto" autoplay="autoplay" controls loop="loop" muted="muted" poster="{{asset('emeric/img/backgrounds/1000x1500-video-banner-1.webp')}}">
                                <source type="video/mp4" src="{{asset('emeric/video/prayer.mp4')}}">
                                <source type="video/webm" src="video/video-1.webm">
                                <source type="video/ogv" src="video/video-1.ogv">
                            </video>
                        </div>

                    </div>
                    <!-- Inner Media Content End -->

                </div>
                <!-- Inner Media End -->

            </div>
        </div>
    </div>
</section>
<!-- Contact Section End -->


<!-- About Me Section Start -->
<section id="about" class="inner about">
    <div class="inner__content d-flex">
        <div class="container-fluid px-0 fullheight">
            <div class="row gx-0 gx-lg-12 fullheight">

                <!-- Inner Data Start -->
                <div class="col-12 col-lg-12 inner__data">
                    <iframe style="height: 90vh" src="https://kahoot.it?pin={{$kahootGamePin}}" name="kahoot-embed" scrolling="no" frameBorder="0" allowfullscreen="allowfullscreen" width="100%" height="100%"></iframe>
                </div>
                <!-- Inner Data End -->

            </div>
        </div>
    </div>
</section>
<!-- About Me Section End -->


@endsection