@extends('layouts.app', ['tab' => null])
@section('title', __('messages.dashboard'))

@section('content')
@php $isRtl = app()->getLocale() === 'ar'; @endphp

{{-- Welcome --}}
<section class="rounded-3xl bg-gradient-to-br from-[#111827] via-[#0d1426] to-[#0a0f1e] border border-white/5 p-6 sm:p-8 shadow-card relative overflow-hidden">
    <div class="absolute -top-20 {{ $isRtl ? '-left-20' : '-right-20' }} w-72 h-72 rounded-full bg-teal-500/10 blur-3xl pointer-events-none"></div>
    <div class="absolute -bottom-20 {{ $isRtl ? '-right-20' : '-left-20' }} w-64 h-64 rounded-full bg-blue-500/10 blur-3xl pointer-events-none"></div>

    <div class="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="text-sm text-teal-400/80 font-semibold tracking-widest uppercase">{{ __('messages.welcome') }}</div>
            <h1 class="text-2xl sm:text-3xl font-extrabold text-white mt-1">
                {{ __('messages.welcome') }} {{ $user->name }} 👋
            </h1>
            <p class="text-sm text-gray-400 mt-1">{{ __('messages.tagline') }}</p>
        </div>

        <div class="inline-flex items-center gap-2">
            @if($user->isVip())
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-br from-teal-400 to-teal-600 text-[#0a0f1e] font-extrabold text-sm shadow-teal-glow">
                    👑 VIP
                </span>
            @else
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-white/5 border border-white/10 text-gray-200 font-bold text-sm">
                    {{ __('messages.plan_free') }}
                </span>
            @endif
        </div>
    </div>
</section>

{{-- Stats --}}
<section class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mt-6">
    @php
        $stats = [
            ['label' => __('messages.your_points'), 'value' => $user->points, 'icon' => '⭐', 'color' => 'amber'],
            ['label' => __('messages.plan'),         'value' => $user->isVip() ? 'VIP' : __('messages.plan_free'), 'icon' => $user->isVip() ? '👑' : '🎯', 'color' => 'blue'],
            ['label' => __('messages.star_id'),      'value' => $user->star_verified ? '✓' : ($pendingVerification ? '…' : '✗'), 'icon' => '🛡', 'color' => $user->star_verified ? 'emerald' : ($pendingVerification ? 'blue' : 'red')],
            ['label' => __('messages.referrals'),    'value' => $referralsCount, 'icon' => '🚀', 'color' => 'violet'],
        ];
        $palette = [
            'amber'   => ['bg' => 'bg-teal-500/10',   'text' => 'text-teal-300',   'ring' => 'ring-teal-500/30'],
            'blue'    => ['bg' => 'bg-blue-500/10',    'text' => 'text-blue-300',    'ring' => 'ring-blue-500/30'],
            'emerald' => ['bg' => 'bg-emerald-500/10', 'text' => 'text-emerald-300', 'ring' => 'ring-emerald-500/30'],
            'red'     => ['bg' => 'bg-red-500/10',     'text' => 'text-red-300',     'ring' => 'ring-red-500/30'],
            'violet'  => ['bg' => 'bg-violet-500/10',  'text' => 'text-violet-300',  'ring' => 'ring-violet-500/30'],
        ];
    @endphp
    @foreach($stats as $s)
        @php $p = $palette[$s['color']]; @endphp
        <div class="rounded-2xl bg-[#111827] border border-white/5 p-4 sm:p-5 shadow-card hover:border-white/10 transition">
            <div class="flex items-center justify-between gap-3">
                <div class="text-xs font-semibold text-gray-400">{{ $s['label'] }}</div>
                <div class="w-9 h-9 rounded-xl {{ $p['bg'] }} ring-1 {{ $p['ring'] }} flex items-center justify-center text-lg">{{ $s['icon'] }}</div>
            </div>
            <div class="mt-2 text-2xl sm:text-3xl font-extrabold {{ $p['text'] }}">
                {{ $s['value'] }}
            </div>
        </div>
    @endforeach
</section>

{{-- Star ID reminder --}}
@if(!$user->star_verified && !$pendingVerification)
    <section class="mt-6 rounded-2xl border border-teal-500/30 bg-gradient-to-br from-teal-500/10 to-teal-500/5 p-5 sm:p-6">
        <div class="flex flex-col md:flex-row md:items-center gap-4">
            <div class="shrink-0 w-12 h-12 rounded-xl bg-teal-500/20 ring-1 ring-teal-500/40 flex items-center justify-center text-2xl">🛡</div>
            <div class="flex-1">
                <div class="font-bold text-teal-200">{{ __('messages.star_id_required') }}</div>
                <p class="text-sm text-teal-100/70 mt-0.5">{{ __('messages.must_register_under_agency') }}</p>
            </div>
            <a href="#" onclick="window.scrollTo({top:0, behavior:'smooth'}); return false;" class="rounded-xl btn-teal px-4 py-2 text-sm whitespace-nowrap">
                {{ __('messages.star_id_submit') }}
            </a>
        </div>
    </section>
@endif

{{-- Quick links --}}
<section class="grid sm:grid-cols-3 gap-4 mt-6">
    @php
        $links = [
            ['label' => __('messages.free_tab'), 'route' => 'services.free', 'icon' => '🎁', 'gradient' => 'from-blue-500/15 to-blue-700/5', 'ring' => 'ring-blue-500/20'],
            ['label' => __('messages.vip_tab'),  'route' => 'services.vip',  'icon' => '👑', 'gradient' => 'from-teal-500/15 to-teal-700/5', 'ring' => 'ring-teal-500/30'],
            ['label' => __('messages.ip_tab'),   'route' => 'services.referral', 'icon' => '🚀', 'gradient' => 'from-violet-500/15 to-violet-700/5', 'ring' => 'ring-violet-500/20'],
        ];
    @endphp
    @foreach($links as $l)
        <a href="{{ route($l['route']) }}" class="group rounded-2xl bg-gradient-to-br {{ $l['gradient'] }} ring-1 {{ $l['ring'] }} p-5 hover:translate-y-[-2px] transition flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center text-2xl">{{ $l['icon'] }}</div>
            <div class="flex-1">
                <div class="text-base font-bold text-white">{{ $l['label'] }}</div>
                <div class="text-xs text-gray-400 mt-0.5">{{ __('messages.tagline') }}</div>
            </div>
            <svg class="w-5 h-5 text-gray-400 group-hover:text-white transition flip-rtl" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    @endforeach
</section>
@endsection