@extends('Common::site.layouts.landing')

@section('title', __('Move Up - Playing Has Become Easier'))

@section('content')

<!-- Hero Section -->
<section id="hero" class="hero-section">
    <div class="hero-bg-shape"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 pe-lg-5" data-sal="slide-right">
                <h1 class="hero-title">@lang('Playing Has Become')<br>@lang('Easier With MOVE UP')</h1>
                <p class="hero-desc">
                    @lang("whether you have a team or not, join the match that suits you and get on the field under the supervision of one of move up's organizers")
                </p>
                <div class="hero-buttons">
                    <a href="#" class="store-btn">
                        <img src="{{asset('site/images/download/Apple.png')}}" alt="App Store" />
                    </a>
                    <a href="#" class="store-btn">
                        <img src="{{asset('site/images/download/Google.png')}}" alt="Google Play" />
                    </a>
                </div>
            </div>
            <div class="col-lg-6 ps-lg-4" data-sal="slide-left">
                <div class="hero-images">
                    <img src="{{asset('site/images/app/924shots_so 1.png')}}" class="phone-mockup phone-back" alt="App Screen" />
                    <img src="{{asset('site/images/app/578shots_so 3.png')}}" class="phone-mockup phone-front" alt="App Screen" />
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About App Section -->
<section id="about" class="about-section">
    <div class="container">
        <h2 class="sec-title" data-sal="fade">@lang('About App')</h2>
        
        <div class="app-slider">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="app-screen">
                            <img src="{{asset('site/images/app/184shots_so 1.png')}}" alt="Screen 1" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="app-screen">
                            <img src="{{asset('site/images/app/403shots_so 2.png')}}" alt="Screen 2" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="app-screen">
                            <img src="{{asset('site/images/app/578shots_so 3.png')}}" alt="Screen 3" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="app-screen">
                            <img src="{{asset('site/images/app/924shots_so 1.png')}}" alt="Screen 4" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="app-screen">
                            <img src="{{asset('site/images/app/912shots_so 1.png')}}" alt="Screen 5" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="app-screen">
                            <img src="{{asset('site/images/app/403shots_so 2.png')}}" alt="Screen 6" />
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            
            <div class="swiper-button-prev swiper-btn">
                <i class="las la-arrow-left"></i>
            </div>
            <div class="swiper-button-next swiper-btn">
                <i class="las la-arrow-right"></i>
            </div>
        </div>
    </div>
</section>

<!-- Features Section (CTA) -->
<section id="features">
    <div class="cta-section m-0 rounded-0 w-100" data-sal="zoom-in">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <h2 class="cta-title">@lang('Ready To Get Started?')</h2>
                    <p class="cta-desc">@lang('Join thousands of players and start your journey today with Move Up').</p>
                    <div class="hero-buttons">
                        <a href="#" class="store-btn">
                            <img src="{{asset('site/images/download/Google.png')}}" alt="App Store" />
                        </a>
                        <a href="#" class="store-btn">  <img src="{{asset('site/images/download/Apple.png')}}" alt="Google Play" />
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                    <img src="{{asset('site/images/app/440shots_so 2.png')}}" alt="App Preview" class="img-fluid rounded-5 shadow-lg" />
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
    var swiper = new Swiper(".mySwiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        loop: true,
        coverflowEffect: {
            rotate: 0,
            stretch: -60,
            depth: 150,
            modifier: 1,
            slideShadows: false,
        },
        navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
        pagination: { el: ".swiper-pagination", clickable: true },
        breakpoints: {
            320: { slidesPerView: 1.5 },
            768: { slidesPerView: 3 },
            1200: { slidesPerView: 5 }
        }
    });
</script>
@endsection