@extends('front.layouts.master')

@section('meta_title', 'تحذير - رابط خارجي' . ' - ' . env('APP_NAME'))

@section('content')
<section class="page-content">
    <div class="container">
    <div class="page-404">
        <div style="margin-bottom: 24px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#19B36B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                <line x1="12" y1="9" x2="12" y2="13"/>
                <line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
        </div>
        <h2 class="title-404" style="font-size: 18px; font-weight: 700; color: #333; margin-bottom: 16px; line-height: 1.6;">
            انتبه جيداً. أنت على وشك الانتقال لموقع آخر خارج منصة ربحي
        </h2>

        <div style="padding: 18px 20px; margin-bottom: 28px; text-align: right;">
            <p style=" font-weight: 700; margin: 0 0 12px 0;">قبل المتابعة، يُرجى مراعاة الآتي:</p>
            <ul style="margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;">
                <li style="display: flex; align-items: flex-start; gap: 8px;">
                    <span style="flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #19B36B; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;">1</span>
                    <span>بيانات حسابك على ربحي سرية — لا تُدخلها في أي موقع خارجي مهما بدا موثوقاً</span>
                </li>
                <li style="display: flex; align-items: flex-start; gap: 8px;">
                    <span style="flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #19B36B; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;">2</span>
                    <span>تحقق دائماً من شريط العنوان؛ الصفحات الرسمية لربحي تبدأ بـ <strong>{{ parse_url(config('app.url'), PHP_URL_HOST) }}</strong> فقط</span>
                </li>
                <li style="display: flex; align-items: flex-start; gap: 8px;">
                    <span style="flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #19B36B; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;">3</span>
                    <span>أي تعامل مالي أو اتفاق خارج المنصة لا تغطيه ضمانات ربحي — حافظ على حقوقك وأبقِ كل شيء داخل الموقع</span>
                </li>
            </ul>
        </div>
        <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
            <a href="{{ $url }}" rel="noopener noreferrer" data-no-redirect class="btn-404" style="padding: 12px 32px; background: #19B36B; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;">
                متابعة
            </a>
            <a href="javascript:history.back()" class="btn-404" style="padding: 12px 32px; background: #f5f5f5; color: #333; text-decoration: none; font-weight: 600; font-size: 15px;border: 1px solid #ccc;">
                العودة
            </a>
        </div>
    </div>
    </div>
</section>
@endsection