@extends('layouts.app')
@section('title', 'Pembayaran Gagal - FIN-ANALYSIS PRO')
@section('content')
<div style="max-width:480px;margin:4rem auto;text-align:center;padding:0 1rem">
    <div style="width:80px;height:80px;background:#FEE2E2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
    </div>
    <h1 style="font-family:'Syne',sans-serif;font-size:1.875rem;font-weight:800;color:#1E293B;margin:0 0 .75rem">Pembayaran Gagal</h1>
    <p style="color:#64748B;margin:0 0 1.5rem;line-height:1.6">Pembayaran tidak berhasil diproses. Tidak ada biaya yang dikenakan. Silakan coba lagi atau pilih metode pembayaran lain.</p>

    <div style="background:#FEE2E2;border:1px solid #FCA5A5;border-radius:10px;padding:1rem;margin-bottom:2rem;font-size:.8125rem;color:#991B1B;text-align:left">
        <strong>Kemungkinan penyebab:</strong>
        <ul style="margin:.5rem 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:3px">
            <li>Saldo tidak mencukupi</li>
            <li>Kartu/rekening diblokir</li>
            <li>Koneksi terputus saat pembayaran</li>
            <li>Batas transaksi terlampaui</li>
        </ul>
    </div>

    <div style="display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap">
        <a href="{{ route('subscription.checkout.page', ['plan'=>'pro']) }}" class="btn btn-primary">Coba Lagi</a>
        <a href="{{ route('public.contact') }}" class="btn btn-secondary">Hubungi Support</a>
    </div>
</div>
@endsection