<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Urgent Overdue Payment</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 600px; margin: 20px auto; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.15); overflow: hidden; border: 3px solid #b91c1c; }
        .header { background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%); color: #ffffff; padding: 30px 20px; text-align: center; }
        .header h1 { margin: 0; font-size: 26px; font-weight: 700; }
        .urgent-banner { background: #fee2e2; color: #7f1d1d; padding: 15px; text-align: center; font-weight: 700; font-size: 18px; border-bottom: 2px solid #fecaca; }
        .content { padding: 30px 20px; }
        .greeting { font-size: 18px; font-weight: 500; margin-bottom: 20px; }
        .message { margin-bottom: 20px; }
        .invoice-details { background: #fef2f2; border: 3px solid #fecaca; padding: 25px; margin: 25px 0; border-radius: 8px; }
        .invoice-details table { width: 100%; }
        .invoice-details td { padding: 12px 0; font-size: 15px; }
        .invoice-details td:first-child { font-weight: 600; width: 45%; }
        .amount { font-size: 36px; font-weight: 700; color: #b91c1c; }
        .total-owing { background: #7f1d1d; color: #ffffff; padding: 15px; border-radius: 6px; text-align: center; margin: 20px 0; }
        .total-owing .label { font-size: 14px; margin-bottom: 5px; }
        .total-owing .amount { color: #ffffff; font-size: 40px; }
        .button { display: inline-block; padding: 16px 40px; background: #b91c1c; color: #ffffff !important; text-decoration: none; border-radius: 6px; font-weight: 700; margin: 20px 0; font-size: 18px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .button:hover { background: #991b1b; transform: translateY(-2px); }
        .consequences-box { background: #fef3c7; border: 2px solid #f59e0b; padding: 20px; margin: 25px 0; border-radius: 6px; }
        .consequences-box h3 { margin-top: 0; color: #92400e; }
        .consequences-box ul { margin: 10px 0; padding-left: 20px; }
        .consequences-box li { margin: 8px 0; color: #92400e; font-weight: 500; }
        .contact-box { background: #e0f2fe; border-left: 4px solid #0284c7; padding: 20px; margin: 25px 0; border-radius: 4px; }
        .footer { background: #f8f9fa; padding: 20px; text-align: center; font-size: 12px; color: #6c757d; border-top: 1px solid #e9ecef; }
        .footer a { color: #b91c1c; text-decoration: none; }
    </style>
</head>
<body>
    <div class="container">
        <div class="urgent-banner">
            🚨 URGENT ACTION REQUIRED - ACCOUNT AT RISK 🚨
        </div>
        
        <div class="header">
            <h1>PAYMENT SERIOUSLY OVERDUE</h1>
        </div>
        
        <div class="content">
            <div class="greeting">URGENT NOTICE TO: {{customer_name}},</div>
            
            <div class="message">
                <p style="font-size: 16px; font-weight: 600; color: #b91c1c;">
                    Your payment is now <strong>{{days_overdue}} DAYS OVERDUE</strong>. This is a final reminder before collection proceedings begin.
                </p>
            </div>
            
            <div class="invoice-details">
                <table>
                    <tr>
                        <td>Invoice Number:</td>
                        <td><strong style="font-size: 18px;">{{invoice_number}}</strong></td>
                    </tr>
                    <tr>
                        <td>Original Due Date:</td>
                        <td><strong style="color: #b91c1c;">{{due_date}}</strong></td>
                    </tr>
                    <tr>
                        <td>Original Amount:</td>
                        <td><strong>{{currency_symbol}}{{original_amount}}</strong></td>
                    </tr>
                    <tr>
                        <td>Late Fees:</td>
                        <td><strong style="color: #b91c1c;">{{currency_symbol}}{{late_fees}}</strong></td>
                    </tr>
                    <tr>
                        <td colspan="2"><hr style="border: 1px solid #fecaca;"></td>
                    </tr>
                    <tr>
                        <td><strong style="font-size: 16px;">TOTAL AMOUNT DUE:</strong></td>
                        <td class="amount">{{currency_symbol}}{{total_amount}}</td>
                    </tr>
                    <tr>
                        <td>Days Overdue:</td>
                        <td><strong style="color: #b91c1c; font-size: 20px;">{{days_overdue}} DAYS</strong></td>
                    </tr>
                </table>
            </div>
            
            <center>
                <a href="{{payment_link}}" class="button">PAY {{currency_symbol}}{{total_amount}} NOW</a>
            </center>
            
            <div class="consequences-box">
                <h3>⚠️ IMMEDIATE ACTION REQUIRED</h3>
                <p><strong>If full payment is not received within {{final_grace_days}} business days, the following actions will be taken:</strong></p>
                <ul>
                    <li>Account will be placed on HOLD - No further services</li>
                    <li>Additional penalty fees will be applied</li>
                    <li>Account will be referred to collections agency</li>
                    <li>Legal proceedings may be initiated</li>
                    <li>Credit rating may be negatively affected</li>
                </ul>
            </div>
            
            <div class="contact-box">
                <h4 style="margin-top: 0; color: #0369a1;">💬 Need to Discuss Payment Arrangements?</h4>
                <p style="margin-bottom: 10px;">We understand that financial difficulties can arise. If you need to discuss payment options, please contact our accounts team IMMEDIATELY:</p>
                <p style="margin: 5px 0;"><strong>Email:</strong> <a href="mailto:{{accounts_email}}" style="color: #0284c7;">{{accounts_email}}</a></p>
                <p style="margin: 5px 0;"><strong>Phone:</strong> {{accounts_phone}}</p>
                <p style="margin: 5px 0;"><strong>Hours:</strong> {{business_hours}}</p>
                <p style="margin-top: 15px; font-size: 14px; color: #64748b;">Payment plans may be available for approved customers. Contact us before {{final_deadline_date}} to discuss options.</p>
            </div>
            
            <div class="message" style="margin-top: 30px; padding: 15px; background: #fef2f2; border-radius: 4px;">
                <p style="font-weight: 600; color: #991b1b; margin-bottom: 5px;">Please Note:</p>
                <p style="font-size: 14px; margin: 0;">If you have recently made this payment or sent payment, please contact us immediately with your payment reference to avoid unnecessary collection actions.</p>
            </div>
        </div>
        
        <div class="footer">
            <p>{{footer_text}}</p>
            <p style="font-weight: 600; color: #b91c1c;">This is a final reminder before collections. Immediate payment required.</p>
            <p>
                <a href="{{company_website}}">Visit Website</a> | 
                <a href="mailto:{{accounts_email}}">Contact Accounts</a>
            </p>
        </div>
    </div>
    
    <!-- Tracking Pixel -->
    <img src="{{tracking_pixel_url}}" width="1" height="1" style="display:none;" alt="">
</body>
</html>