@extends('main-site.partials.app')

@section('title', __('Click and Learn'))

@section('content')

    @include('main-site.hero-section')

    <!-- About -->
    <section class="about-section sec-padding position-relative wow fadeInUp">
        <div class="container">
            <div class="row gx-lg-6">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="about-img position-relative">
                        <img src="{{ asset('main-site/assets/img/about.png') }}" class="img-fluid" alt="About">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="section-title">

                           <h2>{{ __("website.home.StartYourJourney") }}</h2>
                        </div>
                        <div class="d-flex gap-3 align-items-start mb-4">
                            <img src="{{ asset('main-site/assets/img/icons/focus.png') }}" alt="">
                            <p class="mb-0">{{ __("website.home.ExploreDiverseMaterials") }}</p>

                        </div>
                        <div class="d-flex gap-3 align-items-start mb-4">
                            <img src="{{ asset('main-site/assets/img/icons/graduation cap.png') }}" alt="">
                            <p class="mb-0">{{ __("website_301.home.ExploreDiverseMaterials4") }}</p>

                        </div>
                        <div class="d-flex gap-3 align-items-start mb-0">
                            <img src="{{ asset('main-site/assets/img/icons/globe.png') }}" alt="">
                            <p class="mb-0">{{ __("website_301.home.ExploreDiverseMaterials5") }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="shape1"></div>
        <div class="shape2"></div>
    </section>

    <!-- courses section -->
    <div class="courses-section sec-padding wow fadeInUp">
        <div class="container">
            <div class="section-title d-flex align-items-center justify-content-between gap-3 flex-wrap">
                <h2>{{ __("website_301.home.RecommendedCourses") }}</h2>
                <a href="{{ route('courses') }}">{{ __("website_301.home.ViewMore") }}</a>
            </div>
            <div class="row">

                @if (count($related_courses))
                    @foreach ($related_courses as $course)
                        @include('main-site.partials.course', ['course' => $course])
                    @endforeach
                @else
                    @include('main-site.partials.empty_data', [
                        'message' => __("website_301.home.RecommendedCourses2"),
                    ])
                @endif

            </div>

        </div>
    </div>

    <!-- About -->
    <section class="about-section sec-padding sec-padding-top wow fadeInUp">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 mb-4 mb-lg-0">
                    <div class="about-content">
                        <div class="section-title">
                            <h2>{{ __('website_301.home.Offers1') }}<br>{{ __('website_301.home.Offers2') }}</h2>
                        </div>
                        <p>
                            {{ __("website_301.home.Offers3") }}
                        </p>
                        <p>
                            {{ __("website_301.home.Offers4") }}

                        </p>
                        <p>
                            {{ __("website_301.home.Offers5") }}

                        </p>
                        <a href="{{ route('offers.index') }}" class="main-btn">{{ __("website_301.home.Offers6") }}</a>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div>
                        <img src="{{ asset('main-site/assets/img/ex-offer.png') }}" class="img-fluid" alt="About">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- cta section -->
    <div class="cta-section position-relative sec-padding wow fadeInUp">
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8 text-center">
                    <h2 class="title mb-3">{{ __("website_301.home.Cta1") }}</h2>
                    <p class="mb-4">{{ __("website_301.home.Cta2") }}</p>
                    @auth
                        <a href="{{ route('posts') }}" class="main-btn white">
                            {{ __("website_301.home.Cta4") }}
                            </a>
                    @else
                        <a href="{{ route('login') }}" class="main-btn white">
                            {{ __("website_301.home.Cta5") }}
                        </a>
                    @endauth
                </div>
            </div>
        </div>
    </div>

    <!-- Explore -->
    <section class="explore-section about-section sec-padding sec-padding-top wow fadeInUp">
        <div class="container">
            <div class="row align-items-center gx-lg-6">
                <div class="col-lg-5 mb-4 mb-lg-0">
                    <div>
                        <img src="{{ asset('main-site/assets/img/explore.png') }}" class="img-fluid" alt="About">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="about-content">
                        <div class="section-title">
                            <h2>{{ __("website_301.home.Explore1") }}</h2>
                        </div>
                        <p class="mb-4">
                                {{ __("website_301.home.Explore2") }}
                        </p>
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <i class="icon-check-circle"><span class="path1"></span><span class="path2"></span></i>
                            <p class="mb-0">{{ __("website_301.home.Explore3") }}</p>
                        </div>
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <i class="icon-check-circle"><span class="path1"></span><span class="path2"></span></i>
                            <p class="mb-0">{{ __("website_301.home.Explore5") }}</p>
                        </div>
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <i class="icon-check-circle"><span class="path1"></span><span class="path2"></span></i>
                            <p class="mb-0">{{ __("website_301.home.Explore6") }}</p>
                        </div>
                        <a href="{{ auth()->check() ? route('courses') : route('login') }}"
                            class="main-btn mt-4">{{ __("website_301.home.Explore4") }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial -->
    <section class="testimonial-section sec-padding wow fadeInUp">
        <div class="container">
            <div class="section-title text-center">
                <h2><span>{{ __("website_301.home.About1") }}</span>{{ __("website_301.home.About2")}}</h2>
                <p class="mb-0">{{ __("website_301.home.About3")}}</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-xl-6 col-md-10">
                    <div class="testimonial-slider owl-theme owl-carousel">
                        @foreach ($reviews as $review)
                            <div class="testi-card d-flex">
                                <div class="testi-img">
                                    <img src="{{ asset($review->image) }}" alt="" class="img-fluid">
                                </div>
                                <div class="testi-content">
                                    <div class="text-end mb-1">
                                        <svg width="34" height="31" viewBox="0 0 34 31" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M14.149 4.69975C12.4823 6.36642 11.0157 8.33309 9.749 10.5998C8.549 12.7998 7.71567 15.0664 7.249 17.3998C7.51567 17.3331 7.98233 17.2998 8.649 17.2998C10.1157 17.2998 11.349 17.8998 12.349 19.0998C13.4157 20.2331 13.949 21.6998 13.949 23.4998C13.949 25.5664 13.3157 27.2664 12.049 28.5998C10.7823 29.8664 9.11567 30.4998 7.049 30.4998C4.98233 30.4998 3.31567 29.7331 2.049 28.1998C0.782333 26.6664 0.148999 24.4998 0.148999 21.6998C0.148999 18.0998 1.08233 14.3664 2.949 10.4998C4.81567 6.56642 7.349 3.26642 10.549 0.599754L14.149 4.69975ZM28.249 17.2998C29.7823 17.2998 31.049 17.8998 32.049 19.0998C33.1157 20.2331 33.649 21.6998 33.649 23.4998C33.649 25.5664 33.0157 27.2664 31.749 28.5998C30.4823 29.8664 28.8157 30.4998 26.749 30.4998C24.6157 30.4998 22.9157 29.7331 21.649 28.1998C20.3823 26.6664 19.749 24.4998 19.749 21.6998C19.749 18.1664 20.6823 14.4331 22.549 10.4998C24.4157 6.56642 26.949 3.26642 30.149 0.599754L33.749 4.69975C32.0823 6.36642 30.649 8.33309 29.449 10.5998C28.249 12.7998 27.4157 15.0664 26.949 17.3998C27.2157 17.3331 27.649 17.2998 28.249 17.2998Z"
                                                fill="#530F0F" fill-opacity="0.5" />
                                        </svg>
                                    </div>
                                    <p>
                                        {{ $review->review }}
                                    </p>
                                    <div class="mt-1">
                                        <svg width="34" height="31" viewBox="0 0 34 31" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M19.851 26.2998C21.5177 24.6331 22.9843 22.6664 24.251 20.3998C25.451 18.1998 26.2843 15.9331 26.751 13.5998C26.4843 13.6664 26.0177 13.6998 25.351 13.6998C23.8843 13.6998 22.651 13.0998 21.651 11.8998C20.5843 10.7664 20.051 9.29976 20.051 7.49976C20.051 5.43309 20.6843 3.73309 21.951 2.39976C23.2177 1.13309 24.8843 0.499757 26.951 0.499757C29.0177 0.499757 30.6843 1.26642 31.951 2.79976C33.2177 4.33309 33.851 6.49976 33.851 9.29976C33.851 12.8998 32.9177 16.6331 31.051 20.4998C29.1843 24.4331 26.651 27.7331 23.451 30.3998L19.851 26.2998ZM5.751 13.6998C4.21766 13.6998 2.951 13.0998 1.951 11.8998C0.884333 10.7664 0.351 9.29976 0.351 7.49976C0.351 5.43309 0.984333 3.73309 2.251 2.39975C3.51767 1.13309 5.18433 0.499755 7.251 0.499755C9.38433 0.499755 11.0843 1.26642 12.351 2.79976C13.6177 4.33309 14.251 6.49976 14.251 9.29976C14.251 12.8331 13.3177 16.5664 11.451 20.4998C9.58433 24.4331 7.051 27.7331 3.851 30.3998L0.250996 26.2998C1.91766 24.6331 3.351 22.6664 4.551 20.3998C5.751 18.1998 6.58433 15.9331 7.051 13.5998C6.78433 13.6664 6.351 13.6998 5.751 13.6998Z"
                                                fill="#530F0F" fill-opacity="0.5" />
                                        </svg>
                                    </div>
                                    <h3 class="user-name">{{ $review->name }}</h3>
                                    <p class="user-title mb-0">{{ $review->job }}</p>
                                </div>
                            </div>
                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection