<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="x-apple-disable-message-reformatting">
  <title></title>
  <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
  <style>
    @media only screen and (max-width:600px){
      .email-container{width:100%!important;max-width:100%!important;}
      .stack-on-mobile{display:block!important;width:100%!important;}
      .summary-cell{display:block!important;width:100%!important;padding:6px 16px!important;}
    }
    @media (prefers-color-scheme:dark){
      body,table,.email-body{background-color:#111827!important;}
      .email-card{background-color:#1f2937!important;border-color:#374151!important;}
      h1,h2,h3,p,td,span,li{color:#e5e7eb!important;}
      .email-heading{color:#f9fafb!important;}
      .muted{color:#9ca3af!important;}
      .summary-card{background-color:#111827!important;border-color:#374151!important;}
      .summary-card p{color:#e5e7eb!important;}
    }
  </style>
</head>
<body style="margin:0;padding:0;background-color:#f1f5f9;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:#f1f5f9;">
  <tr>
    <td style="padding:24px 12px;">

      <!-- Email container -->
      <table class="email-container" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin:0 auto;max-width:600px;width:100%;">

        <!-- Header -->
        <tr>
          <td style="background-color:#0f172a;border-radius:12px 12px 0 0;padding:24px 32px;text-align:center;">
            <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:20px;font-weight:700;color:#ffffff;letter-spacing:-0.3px;">
              {{email_logo_block}}
            </p>
          </td>
        </tr>

        <!-- Body card -->
        <tr>
          <td class="email-card" style="background-color:#ffffff;padding:40px 32px;border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;">

            <h1 class="email-heading" style="margin:0 0 24px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:26px;font-weight:700;color:#111827;line-height:1.2;">Your Car Wash Is Done!</h1>

            <div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;">
              
                    <p style="margin:0 0 16px 0;font-size:16px;line-height:1.6;color:#374151;">Hi {{customer_name}},</p>
                    <p style="margin:0 0 24px 0;font-size:16px;line-height:1.6;color:#374151;">Great news — <strong>{{technician_name}}</strong> has finished your car wash. Your vehicle is clean and ready to go!</p>
                    
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" class="summary-card" style="background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;margin:0 0 8px 0;">
          <tr>
            <td style="padding:20px 24px;">
              <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td class="summary-cell" style="padding:6px 0;vertical-align:top;width:50%;">
                    <p style="margin:0 0 2px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.8px;">Date &amp; Time</p>
                    <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:600;color:#111827;">{{booking_datetime}}</p>
                  </td>
                  <td class="summary-cell" style="padding:6px 0;vertical-align:top;width:50%;">
                    <p style="margin:0 0 2px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.8px;">Location</p>
                    <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:600;color:#111827;">{{location_name}}</p>
                  </td>
                </tr>
                <tr>
                  <td class="summary-cell" style="padding:6px 0;vertical-align:top;">
                    <p style="margin:0 0 2px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.8px;">Package</p>
                    <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:600;color:#111827;">{{package_name}}</p>
                  </td>
                  <td class="summary-cell" style="padding:6px 0;vertical-align:top;">
                    <p style="margin:0 0 2px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.8px;">Vehicle</p>
                    <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:600;color:#111827;">{{vehicle_year}} {{vehicle_make}} {{vehicle_model}}</p>
                  </td>
                </tr>
                <tr>
                  <td class="summary-cell" style="padding:6px 0;vertical-align:top;">
                    <p style="margin:0 0 2px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.8px;">Total</p>
                    <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:700;color:#111827;">{{total}}</p>
                  </td>
                  <td class="summary-cell" style="padding:6px 0;vertical-align:top;">
                    <p style="margin:0 0 2px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.8px;">Technician</p>
                    <p style="margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:14px;font-weight:600;color:#111827;">{{technician_name}}</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
                    <p style="margin:24px 0 0 0;font-size:14px;line-height:1.6;color:#6b7280;">Love the result? We&#8217;d appreciate a quick review — it helps us a lot!</p>
                
            </div>

            
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin:32px auto 0 auto;">
              <tr>
                <td style="border-radius:8px;background:#1d4ed8;text-align:center;">
                  <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{tracking_url}}" style="height:48px;v-text-anchor:middle;width:220px;" arcsize="17%" fillcolor="#1d4ed8" stroke="f"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:15px;font-weight:bold;">Leave a Review</center></v:roundrect><![endif]-->
                  <a href="{{tracking_url}}" style="display:inline-block;padding:14px 32px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:8px;mso-hide:all;">Leave a Review</a>
                </td>
              </tr>
            </table>

          </td>
        </tr>

        <!-- Footer -->
        <tr>
          <td style="background-color:#f8fafc;border:1px solid #e2e8f0;border-top:0;border-radius:0 0 12px 12px;padding:24px 32px;text-align:center;">
            
            <p class="muted" style="margin:12px 0 0 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:12px;line-height:1.5;color:#9ca3af;">
              &copy; {{current_year}} {{app_name}} &nbsp;&middot;&nbsp; <a href="{{app_url}}" style="color:#9ca3af;text-decoration:none;">{{app_url}}</a>
            </p>
          </td>
        </tr>

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