<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Update – PayRide</title>
    <style>
        body {
            margin: 0; padding: 0;
            background-color: #f4f6f9;
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #333333;
        }
        .wrapper {
            max-width: 600px;
            margin: 40px auto;
            background: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .header {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            padding: 36px 40px;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            color: #ffffff;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        .header p.tagline {
            margin: 6px 0 0;
            color: rgba(255,255,255,0.85);
            font-size: 14px;
        }
        .icon-wrap {
            margin: 28px auto 0;
            width: 64px; height: 64px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-wrap svg {
            width: 36px; height: 36px;
            fill: #ffffff;
        }
        .body {
            padding: 36px 40px;
        }
        .body p {
            font-size: 15px;
            line-height: 1.7;
            margin: 0 0 16px;
        }
        .reason-box {
            background: #fff5f5;
            border-left: 4px solid #e74c3c;
            border-radius: 6px;
            padding: 16px 20px;
            margin: 24px 0;
            font-size: 14px;
            color: #555;
            line-height: 1.7;
        }
        .reason-box strong {
            display: block;
            color: #c0392b;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        .cta-section {
            text-align: center;
            margin: 28px 0 8px;
        }
        .cta-btn {
            display: inline-block;
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: #ffffff !important;
            text-decoration: none;
            padding: 13px 32px;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        .footer {
            background: #f9fafb;
            border-top: 1px solid #eef0f3;
            padding: 24px 40px;
            text-align: center;
            font-size: 12px;
            color: #888;
            line-height: 1.7;
        }
        .footer a { color: #3498db; text-decoration: none; }
    </style>
</head>
<body>
<div class="wrapper">

    <!-- Header -->
    <div class="header">
        <h1>PayRide</h1>
        <p class="tagline">School Management Platform</p>
        <div class="icon-wrap">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10
                         10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
            </svg>
        </div>
    </div>

    <!-- Body -->
    <div class="body">
        <p>Dear <strong>{{ $applicant->school_name }}</strong>,</p>

        <p>
            Thank you for your interest in joining <strong>PayRide</strong> and for taking the time to
            submit your school registration application.
        </p>

        <p>
            After careful review, we regret to inform you that your application has been
            <strong style="color:#e74c3c;">unsuccessful</strong> at this time.
        </p>

        @if($reason)
        <div class="reason-box">
            <strong>Reason for Rejection</strong>
            {{ $reason }}
        </div>
        @endif

        <p>
            If you believe this decision was made in error, or if you would like more clarification,
            please do not hesitate to reach out to our support team. You are also welcome to address
            the issues noted above and reapply in the future.
        </p>

        <div class="cta-section">
            <a href="{{ config('app.url') }}/get-started" class="cta-btn">Re-Apply Now</a>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <p>
            &copy; {{ date('Y') }} PayRide. All rights reserved.<br>
            You are receiving this email because you applied to join the PayRide platform.<br>
            Questions? Contact us at <a href="mailto:support@payriderw.com">support@payriderw.com</a>
        </p>
    </div>

</div>
</body>
</html>
