@extends('front.layouts.app')

@section('content')
    {{-- <div class="overlay" id="overlay">
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-100">
                <div class="col-md-4 text-center text-md-start">
                    <p class="coming-soon">
                        {{ \App\Helpers\TranslationHelper::translate('This content will be available soon') }}</p>
                </div>
                <div class="col-md-4 text-center">
                    <button class="lock-btn" onclick="unlockContent()">
                        <img src="{{ asset('front/assets/img/lock.png') }}" alt="" class="img-fluid">
                    </button>
                </div>
            </div>
        </div>
    </div> --}}

    <!-- Buttons Section -->
    <!-- Buttons Section -->
    <div class="custom-buttons-section mt-5 text-center">
        <h2 data-aos="zoom-in" data-aos-duration="1000" style="color: #fff">
            {{ \App\Helpers\TranslationHelper::translate('To sell your currency now, download the apps') }}
        </h2>

        <div class="row justify-content-center mt-4">
            <!-- زر تحميل أندرويد -->
            <div class="col-md-5 mb-3 d-flex justify-content-center" style="width: 16% !important">
                <a href="#" class="d-block" style="width: 180px; height: 60px;">
                    <img src="{{ asset('front/assets/img/google.png') }}" alt="Download for Android"
                        style="width: 100%; height: 100%; object-fit: contain;  border-radius: 10px;">
                </a>
            </div>
            <!-- زر تحميل iPhone -->
            <div class="col-md-5 mb-3 d-flex justify-content-center" style="width: 16% !important">
                <a href="#" class="d-block" style="width: 180px; height: 60px; border-radius: 10px;">
                    <img src="{{ asset('front/assets/img/app.png') }}" alt="Download for iPhone"
                        style="width: 100%; height: 100%; object-fit: contain;  border-radius: 10px;">
                </a>
            </div>
        </div>
    </div>

@endsection


@push('js')
    {{-- <script>
        function unlockContent() {
            let overlay = document.getElementById("overlay");
            overlay.style.opacity = "0";

            setTimeout(() => {
                overlay.style.display = "none";
                document.getElementById("main-content").style.display = "block";
            }, 300);
        }
    </script> --}}
@endpush