<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Package Purchase Confirmation</title>
</head>
<body style="margin:0; padding:0; background-color:#f6f9fc; font-family:'Helvetica Neue', Arial, sans-serif; color:#1f2933;">
    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background-color:#f6f9fc; padding:24px 0;">
        <tr>
            <td align="center">
                <table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width:600px; background:#ffffff; border-radius:12px; overflow:hidden; box-shadow:0 30px 60px rgba(15,23,42,0.08);">
                    <tr>
                        <td style="background:linear-gradient(135deg,#2563eb,#1d4ed8); padding:32px;">
                            <h1 style="margin:0; font-size:26px; color:#ffffff; letter-spacing:0.5px;">Package Purchase Confirmed</h1>
                            <p style="margin:12px 0 0; font-size:16px; color:rgba(255,255,255,0.92);">
                                Thank you for choosing {{ package_title }}. Your subscription is now active.
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding:32px;">
                            <p style="margin:0 0 18px; font-size:16px;">Hi {{ company_name }},</p>
                            <p style="margin:0 0 24px; font-size:15px; line-height:1.6;">
                                We’re excited to have you on board! Below is a snapshot of your package and billing details.
                                Keep this email for your records.
                            </p>

                            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:28px;">
                                <tr>
                                    <td colspan="2" style="padding:14px 18px; background:#f1f5f9; border-radius:10px;">
                                        <h2 style="margin:0; font-size:18px; color:#0f172a;">Package Overview</h2>
                                        <p style="margin:8px 0 0; font-size:14px; color:#475569;">{{ package_description or 'Package details are provided below.' }}</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:16px 12px 8px; font-size:14px; color:#64748b;">Contacts Included</td>
                                    <td style="padding:16px 12px 8px; font-size:14px; color:#0f172a; font-weight:600;" align="right">{{ package_contacts }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:8px 12px; font-size:14px; color:#64748b;">Call Minutes</td>
                                    <td style="padding:8px 12px; font-size:14px; color:#0f172a; font-weight:600;" align="right">{{ package_minutes }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:8px 12px; font-size:14px; color:#64748b;">File Limit</td>
                                    <td style="padding:8px 12px; font-size:14px; color:#0f172a; font-weight:600;" align="right">{{ package_file_limit }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:8px 12px 16px; font-size:14px; color:#64748b;">Package Price</td>
                                    <td style="padding:8px 12px 16px; font-size:14px; color:#0f172a; font-weight:600;" align="right">{{ package_price_display }}</td>
                                </tr>
                            </table>

                            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:28px; border:1px solid #e2e8f0; border-radius:10px;">
                                <tr>
                                    <td colspan="2" style="padding:16px 18px; background:#0f172a; border-radius:10px 10px 0 0;">
                                        <h2 style="margin:0; font-size:17px; color:#ffffff;">Billing Summary</h2>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding:16px 18px; font-size:14px; color:#334155;">Amount Charged</td>
                                    <td style="padding:16px 18px; font-size:15px; color:#0f172a; font-weight:600;" align="right">{{ billing_amount_display }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:16px 18px; font-size:14px; color:#334155;">Billing Status</td>
                                    <td style="padding:16px 18px; font-size:15px; color:#0f172a; font-weight:600;" align="right">{{ billing_status }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:16px 18px; font-size:14px; color:#334155;">Purchase Date</td>
                                    <td style="padding:16px 18px; font-size:15px; color:#0f172a; font-weight:600;" align="right">{{ purchase_date }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:16px 18px; font-size:14px; color:#334155;">Validity</td>
                                    <td style="padding:16px 18px; font-size:15px; color:#0f172a; font-weight:600;" align="right">{{ billing_period }}</td>
                                </tr>
                                <tr>
                                    <td style="padding:16px 18px 24px; font-size:14px; color:#334155;">Payment Reference</td>
                                    <td style="padding:16px 18px 24px; font-size:15px; color:#0f172a; font-weight:600;" align="right">{{ payment_reference }}</td>
                                </tr>
                            </table>

                            <div style="padding:18px; border:1px dashed #cbd5f5; border-radius:10px; background:#f8fafc;">
                                <p style="margin:0; font-size:14px; color:#334155; line-height:1.6;">
                                    Need help or have questions? Reach out at
                                    <a href="mailto:{{ support_email }}" style="color:#2563eb; font-weight:600; text-decoration:none;">{{ support_email }}</a>.
                                    We’re here to make sure you get the most from your subscription.
                                </p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="background:#f1f5f9; padding:18px; text-align:center;">
                            <p style="margin:0; font-size:13px; color:#64748b;">
                                © {{ current_year }} {{ brand_name }}. All rights reserved.
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

