@extends('frontend.layout.app')


@section('content')
    <!-- ======= Hero Section ======= -->
    <section id="hero" class="d-flex align-items-center">

        <div class="container">
            <div class="row">
                <div class="col-lg-6 d-lg-flex flex-lg-column justify-content-center align-items-stretch pt-5 pt-lg-0 order-2 order-lg-1"
                    data-aos="fade-up">
                    <div>
                        <h1>{{ __('title site') }}</h1>
                        <h2>{{ $landing->hero?->value['desc.' . app()->getLocale()] }}</h2>
                        <a href="{{ $settings->play_store->value }}" class="download-btn"><i class="bx bxl-play-store"></i>
                            Google Play</a>
                        <a href="{{ $settings->app_store->value }}" class="download-btn"><i class="bx bxl-apple"></i> App
                            Store</a>
                    </div>
                </div>
                <div class="col-lg-6 d-lg-flex flex-lg-column align-items-stretch order-1 order-lg-2 hero-img"
                    data-aos="fade-up">
                    <img src="{{ $landing->hero?->value['image'] }}" class="img-fluid" alt="">
                </div>
            </div>
        </div>

    </section><!-- End Hero -->




    <main id="main">

        <!-- ======= Details Section ======= -->
        <section id="details" class="details">
            <div class="container">
                @php
                    $sections = array_values(
                        array_filter($landing->sections->value, function ($section) {
                            return $section['active'] == 1;
                        }),
                    );
                @endphp
                @foreach ($sections as $key => $section)
                    <div class="row content">
                        <div class="col-md-4 {{ $key % 2 == 0 ? 'order-1 order-md-2' : '' }}"
                            data-aos="{{ $key % 2 == 0 ? 'fade-left' : 'fade-right' }}">
                            <img src="{{ $section['image'] }}" class="img-fluid" alt="">
                        </div>
                        <div class="col-md-8 pt-5 {{ $key % 2 == 0 ? 'order-2 order-md-1' : '' }}" data-aos="fade-up">
                            <h3>{{ $section['title.' . app()->getLocale()] }}</h3>
                            {{ $section['desc.' . app()->getLocale()] }}
                        </div>
                    </div>
                @endforeach

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

        <!-- ======= Gallery Section ======= -->
        <section id="gallery" class="gallery">
            <div class="container" data-aos="fade-up">

                <div class="section-title">
                    <h2>@lang('site.Gallery')</h2>
                    <p>{{ $landing->gallary->value['desc.' . app()->getLocale()] }}</p>
                </div>

            </div>

            <div class="container-fluid" data-aos="fade-up">
                <div class="gallery-slider swiper">
                    <div class="swiper-wrapper">
                        @foreach ($landing->gallary->value['images'] as $image)
                            <div class="swiper-slide"><a href="{{ $image }}" class="gallery-lightbox"
                                    data-gall="gallery-carousel"><img src="{{ $image }}" class="img-fluid"
                                        alt=""></a>
                            </div>
                        @endforeach

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

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


    </main><!-- End #main -->
@endsection