@extends('components.layout-component')
@php
    $title = langContentNav('title');
    $seo_title = langContentNav('seo_title');
@endphp
@section('content')
<style>
    .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Adjust as needed */
    z-index: 1;
}
.swiper-slide > div {
    z-index: 2; /* Text layer */
    position: relative;
}

</style>

  <section>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">

            <!-- Slide 1 -->
            <div class="swiper-slide" style="position: relative;">
                <img style="width: 100%; height: 650px; object-fit: cover;" src="/slider/modern-buildings-with-yellow-lines.jpg">
                <div style="position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: white;">
                    <h1 style="font-size: 48px; margin-bottom: 20px;">Innovative Architecture</h1>
                    <p style="font-size: 18px; margin-bottom: 20px;">Designing the future with modern building concepts.</p>
                    <a href="#contact" style="padding: 10px 20px; background: #ffcc00; color: #000; text-decoration: none; border-radius: 5px;">Contact Us</a>
                </div>
            </div>

            <!-- Slide 2 -->
            <div class="swiper-slide" style="position: relative;">
                <img style="width: 100%; height: 650px; object-fit: cover;" src="/slider/person-using-ar-technology-perform-their-occupation.jpg">
                <div style="position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: white;">
                    <h1 style="font-size: 48px; margin-bottom: 20px;">Future Tech at Work</h1>
                    <p style="font-size: 18px; margin-bottom: 20px;">Augmented Reality empowering daily tasks.</p>
                    <a href="#learn-more" style="padding: 10px 20px; background: #ffcc00; color: #000; text-decoration: none; border-radius: 5px;">Learn More</a>
                </div>
            </div>

            <!-- Slide 3 -->
            <div class="swiper-slide" style="position: relative;">
                <img style="width: 100%; height: 650px; object-fit: cover;" src="/slider/portrait-male-engineer-working-field.jpg">
                <div style="position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: white;">
                    <h1 style="font-size: 48px; margin-bottom: 20px;">Engineering Excellence</h1>
                    <p style="font-size: 18px; margin-bottom: 20px;">Empowering innovation through engineering.</p>
                    <a href="#services" style="padding: 10px 20px; background: #ffcc00; color: #000; text-decoration: none; border-radius: 5px;">Our Services</a>
                </div>
            </div>

            <!-- Slide 4 -->
            <div class="swiper-slide" style="position: relative;">
                <img style="width: 100%; height: 650px; object-fit: cover;" src="/slider/portrait-male-engineer-working-field-engineers-day-celebration.jpg">
                <div style="position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: white;">
                    <h1 style="font-size: 48px; margin-bottom: 20px;">Celebrating Engineers</h1>
                    <p style="font-size: 18px; margin-bottom: 20px;">Recognizing the minds building our world.</p>
                    <a href="#about" style="padding: 10px 20px; background: #ffcc00; color: #000; text-decoration: none; border-radius: 5px;">About Us</a>
                </div>
            </div>

        </div>
        <div class="swiper-pagination"></div>
    </div>
</section>

    @if ($page->hiro_section && $page->hiro_section[0])
        <main>


            @php
                $hiro_section = $page->hiro_section[0];
                $title_one = langContent('title_one');
                $title_two = langContent('title_two');
                $main_image = langContent('main_image');
                $lists = $page->hiro_section[0]->list;
                $wordsArray = explode(' ', $hiro_section->$title_two);
            @endphp
            <div class="flex flex-col lg:order-1 order-2 gap-6 basis-1/2"
                data-aos="{{ App::getLocale() == 'ar' ? 'fade-left' : 'fade-right' }}">
                <div class="flex gap-3 lg:mt-0">
                    <img src="{{ asset('assets/icons/iconred.svg') }}" width="25" height="25" loading='eager'
                        data-no-lazy />
                    <div class="text-secondary lg:text-xl text-base lg:font-bold font-semibold">
                        {{ $hiro_section->$title_one }}
                    </div>
                </div>
                <h1>
                    @foreach ($wordsArray as $index => $word)
                        <span class="title-home word-animate"
                            style="transition-delay: {{ 500 + $index * 400 }}ms;">{{ $word }}</span>
                    @endforeach
                </h1>
                <div class="[&_h1]:text-base text-gray flex flex-col gap-5 justify-center">
                    @foreach ($lists as $list)
                        @php
                            $text = langContent('text');
                        @endphp
                        <div class="flex gap-2">
                            <img src="{{ asset('assets/icons/rightred.svg') }}" width="25" height="25"
                                loading='eager' data-no-lazy fetchpriority="high" />
                            <div>{{ $list->$text }}</div>
                        </div>
                    @endforeach
                </div>
                <div class="flex lg:justify-start justify-center mt-4">
                    <a href="/contact-us">
                        <button class="!hidden md:!block btn-prim-lg !bg-secondary !border-transparent animate-bounce">
                            {{ __('messages.Contact US Now') }}
                        </button>
                    </a>
                    <a href="/contact-us">
                        <button class="md:hidden btn-prim !bg-secondary !border-transparent">
                            {{ __('messages.Contact US Now') }}
                        </button>
                    </a>
                </div>

            </div>
            <style>
                @media (min-width: 1024px) {
                    .hero-image {
                        max-width: 653px;
                        max-height: 510px
                    }
                }
            </style>
            <!-- image -->
            <div class="flex lg:order-2 order-1 flex-shrink-2 lg:mb-0 mb-6">
                <img srcset="{{ $hiro_section['main_image_ar'] }} 1024w, {{ $hiro_section['small_main_image_ar'] }} 480w"
                    sizes="(max-width: 768px) 288px, (max-width: 1024px) 480px, 100vw"
                    src="{{ $hiro_section['main_image_ar'] }}" class="hero-image" loading="lazy" data-no-lazy
                    fetchpriority="high" />
            </div>
        </main>
    @endif
    @if ($page->about_platform && $page->about_platform[0])
        <section id="aboutPlatform" class="flex justify-between overflow-hidden">
            @php
                $about_platform = $page->about_platform[0];
                $short_title = langContent('short_title');
                $main_title = langContent('main_title');
                $title = $about_platform->$main_title;
                $words = explode(' ', $title);
                $last_word = end($words);
                array_pop($words);
                $title_without_last_word = implode(' ', $words);
            @endphp
            <div class="xl:block hidden w-full" data-aos="fade-left" data-aos-duration="1000" data-aos-easing="ease-in-out">
                <img class="flip h-full" width="675" height="618" src="{{ $about_platform['main_image'] }}" />
            </div>
            <div class="m-10 md:px-20 w-full" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="ease-in-out">
                <div class="text-secondary lg:text-xl text-base font-bold">
                    {{ $about_platform->$short_title }}
                </div>
                <div class="title-website mt-4">
                    {{ $title_without_last_word }}<br class="rtl:xl:block hidden" />
                    {{ $last_word }}
                </div>
                <div class="flex flex-col rtl:gap-9 gap-5 mt-6">
                    @foreach ($about_platform->list as $list)
                        @php
                            $title = langContent('title');
                            $sub_title = langContent('sub_title');
                        @endphp
                        <div class="flex gap-3">
                            <img src="{{ $list->icon }}" width="70" height="84" />
                            <div class="flex flex-col gap-2">
                                <div class="font-bold text-lg">{{ $list[$title] }}</div>
                                @if ($list[$sub_title])
                                    <div class="text-gray text-sm leading-6">{{ $list[$sub_title] }}</div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
    @if ($page->learning_with_us && $page->learning_with_us[0])
        <section id="learning_with_us" class="container-web py-12 bg-tint_primary/40 overflow-hidden">
            @php
                $learning_with_us = $page->learning_with_us[0];
                $main_title = langContent('main_title');
                $title_section = langContent('title_section');
            @endphp
            <div class="cent flex-col">
                <div class="text-secondary text-xl font-semibold capitalize">
                    {{ $learning_with_us->$main_title }}
                </div>
                <div class="title-website mt-2">{{ $learning_with_us->$title_section }}</div>
            </div>

            <div class="flex lg:flex-row flex-col w-full lg:justify-evenly gap-5 mt-8">
                @foreach ($learning_with_us->box as $index => $box)
                    @php
                        $title = langContent('title');
                    @endphp
                    <a href="{{ $box['url'] }}" class="flex flex-col items-center justify-center gap-3"
                        @if ($index == 0) data-animation="slideInRight"
                    @elseif ($index == 1)
                    data-animation="slideInUp" data-animation-delay=".3s"
                    @elseif ($index == 2)
                    data-animation="slideInDown" data-animation-delay=".6s"
                    @elseif ($index == 3)
                    data-animation="slideInLeft" data-animation-delay=".9s" @endif>
                        <img style="width: 203px;height: 203px;border-radius: 50%" src="{{ $box->image }}" />
                        <p class="text-xl text-black font-semibold">{{ $box[$title] }}</p>
                    </a>
                @endforeach
            </div>
            <div class="cent mt-8"><a href="/our-courses"><button
                        class="btn-sec">{{ __('messages.All courses') }}</button></a></div>
        </section>
    @endif
    <section class="mt-12 container-web p-4 overflow-hidden">
        <div class="cent gap-3">
            <div class="flex relative items-center flex-col">
                <div class="text-secondary text-xl font-bold capitalize">{{ __('messages.Featured Courses') }}</div>
                <div class="title-website mt-2.5">{{ __('messages.Choose a course to get started') }}</div>
                <div class="absolute rtl:md:-left-20 ltr:md:-right-20 rtl:-left-12 ltr:-right-12 items-center flex">
                    <img src="{{ asset('assets/book.svg') }}" />
                </div>
            </div>
        </div>
        <div class="grid lg:grid-cols-3 grid-cols-full gap-8 mt-8">
            @php
                $courses = Statamic\Facades\Entry::query()
                    ->where('collection', 'products')
                    ->where('published', '=', 1)
                    ->get();
                $showCount = 0;
            @endphp

            @foreach ($courses as $index => $course)
                @php
                    $dataFromTrait = App\Http\Traits\ProductPrices::getPrice($course->toArray());
                    $price = $dataFromTrait['price'] ?? null;
                    $product_price = $dataFromTrait['product_price'] ?? null;
                    $model_type = $dataFromTrait['model_type'] ?? null;
                    $model_id = $dataFromTrait['model_id'] ?? null;
                    $productCurrency = $dataFromTrait['currency'] ?? null;

                    if (!$price) {
                        continue;
                    }

                    $showCount++;
                @endphp

                @if ($showCount <= 6)
                    @livewire(
                        'card-product-component',
                        [
                            'index' => $index,
                            'price' => $price,
                            'product_price' => $product_price,
                            'model_id' => $model_id,
                            'model_type' => $model_type,
                            'productCurrency' => $productCurrency,
                            'cpProductArray' => $course->toArray(),
                        ],
                        key('card-product-component-' . mt_rand(1, 1000) . $product->id)
                    )
                @endif
            @endforeach

        </div>
    </section>
    <section class="mt-12 lg:px-20 md:px-10 px-4">
        <div class="relative cent w-full">
            <div class="bg-cover bg-center bg-no-repeat rounded-xl w-full 2xl:p-8 p-4 lg:bg-desktop-bg bg-mobile-bg bg-blend-overlay"
                style="background-color: #101115d9">
                <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-4">
                    <div
                        class="p-3 relative border-white rtl:lg:border-l ltr:lg:border-r lg:border-b-0 border-b lg:mx-0 mx-11">
                        <div>
                            <div id="numbers">
                                <p id="training_hours" data-target="+2300"
                                    class="xl:text-5xl text-3xl text-white font-bold text-center">
                                    0
                                </p>
                            </div>
                            <div>
                                <p class="text-white xl:text-lg text-base font-normal text-center mt-4 mb-4 !leading-7">
                                    {{ __("messages.Innovative courses") }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 border-white rtl:lg:border-l ltr:lg:border-r lg:border-b-0 border-b lg:mx-0 mx-11">
                        <div id="numbers">
                            <p id="work_hours" data-target="300"
                                class="xl:text-5xl text-3xl text-white font-bold text-center">
                                0
                            </p>
                        </div>
                        <div class="text-white xl:text-lg text-base font-normal text-center mt-4 mb-4 !leading-7">
                            {{ __("messages.Qualified teachers and language experts") }}
                        </div>
                    </div>

                    <div
                        class="p-3 border-white rtl:lg:border-l ltr:lg:border-r lg:border-b-0 md:border-b-0 border-b lg:mx-0 mx-11">
                        <div id="numbers">
                            <p id="training_ses" data-target="3080"
                                class="xl:text-5xl text-3xl text-white font-bold text-center">
                                0
                            </p>
                        </div>

                        <div class="text-white xl:text-lg text-base font-normal text-center mt-4 mb-4 !leading-7">
                            {{ __("messages.Learners enrolled in Radiance Group courses") }}
                        </div>
                    </div>

                    <div class="p-3 cent flex-col">
                        <div id="numbers">
                            <p data-target="15" id="training_exp"
                                class="xl:text-5xl text-3xl text-white font-bold text-center">
                                0
                            </p>
                        </div>
                        <div>
                            <p class="text-white xl:text-lg text-base font-normal text-center mt-4 !leading-7 max-w-52">
                                {{ __("messages.Years of experience in language teaching") }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

     <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
        dynamicBullets: true,
      },
    });
  </script>

    <script>
        function animateValue(obj, start, end, duration) {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = `+${Math.floor(progress * (end - start) + start)}`;
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }
        const myDemo = (function() {
            const init = function() {
                createObserver();
            };
            const createObserver = function() {
                let options = {
                    root: null,
                    threshold: 1,
                };
                let observer = new IntersectionObserver(function(entries, observer) {
                    handleIntersect(entries, observer);
                }, options);
                let targetElements = document.querySelectorAll("#numbers");
                targetElements.forEach((targetElement) => {
                    observer.observe(targetElement);
                });
            };
            const handleIntersect = function(entries, observer) {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const trainingHours = document.getElementById("training_hours");
                        const workHours = document.getElementById("work_hours");
                        const trainingSes = document.getElementById("training_ses");
                        const training_exp = document.getElementById("training_exp");
                        animateValue(trainingHours, 0, 2300, 5000);
                        animateValue(workHours, 0, 330, 5000);
                        animateValue(trainingSes, 0, 3080, 5000);
                        animateValue(training_exp, 0, 15, 5000);
                        observer.unobserve(entry.target);
                    }
                });
            };
            return {
                init: init,
            };
        })();
        myDemo.init();

        //
        document.addEventListener("DOMContentLoaded", function() {
            initializeButtons();
        });

        //Animate
        const AnimateOnScroll = function({
            offset
        } = {
            offset: 10
        }) {
            const windowTop = (offset * window.innerHeight) / 100;
            const windowBottom = window.innerHeight - windowTop;
            const windowLeft = 0;
            const windowRight = window.innerWidth;

            let elements;

            this.start = (element) => {
                window.requestAnimationFrame(() => {
                    element.style.animationDelay = element.dataset.animationDelay || '0s';
                    element.style.animationDuration = element.dataset.animationDuration || '1s';
                    element.classList.add(element.dataset.animation);
                    element.dataset.animated = "true";
                });
            };

            this.inViewport = (element) => {
                const elementRect = element.getBoundingClientRect();
                const elementTop =
                    elementRect.top + (parseInt(element.dataset.animationOffset) || 0);
                const elementBottom =
                    elementRect.bottom - (parseInt(element.dataset.animationOffset) || 0);
                const elementLeft = elementRect.left;
                const elementRight = elementRect.right;

                return (
                    elementTop <= windowBottom &&
                    elementBottom >= windowTop &&
                    elementLeft <= windowRight &&
                    elementRight >= windowLeft
                );
            };

            this.verifyElementsInViewport = (els = elements) => {
                if (!els || els.length === 0) {
                    return;
                }

                for (let i = 0, len = els.length; i < len; i++) {
                    if (els[i].dataset.animated) continue;
                    this.inViewport(els[i]) && this.start(els[i]);
                }
            };

            this.getElements = () =>
                document.querySelectorAll("[data-animation]:not([data-animated])");

            this.update = () => {
                elements = this.getElements();
                if (elements && elements.length > 0) {
                    this.verifyElementsInViewport(elements);
                }
            };

            window.addEventListener("load", this.update, false);
            window.addEventListener(
                "scroll",
                () => this.verifyElementsInViewport(elements), {
                    passive: true
                }
            );
            window.addEventListener(
                "resize",
                () => this.verifyElementsInViewport(elements), {
                    passive: true
                }
            );
        };
        const options = {
            offset: 15
        };
        const animation = new AnimateOnScroll(options);
    </script>
@endsection