<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        body { background-color: #f8fafc; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
        .wrapper { width: 100%; max-width: 600px; margin: 0 auto; background-color: #ffffff; border-radius: 24px; overflow: hidden; margin-top: 20px; border: 1px solid #e2e8f0; }
        .header { background-color: #0f172a; padding: 40px; text-align: center; }
        .content { padding: 40px; color: #1e293b; line-height: 1.6; }
        .invoice-box { background-color: #f1f5f9; border-radius: 16px; padding: 24px; margin: 24px 0; border: 1px dashed #cbd5e1; }
        .footer { padding: 20px; text-align: center; color: #64748b; font-size: 12px; }
        .button { display: inline-block; padding: 16px 32px; background-color: #f59e0b; color: #ffffff !important; font-weight: bold; text-decoration: none; border-radius: 12px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
        h1 { color: #ffffff; margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; }
        h2 { color: #0f172a; margin: 0 0 10px 0; font-size: 20px; }
        .label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #64748b; font-weight: bold; }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <h1>Expedition Confirmed</h1>
        </div>
        <div class="content">
            <p>Hello <strong><?= esc($client_name) ?></strong>,</p>
            <p>Your registration for the <strong><?= esc($tour_title) ?></strong> has been successfully processed. We are excited to have you join us on the mountain!</p>
            
            <div class="invoice-box">
                <table width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                        <td style="padding-bottom: 20px;">
                            <div class="label">Invoice Reference</div>
                            <div style="font-size: 20px; font-weight: 900; color: #0f172a;"><?= esc($invoice_ref) ?></div>
                        </td>
                        <td style="padding-bottom: 20px; text-align: right;">
                            <div class="label">Start Date</div>
                            <div style="font-weight: bold;"><?= esc($travel_date) ?></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="label">Number of Climbers</div>
                            <div style="font-weight: bold;"><?= esc($pax) ?> Guest(s)</div>
                        </td>
                        <td style="text-align: right;">
                            <div class="label">Total Amount</div>
                            <div style="font-size: 18px; font-weight: 900; color: #f59e0b;">USD <?= number_format($total_price, 2) ?></div>
                        </td>
                    </tr>
                </table>
            </div>

            <p><strong>Next Step:</strong> Please reply to this email with a clear scan/photo of your <strong>Passport</strong>. This is required immediately to secure your KWS (Kenya Wildlife Service) climbing permits.</p>

            <div style="text-align: center; margin-top: 30px;">
                <a href="<?= base_url('booking/success?ref=' . $invoice_ref) ?>" class="button">View Booking Online</a>
            </div>
        </div>
        <div class="footer">
            &copy; <?= date('Y') ?> Mount Kenya Treks & Safaris<br>
            KWS Licensed Operator • AMREF Flying Doctors Protected
        </div>
    </div>
</body>
</html>