@extends('theme::layouts.app', ['title' => __('account.Download Limit Reached')])

@section('content')
<main class="flex-grow flex items-center justify-center w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-20">
    <div class="max-w-md w-full text-center">
        {{-- Icon --}}
        <div class="size-20 bg-amber-50 dark:bg-amber-900/20 rounded-full flex items-center justify-center mx-auto mb-6">
            <span class="material-symbols-outlined text-[40px] text-amber-500">download_for_offline</span>
        </div>

        {{-- Heading --}}
        <h1 class="text-2xl font-bold text-text-main dark:text-white mb-3">
            {{ __('account.Daily Download Limit Reached') }}
        </h1>

        {{-- Message --}}
        <p class="text-text-muted dark:text-gray-400 mb-2 leading-relaxed">
            {{ $exception->getMessage() ?: __('account.You have reached your daily download limit for this plan.') }}
        </p>
        <p class="text-sm text-text-muted dark:text-gray-500 mb-8">
            {{ __('account.Your allowance resets at midnight. Come back tomorrow to continue downloading.') }}
        </p>

        {{-- Actions --}}
        <div class="flex flex-col sm:flex-row gap-3 justify-center">
            <a href="{{ route('frontend.account.downloads') }}"
               class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-semibold transition-all shadow-sm text-sm">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                {{ __('account.Back to Downloads') }}
            </a>
            <a href="{{ url('/') }}"
               class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-gray-200 dark:border-gray-700 text-text-main dark:text-white rounded-xl font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-all text-sm">
                <span class="material-symbols-outlined text-[18px]">home</span>
                {{ __('general.Home') }}
            </a>
        </div>
    </div>
</main>
@endsection