<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Contribution Payment Failed</title>
    <style>
        body { font-family: Arial, sans-serif; color: #333; line-height: 1.6; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: #dc3545; color: #fff; padding: 20px; text-align: center; border-radius: 4px 4px 0 0; }
        .body { background: #f9f9f9; padding: 30px; border: 1px solid #ddd; }
        .detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
        .footer { text-align: center; font-size: 12px; color: #999; padding: 20px; }
        .btn { display: inline-block; background: #007bff; color: #fff; padding: 12px 24px; text-decoration: none; border-radius: 4px; margin-top: 16px; }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>Payment Failed</h2>
    </div>
    <div class="body">
        <p>Dear {{ $name }},</p>
        <p>Unfortunately, your contribution payment could not be processed. Please see the details below:</p>

        <div class="detail-row">
            <strong>Period:</strong> <span>{{ $period }}</span>
        </div>
        <div class="detail-row">
            <strong>Amount:</strong> <span>{{ $amount }}</span>
        </div>
        <div class="detail-row">
            <strong>Reference:</strong> <span>{{ $reference }}</span>
        </div>
        @if(!empty($reason))
        <div class="detail-row">
            <strong>Reason:</strong> <span>{{ $reason }}</span>
        </div>
        @endif

        <p style="margin-top: 20px;">Please retry your payment or contact support if the issue persists.</p>
    </div>
    <div class="footer">
        <p>&copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</p>
    </div>
</div>
</body>
</html>
