@extends('layouts.dashboard')

@section('title', 'Connection Check')

@push('css')
    <style>
        .connection-warning { min-height: 58vh; display: grid; place-items: center; }
        .connection-warning-card { width: min(100%, 620px); padding: clamp(2rem, 6vw, 4rem); text-align: center; }
        .connection-warning-icon { width: 76px; height: 76px; display: inline-grid; place-items: center; border-radius: 22px; color: #ff9f43; background: rgba(255, 159, 67, .12); border: 1px solid rgba(255, 159, 67, .3); }
        .connection-warning-icon svg { width: 34px; height: 34px; }
    </style>
@endpush

@section('content')
    <div class="connection-warning">
        <section class="user-page-card connection-warning-card" aria-labelledby="connectionWarningTitle">
            <span class="connection-warning-icon mb-2"><i data-feather="shield-off"></i></span>
            <span class="user-home-eyebrow">Security check</span>
            <h1 id="connectionWarningTitle" class="loot-section-title mt-50">Proxy or VPN detected</h1>
            <p class="loot-muted mt-1 mb-2">Offers require a direct connection so providers can validate your activity. Disable the proxy or VPN, then try again.</p>
            <a href="{{ route('user.earn') }}" class="btn btn-loot"><i data-feather="refresh-cw" class="me-50"></i>Try earn page again</a>
        </section>
    </div>
@endsection
