<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body style="margin:0;padding:0;background:#f4f7fa;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif">
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f7fa;padding:40px 0">
<tr><td align="center">
<table width="560" cellpadding="0" cellspacing="0" style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06)">
  <tr><td style="background:linear-gradient(135deg,#2972B1,#1e5a8f);padding:32px 40px;text-align:center">
    <h1 style="margin:0;color:#fff;font-size:24px;font-weight:700">{{appName}}</h1>
    <p style="margin:8px 0 0;color:rgba(255,255,255,0.85);font-size:14px">Your Virtual Hospital</p>
  </td></tr>
  <tr><td style="padding:40px">
    <h2 style="margin:0 0 16px;color:#1a1a2e;font-size:20px">Appointment confirmed</h2>
    <p style="color:#4a5568;line-height:1.6;margin:0 0 16px">Hi {{patientFirstName}},</p>
    <p style="color:#4a5568;line-height:1.6;margin:0 0 16px">Your appointment is confirmed. Save these details:</p>
    <table cellpadding="0" cellspacing="0" style="background:#f8fafc;border-radius:8px;padding:0;margin:0 0 24px;width:100%">
      <tr><td style="padding:16px 20px">
        <p style="margin:0 0 4px;color:#1a1a2e;font-size:14px"><strong>{{appointmentDoctor}}</strong></p>
        <p style="margin:0 0 8px;color:#718096;font-size:13px">{{appointmentSpecialty}}</p>
        <p style="margin:0;color:#2d3748;font-size:14px">{{appointmentDate}} at {{appointmentTime}}</p>
      </td></tr>
    </table>
    <table cellpadding="0" cellspacing="0" style="margin:0 auto 24px">
    <tr><td style="background:#2972B1;border-radius:8px;padding:14px 32px">
      <a href="{{appointmentJoinUrl}}" style="color:#fff;text-decoration:none;font-weight:600;font-size:16px;display:inline-block">View appointment</a>
    </td></tr></table>
  </td></tr>
  <tr><td style="background:#f8fafc;padding:20px 40px;text-align:center;border-top:1px solid #e2e8f0">
    <p style="color:#a0aec0;font-size:12px;margin:0">&copy; {{currentYear}} {{appName}}. All rights reserved.</p>
    <p style="color:#a0aec0;font-size:11px;margin:4px 0 0">Questions? <a href="mailto:{{supportEmail}}" style="color:#2972B1">{{supportEmail}}</a></p>
  </td></tr>
</table>
</td></tr></table>
</body></html>