<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overdue Payment Notice</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 0; background-color: #f4f4f4; }
        .container { max-width: 600px; margin: 20px auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .header { background: #F44336; color: #ffffff; padding: 30px; text-align: center; }
        .overdue-badge { background: #D32F2F; color: white; padding: 5px 15px; border-radius: 20px; display: inline-block; margin-bottom: 10px; font-weight: bold; }
        .content { padding: 30px; }
        .invoice-details { background: #ffebee; padding: 20px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #F44336; }
        .invoice-details table { width: 100%; }
        .invoice-details td { padding: 8px 0; }
        .invoice-details td:first-child { font-weight: bold; width: 40%; }
        .amount { font-size: 28px; color: #D32F2F; font-weight: bold; }
        .warning-box { background: #fff9c4; border-left: 4px solid #FBC02D; padding: 15px; margin: 20px 0; }
        .button { display: inline-block; padding: 15px 40px; background: #D32F2F; color: #ffffff; text-decoration: none; border-radius: 5px; margin: 20px 0; font-weight: bold; }
        .button:hover { background: #B71C1C; }
        .footer { background: #f4f4f4; padding: 20px; text-align: center; font-size: 12px; color: #666; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <span class="overdue-badge">❌ PAYMENT OVERDUE</span>
            <h1>Overdue Payment Notice</h1>
        </div>
        <div class="content">
            <p>Dear {{customer_name}},</p>
            
            <p><strong>Our records indicate that your payment is now overdue.</strong></p>
            
            <div class="invoice-details">
                <table>
                    <tr>
                        <td>Invoice Number:</td>
                        <td><strong>{{invoice_number}}</strong></td>
                    </tr>
                    <tr>
                        <td>Amount Due:</td>
                        <td class="amount">{{currency_symbol}}{{amount_due}}</td>
                    </tr>
                    <tr>
                        <td>Original Due Date:</td>
                        <td><strong>{{due_date}}</strong></td>
                    </tr>
                    <tr>
                        <td>Days Overdue:</td>
                        <td><strong style="color: #D32F2F;">{{days_overdue}} days</strong></td>
                    </tr>
                </table>
            </div>
            
            <div class="warning-box">
                <strong>⚠️ Important:</strong> Late fees may apply. Please remit payment immediately to avoid additional charges and service interruption.
            </div>
            
            <p>Please make payment now to bring your account current:</p>
            
            <center>
                <a href="{{payment_link}}" class="button">PAY OVERDUE INVOICE NOW</a>
            </center>
            
            <p>If you have recently made this payment, please accept our apologies and disregard this notice.</p>
            
            <p>If you are unable to pay the full amount at this time, please contact us immediately to discuss payment options. We are here to work with you.</p>
            
            <p>Best regards,<br>
            {{company_name}}<br>
            {{company_phone}}<br>
            {{company_email}}</p>
        </div>
        <div class="footer">
            <p>This is an automated reminder. Please do not reply to this email.</p>
            <p><a href="{{opt_out_link}}">Opt out of payment reminders</a></p>
        </div>
    </div>
    <img src="{{tracking_pixel_url}}" width="1" height="1" alt="" />
</body>
</html>