<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></title>
</head>
<body style="margin:0;padding:0;background-color:#f4f6f9;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;padding:32px 0;">
  <tr><td align="center">

    <!-- Container -->
    <table width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:8px;max-width:600px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
      
      <!-- Logo Header -->
      <tr>
        <td style="background-color:#0a1f44;padding:28px 40px;text-align:center;border-radius:8px 8px 0 0;">
          <?php if (!empty($logoUrl)): ?>
          <img src="<?= htmlspecialchars($logoUrl, ENT_QUOTES, 'UTF-8') ?>" alt="<?= htmlspecialchars($bankName, ENT_QUOTES, 'UTF-8') ?>" height="40" style="display:block;margin:0 auto;height:40px;width:auto;border:0;">
          <?php else: ?>
          <span style="color:#ffffff;font-size:20px;font-weight:700;letter-spacing:0.3px;font-family:Georgia,'Times New Roman',serif;"><?= htmlspecialchars($bankName, ENT_QUOTES, 'UTF-8') ?></span>
          <?php endif; ?>
        </td>
      </tr>

      <!-- Gold accent bar -->
      <tr><td style="background:linear-gradient(90deg,#c8a44e,#e2c97e,#c8a44e);height:3px;"></td></tr>

      <!-- Greeting -->
      <tr>
        <td style="padding:28px 40px 8px 40px;">
          <p style="color:#333333;font-size:15px;margin:0;line-height:1.5;">Dear <?= htmlspecialchars($customerName, ENT_QUOTES, 'UTF-8') ?>,</p>
        </td>
      </tr>

      <!-- Title -->
      <tr>
        <td style="padding:8px 40px 4px 40px;">
          <h2 style="color:#0a1f44;font-size:22px;font-weight:700;margin:0;line-height:1.3;"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></h2>
        </td>
      </tr>

      <!-- Message Body -->
      <tr>
        <td style="padding:12px 40px 8px 40px;color:#444444;font-size:15px;line-height:1.7;">
          <?= $message ?>
        </td>
      </tr>

      <!-- CTA Button (optional) -->
      <?php if ($buttonText && $buttonLink): ?>
      <tr>
        <td style="padding:8px 40px 24px 40px;">
          <table cellpadding="0" cellspacing="0" style="margin:12px 0;">
            <tr>
              <td align="center" style="background-color:#0a1f44;border-radius:6px;">
                <a href="<?= htmlspecialchars($buttonLink, ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener" style="display:inline-block;color:#ffffff;font-size:15px;font-weight:600;text-decoration:none;padding:14px 36px;border-radius:6px;background-color:#0a1f44;"><?= htmlspecialchars($buttonText, ENT_QUOTES, 'UTF-8') ?></a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <?php endif; ?>

      <!-- Transaction Details (optional) -->
      <?php if (!empty($details)): ?>
      <tr>
        <td style="padding:0 40px 16px 40px;">
          <table width="100%" cellpadding="10" cellspacing="0" style="background-color:#f8f9fb;border-radius:6px;border:1px solid #e8eaed;">
            <?php foreach ($details as $label => $value): ?>
            <tr>
              <td style="color:#666666;font-size:13px;font-weight:600;width:40%;border-bottom:1px solid #e8eaed;"><?= htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?></td>
              <td style="color:#333333;font-size:13px;border-bottom:1px solid #e8eaed;"><?= htmlspecialchars($value, ENT_QUOTES, 'UTF-8') ?></td>
            </tr>
            <?php endforeach; ?>
          </table>
        </td>
      </tr>
      <?php endif; ?>

      <!-- Additional content (transcluded) -->
      <?= $extra ?? '' ?>

      <!-- Divider -->
      <tr><td style="padding:0 40px;"><hr style="border:none;border-top:1px solid #e0e0e0;margin:8px 0;"></td></tr>

      <!-- Security Notice -->
      <tr>
        <td style="padding:12px 40px 4px 40px;">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
              <td style="width:24px;vertical-align:top;padding-right:10px;">
                <span style="display:inline-block;width:22px;height:22px;text-align:center;line-height:22px;font-size:12px;">🔒</span>
              </td>
              <td style="color:#888888;font-size:12px;line-height:1.6;">
                <strong>Security Notice:</strong> <?= htmlspecialchars($bankName, ENT_QUOTES, 'UTF-8') ?> will never ask for your password, PIN, or full security credentials via email. If you did not expect this message, please contact our support team immediately.
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Support info -->
      <tr>
        <td style="padding:4px 40px 8px 40px;color:#999999;font-size:12px;line-height:1.6;">
          Need help? Contact us at <a href="mailto:<?= htmlspecialchars($supportEmail, ENT_QUOTES, 'UTF-8') ?>" style="color:#0a1f44;text-decoration:none;"><?= htmlspecialchars($supportEmail, ENT_QUOTES, 'UTF-8') ?></a> or call <?= htmlspecialchars($supportPhone, ENT_QUOTES, 'UTF-8') ?>.
        </td>
      </tr>

      <!-- Footer -->
      <tr>
        <td style="background-color:#0a1f44;padding:20px 40px;text-align:center;border-radius:0 0 8px 8px;color:#aabbcc;font-size:11px;line-height:1.8;">
          &copy; <?= date('Y') ?> <?= htmlspecialchars($bankName, ENT_QUOTES, 'UTF-8') ?>. All rights reserved.<br>
          <a href="<?= htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8') ?>" style="color:#c8a44e;text-decoration:none;"><?= htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8') ?></a> &nbsp;|&nbsp;
          <a href="<?= htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8') ?>/privacy-policy" style="color:#c8a44e;text-decoration:none;">Privacy Policy</a> &nbsp;|&nbsp;
          <a href="<?= htmlspecialchars($siteUrl, ENT_QUOTES, 'UTF-8') ?>/terms" style="color:#c8a44e;text-decoration:none;">Terms of Use</a><br><br>
          This email is confidential and intended solely for the addressee.<br>
          Please do not reply to this email. This mailbox is not monitored.
        </td>
      </tr>

    </table>
    <!-- /Container -->

  </td></tr>
</table>
</body>
</html>
