@extends('layouts.app', ['tab' => 'vip'])
@php
    $isRtl = app()->getLocale() === 'ar';
    $title       = $isRtl ? setting('vip_locked_title_ar', __('messages.vip_locked')) : setting('vip_locked_title_en', __('messages.vip_locked'));
    $desc        = $isRtl ? setting('vip_locked_desc_ar', __('messages.must_register_under_agency')) : setting('vip_locked_desc_en', __('messages.must_register_under_agency'));
    $depositNote = $isRtl ? setting('deposit_note_ar', '') : setting('deposit_note_en', '');
    $whatsapp    = setting('whatsapp_number', '');
    $agencyLink  = setting('agency_link', '');
    $points = (int) ($user->points ?? 0);
    $progress = max(0, min(100, $points));
    $canRedeem = $points >= 100;
@endphp
@section('title', $title)

@section('content')
<section class="rounded-3xl bg-gradient-to-br from-[#1a1206] via-cardapp to-bgapp border border-teal-500/30 p-6 sm:p-10 shadow-card text-center relative overflow-hidden">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(38,166,154,0.18),transparent_60%)] pointer-events-none"></div>

    <div class="relative">
        <div class="mx-auto w-20 h-20 rounded-2xl bg-gradient-to-br from-teal-400 to-teal-700 flex items-center justify-center text-3xl shadow-teal-glow animate-pulse-teal">
            🔒
        </div>
        <h1 class="text-2xl sm:text-3xl font-extrabold teal-text mt-5">{{ $title }}</h1>
        <p class="text-sm text-gray-300 max-w-xl mx-auto mt-2">{{ $desc }}</p>
        @if($depositNote)
            <p class="text-xs text-teal-300/80 mt-1">{{ $depositNote }}</p>
        @endif
    </div>
</section>

<section class="grid md:grid-cols-2 gap-4 sm:gap-5 mt-6">
    <div class="rounded-2xl bg-cardapp border border-white/5 p-6 shadow-card flex flex-col">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-10 h-10 rounded-xl bg-blue-500/15 ring-1 ring-blue-500/30 flex items-center justify-center text-xl">💼</div>
            <div>
                <div class="text-xs font-semibold text-blue-300 uppercase tracking-wider">Way 1</div>
                <div class="font-bold text-white">{{ __('messages.upgrade_to_vip') }}</div>
            </div>
        </div>
        <p class="text-sm text-gray-400 mb-5">{{ __('messages.contact_admin') }}</p>

        <div class="mt-auto flex flex-col gap-2">
            @if($whatsapp)
                <a href="https://wa.me/{{ ltrim($whatsapp, '+') }}" target="_blank" rel="noopener"
                   class="inline-flex items-center justify-center gap-2 rounded-xl py-3 text-sm font-bold bg-emerald-500 hover:bg-emerald-400 text-[#062a1f] transition">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488 11.821 11.821 0 013.48 8.414c-.003 6.557-5.34 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.62 5.397l-.999 3.648 3.868-1.018z"/></svg>
                    WhatsApp
                </a>
            @endif
            @if($agencyLink)
                <a href="{{ $agencyLink }}" target="_blank" rel="noopener"
                   class="inline-flex items-center justify-center gap-2 rounded-xl py-3 text-sm font-bold bg-blue-500/15 hover:bg-blue-500/25 text-blue-300 border border-blue-500/30 transition">
                    🔗 {{ __('messages.upgrade_to_vip') }}
                </a>
            @endif
        </div>
    </div>

    <div class="rounded-2xl bg-gradient-to-br from-[#1a1206] to-cardapp border border-teal-500/30 p-6 shadow-card flex flex-col relative overflow-hidden">
        <div class="absolute -top-12 -right-12 w-40 h-40 rounded-full bg-teal-500/10 blur-2xl"></div>
        <div class="relative">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-xl bg-teal-500/15 ring-1 ring-teal-500/30 flex items-center justify-center text-xl">🚀</div>
                <div>
                    <div class="text-xs font-semibold text-teal-300 uppercase tracking-wider">Way 2</div>
                    <div class="font-bold text-white">{{ __('messages.redeem_points') }}</div>
                </div>
            </div>
            <p class="text-sm text-gray-400 mb-4">{{ $isRtl ? setting('ip_step3_ar', __('messages.ip_step3')) : setting('ip_step3_en', __('messages.ip_step3')) }}</p>

            <div class="mb-2 flex items-center justify-between text-sm">
                <span class="font-semibold text-teal-200">{{ $points }} / 100</span>
                <span class="text-xs text-gray-400">{{ __('messages.your_points') }}</span>
            </div>
            <div class="h-2.5 rounded-full bg-white/5 overflow-hidden">
                <div class="h-full bg-gradient-to-r from-teal-400 to-teal-600 rounded-full transition-all" style="width: {{ $progress }}%"></div>
            </div>

            @if($canRedeem)
                <form method="POST" action="{{ route('referral.redeem') }}" class="mt-5">
                    @csrf
                    <button class="w-full rounded-xl btn-teal py-3 text-sm shadow-teal-glow animate-pulse-teal">
                        ⚡ {{ __('messages.redeem_points') }}
                    </button>
                </form>
            @else
                <a href="{{ route('services.referral') }}" class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl py-2.5 text-sm font-bold bg-white/5 hover:bg-white/10 text-teal-200 border border-teal-500/20 transition">
                    🔗 {{ __('messages.your_referral_link') }}
                </a>
            @endif
        </div>
    </div>
</section>
@endsection