@extends('themes.basic.layouts.front')
@section('title', $seoConfiguration->title ?? '')
@section('content')
    @if ($themeSettings->home_page->header_section)
        <header class="header">
        <div class="wrapper">
                <div class="container">
                    <div class="wrapper-content">
                        <div class="wrapper-container">
                            <div class="row row-cols-2 align-items-center g-4">
                                <div class="col-12 col-lg-5 order-2 order-lg-1">
                                    <h1 class="header-title" data-aos="fade-right" data-aos-duration="1000">
                                        {{ translate('Upload Files & Earn Money', 'home page') }}
                                    </h1>
                                    <p class="header-text lead text-muted" data-aos="fade-right" data-aos-duration="1000">
                                        {{ translate('hero_description', 'home page') }}
                                    </p>
                                    <div data-aos="fade-up" data-aos-duration="1000">
                                        @if (subscription()->plan->upload_status)
                                            <button class="btn btn-primary btn-lg" data-upload-btn><i
                                                    class="fa-solid fa-arrow-up-from-bracket me-2"></i>{{ translate('Upload Files', 'home page') }}</button>
                                        @else
                                            <a href="{{ auth()->user() ? route('user.settings.subscription') : route('login') }}"
                                                class="btn btn-primary btn-lg"><i
                                                    class="fa-solid fa-arrow-up-from-bracket me-2"></i>{{ translate('Upload Files', 'home page') }}</a>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-12 col-lg-7 order-1 order-lg-2">
                                    <div class="header-img" data-aos="zoom-in" data-aos-duration="1000">
                                        <img src="{{ asset($themeSettings->home_page->header_image) }}"
                                            alt="{{ $settings->general->site_name }}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    @endif
    
    
    <!-- ======= Services Section ======= -->
    <section id="services" class="services section-bg">
    <div class="container">
    <div class="section-title" data-aos="fade-up">
    <h2>NeoFiles Service</h2>
    <p>
    Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam 
    quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.
    </p>
    </div>
        <div class="row">
        <div class="col-lg-4 col-md-6" data-aos="fade-up">
        <div class="icon-box">
        <div class="icon"><i class="bi bi-coin"></i></div>
        <h4 class="title">Earn Money</h4>
        <p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident</p>
        </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
        <div class="icon-box">
        <div class="icon"><i class="bi bi-cloud-upload"></i></div>
        <h4 class="title">Easy Upload Files</h4>
        <p class="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat tarad limino ata</p>
        </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
        <div class="icon-box">
        <div class="icon"><i class="bi bi-wallet2"></i></div>
        <h4 class="title">Low Minim Payout</h4>
        <p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
        </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
        <div class="icon-box">
        <div class="icon"><i class="bi bi-headset"></i></div>
        <h4 class="title">24 / 7 Support</h4>
        <p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
        <div class="icon-box">
        <div class="icon"><i class="bi bi-columns-gap"></i></div>
        <h4 class="title">Easy Dashboard</h4>
        <p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
        </div>
        </div>
        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
        <div class="icon-box">
        <div class="icon"><i class="bi bi-people"></i></div>
        <h4 class="title">Referral Program</h4>
        <p class="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi</p>
        </div>
        </div>
        </div>
        </div>
        </section>
    
    @if ($themeSettings->home_page->steps_section && $steps->count() > 0)
        <div class="section bg-work">
            <div class="container">
                <div class="section-inner">
                    <div class="section-header">
                        <h2 class="section-title">{{ translate('How it Works', 'home page') }}</h2>
                        <p class="section-text text-muted lead">{{ translate('How it Works Description', 'home page') }}
                        </p>
                    </div>
                    <div class="section-body">
                        <div class="steps">
                            <div class="steps-border">
                                <svg xmlns="http://www.w3.org/2000/svg" width="1587.904" height="309.319"
                                    viewBox="0 0 1587.904 309.319">
                                    <path id="Path_4115" data-name="Path 4115"
                                        d="M-5287.292-3794.361c49.612,33.755,149.847,128.154,198.448,135.021,25.759,3.64,32.252-19.748,19.811-35.13-10.691-13.22-33.506-12.486-39.092-7.4-11.886,10.83-49.988,78.383,19.282,101.428s150.428-36.252,310.889-8.188,150.087,128.105,330.955,120.445,392.513-151.086,392.513-151.086,169.3-39.945,176.487-84.645-78.219-15.853-49.2,7.919,226.344,114.767,226.344,114.767"
                                        transform="translate(5288.135 3795.601)" fill="none" class="stroke-color"
                                        stroke-width="3" stroke-dasharray="10" />
                                </svg>
                            </div>
                            <div class="row row-cols-1 row-cols-lg-3 g-4">
                                @php
                                    $stepCounter = 1;
                                @endphp
                                @foreach ($steps as $stepKey => $step)
                                    <div class="col" data-aos="fade-up" data-aos-duration="1000">
                                        <div
                                            class="step {{ $stepCounter == 2 ? 'step-primary step-margin' : 'step-secondary' }}">
                                            <div class="step-number">{{ $stepCounter }}</div>
                                            <h4 class="step-title">{{ $step->title }}</h4>
                                            <div class="arrow_"></div>
                                            <p class="step-text">{{ $step->body }}</p>
                                        </div>
                                    </div>
                                    @php
                                        $stepCounter++;
                                    @endphp
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    
    @if ($themeSettings->home_page->blog_section && $settings->actions->blog_status && $blogArticles->count() > 0)
        <div class="section">
            <div class="container">
                <div class="section-inner">
                    <div class="section-header">
                        <h2 class="section-title">{{ translate('Latest Blog Posts', 'home page') }}</h2>
                        <p class="section-text text-muted lead">
                            {{ translate('Latest Blog Posts Description', 'home page') }}
                        </p>
                    </div>
                    <div class="section-body">
                        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 justify-content-center g-3">
                            @foreach ($blogArticles as $post)
                                <div class="col" data-aos="fade-up" data-aos-duration="1000">
                                    @include('themes.basic.partials.blog-post', [
                                        'post' => $post,
                                    ])
                                </div>
                            @endforeach
                        </div>
                        <div class="d-flex justify-content-center mt-4" data-aos="fade-up" data-aos-duration="1000">
                            <a href="{{ route('blog.index') }}" class="btn btn-secondary btn-icon btn-md">
                                {{ translate('View All Blog Posts', 'home page') }}
                                <i class="fa fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    
    @if ($themeSettings->home_page->withdrawal_methods_section)
        <div class="section">
            <div class="container">
                <div class="section-inner">
                    <div class="section-header">
                        <h2 class="section-title">{{ translate('Withdrawal Methods', 'home page') }}</h2>
                    </div>
                    <div class="section-body">
                        <div class="swiper-container" data-aos="fade-up" data-aos-duration="1000">
                            <div class="swiper swiper-brands">
                                <div class="swiper-wrapper align-items-center">
                                    @foreach ($withdrawalMethods as $withdrawalMethod)
                                        <div class="swiper-slide">
                                            <div class="brand">
                                                <img src="{{ asset($withdrawalMethod->logo) }}"
                                                    alt="{{ $withdrawalMethod->name }}" />
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="swiper-actions">
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @include('themes.basic.includes.uploadbox')
    @push('styles_libs')
        <link rel="stylesheet" href="{{ asset('vendor/libs/aos/aos.min.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/libs/swiper/swiper-bundle.min.css') }}">
    @endpush
    @push('scripts_libs')
        <script src="{{ asset('vendor/libs/aos/aos.min.js') }}"></script>
        <script src="{{ asset('vendor/libs/swiper/swiper-bundle.min.js') }}"></script>
    @endpush
@endsection