<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title }}</title>
    <style>
        :root {
            color-scheme: light;
            --bg: #f6f7fb;
            --card: #ffffff;
            --text: #111827;
            --muted: #6b7280;
            --primary: #111827;
            --success: #16a34a;
            --warning: #d97706;
            --border: #e5e7eb;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: radial-gradient(circle at top, #ffffff 0%, var(--bg) 70%);
            color: var(--text);
        }

        .card {
            width: 100%;
            max-width: 560px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 32px;
            box-shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 600;
            background: {{ $status === 'success' ? 'rgba(22, 163, 74, 0.12)' : 'rgba(217, 119, 6, 0.12)' }};
            color: {{ $status === 'success' ? 'var(--success)' : 'var(--warning)' }};
        }

        h1 {
            margin: 18px 0 12px;
            font-size: 32px;
            line-height: 1.1;
        }

        p {
            margin: 0;
            color: var(--muted);
            font-size: 16px;
            line-height: 1.6;
        }

        .actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 24px;
        }

        .button {
            appearance: none;
            border: 0;
            border-radius: 14px;
            padding: 14px 18px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
        }

        .button-primary {
            background: var(--primary);
            color: #ffffff;
        }

        .button-secondary {
            background: #f3f4f6;
            color: var(--text);
        }

        .meta {
            margin-top: 18px;
            padding-top: 18px;
            border-top: 1px solid var(--border);
            font-size: 13px;
            color: var(--muted);
        }

        code {
            display: inline-block;
            margin-top: 4px;
            word-break: break-all;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 12px;
            color: var(--text);
        }
    </style>
</head>
<body>
    <main class="card">
        <div class="badge">
            <span>{{ $status === 'success' ? 'PayPal validé' : 'PayPal annulé' }}</span>
        </div>

        <h1>{{ $title }}</h1>
        <p>{{ $message }}</p>

        <div class="actions">
            <button class="button button-primary" type="button" onclick="window.close()">Fermer cette page</button>
            <a class="button button-secondary" href="/">Retour au site</a>
        </div>

        <div class="meta">
            Revenez maintenant dans l'application LineUp puis appuyez sur <strong>Continuer</strong> pour finaliser l'ajout du moyen de paiement.
            @if (!empty($tokenId))
                <br>
                <code>approval_token_id: {{ $tokenId }}</code>
            @endif
            @if (!empty($sessionId))
                <br>
                <code>approval_session_id: {{ $sessionId }}</code>
            @endif
        </div>
    </main>
</body>
</html>
