<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu prueba terminó — Credify GO!</title>
    <meta name="robots" content="noindex">
    @vite(['resources/css/app.css'])
    <style>
        .gradient-text {
            background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 60%, #6366f1 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .glass {
            background: rgba(255,255,255,0.78);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,0.55);
        }
    </style>
</head>
<body class="text-slate-900 antialiased font-sans overflow-x-hidden">

<div class="relative min-h-screen bg-linear-to-br from-slate-50 via-teal-50/60 to-cyan-50/70 overflow-hidden">
<div class="absolute top-10 left-[10%] w-[420px] h-[420px] rounded-full bg-teal-400/15 blur-3xl pointer-events-none"></div>
<div class="absolute bottom-0 right-[8%] w-80 h-80 rounded-full bg-cyan-400/15 blur-3xl pointer-events-none"></div>

<!-- Top bar -->
<header class="max-w-4xl mx-auto px-4 pt-6 flex items-center justify-between">
    <a href="/" class="flex items-center gap-2.5">
        <div class="w-8 h-8 rounded-xl bg-linear-to-br from-teal-500 to-cyan-600 flex items-center justify-center shadow-md shadow-teal-300/40">
            <svg style="width:18px;height:18px" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
            </svg>
        </div>
        <span class="font-bold text-slate-900 tracking-tight text-lg">Credify <span class="gradient-text font-extrabold">GO!</span></span>
    </a>
    <form method="POST" action="{{ route('filament.admin.auth.logout') }}">
        @csrf
        <button type="submit" class="text-sm text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1.5 cursor-pointer">
            Cerrar sesión
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l3 3m0 0l-3 3m3-3H2.25"/></svg>
        </button>
    </form>
</header>

<main class="max-w-4xl mx-auto px-4 py-8 md:py-12 grid lg:grid-cols-[1.1fr_0.9fr] gap-8 items-start">

    <!-- ===== ACCIÓN ===== -->
    <div class="glass rounded-3xl shadow-xl shadow-slate-200/50 p-6 sm:p-8 order-2 lg:order-1">
        <div class="w-12 h-12 rounded-2xl bg-amber-100 flex items-center justify-center mb-5">
            <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/></svg>
        </div>

        <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-slate-900 mb-2">Tu prueba terminó</h1>
        <p class="text-slate-500 mb-6">
            @if($company)
                La prueba de <strong class="text-slate-700">{{ $company->name }}</strong> finalizó.
            @endif
            Para seguir usando Credify GO! y no perder tus datos, activa tu suscripción.
        </p>

        @if(session('status') === 'sent')
            <div class="rounded-2xl bg-teal-50 border border-teal-200 px-5 py-4 mb-4" role="status">
                <p class="font-semibold text-teal-800 flex items-center gap-2">
                    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                    ¡Recibimos tu solicitud!
                </p>
                <p class="text-sm text-teal-700 mt-1">Nuestro equipo te contactará muy pronto para activar tu plan. Tus datos están a salvo.</p>
            </div>
        @elseif(session('status') === 'pending' || $hasPending)
            <div class="rounded-2xl bg-blue-50 border border-blue-200 px-5 py-4 mb-4" role="status">
                <p class="font-semibold text-blue-800">Ya tienes una solicitud en revisión</p>
                <p class="text-sm text-blue-700 mt-1">Estamos procesándola. Te contactaremos para activar tu suscripción.</p>
            </div>
        @else
            <form method="POST" action="{{ route('subscription.request') }}">
                @csrf
                <button type="submit"
                        class="w-full inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-linear-to-r from-teal-500 to-cyan-600 text-white font-bold text-base rounded-2xl shadow-lg shadow-teal-300/40 hover:brightness-105 hover:shadow-teal-300/60 transition-all cursor-pointer">
                    Solicitar mi suscripción
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </button>
            </form>
        @endif
    </div>

    <!-- ===== RESUMEN DEL PLAN ===== -->
    <aside class="order-1 lg:order-2 lg:sticky lg:top-8">
        <div class="relative bg-linear-to-br from-slate-900 to-slate-800 rounded-3xl p-7 overflow-hidden shadow-xl">
            <div class="absolute -top-10 -right-10 w-44 h-44 rounded-full bg-teal-500/20 blur-2xl pointer-events-none"></div>
            <div class="relative">
                <p class="text-xs text-teal-400 font-bold uppercase tracking-widest mb-3">Continúa con</p>
                <h2 class="text-3xl font-extrabold text-white mb-1">Plan {{ $plan?->name ?? 'Profesional' }}</h2>
                <p class="text-sm text-slate-400 mb-5">{{ $plan?->description ?? 'Todo lo que tu negocio de microcréditos necesita.' }}</p>

                <div class="flex items-baseline gap-2 mb-6">
                    <span class="text-4xl font-extrabold text-white">{{ $plan?->formatted_price ?? '$249.000' }}</span>
                    <span class="text-slate-400">/mes</span>
                </div>

                <ul class="space-y-3">
                    @php
                        $perks = [
                            'Hasta '.($plan?->getLimitDisplay('max_collectors') ?? '5').' cobradores con app offline (sin internet)',
                            ($plan?->getLimitDisplay('max_active_credits') ?? '200').' créditos activos · '.($plan?->getLimitDisplay('max_clients') ?? '500').' clientes',
                            'Comprobante digital de cada cobro, con hora y ubicación, para compartir o imprimir',
                            'Reportes de cartera, mora y recaudo · tu marca en el sistema',
                        ];
                    @endphp
                    @foreach($perks as $perk)
                        <li class="flex items-start gap-2.5 text-sm text-slate-300">
                            <svg class="w-5 h-5 text-teal-400 mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
                            {{ $perk }}
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </aside>

</main>
</div>

</body>
</html>
