Email Preview

<!-- Email HTML template - Copy this entire block -->
<table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Outfit', Arial, sans-serif; background-color: #f3f4f6;">
  <tr>
    <td align="center" style="padding: 40px 20px;">
      <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <!-- Header -->
        <tr>
          <td style="padding: 40px 40px 30px; background-color: #FFFF00; text-align: center;">
            <img src="https://media.base44.com/images/public/6a3f7d103b7a7c69a69c7140/1b396b4f1_Screenshot2026-06-29at150913.png" alt="LUGGAGEDEPOSIT.COM" width="200" style="margin-bottom: 20px;">
            <h1 style="color: #001f3f; font-size: 28px; margin: 0 0 10px 0;">Booking Confirmed!</h1>
            <p style="color: #374151; margin: 0;">Your luggage storage reservation is all set</p>
          </td>
        </tr>
        
        <!-- Greeting -->
        <tr>
          <td style="padding: 30px 40px 20px;">
            <p style="color: #1f2937; font-size: 16px; margin: 0 0 10px 0;">Dear <strong>{{guest_name}}</strong>,</p>
            <p style="color: #374151; line-height: 1.6; margin: 0;">
              Thank you for choosing LUGGAGEDEPOSIT.COM! Your booking has been confirmed and paid.
              We're looking forward to storing your luggage securely.
            </p>
          </td>
        </tr>
        
        <!-- Confirmation Code -->
        <tr>
          <td style="padding: 0 40px 30px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #001f3f; border-radius: 12px; padding: 24px; text-align: center;">
              <tr>
                <td>
                  <p style="color: rgba(255,255,255,0.9); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px 0;">Confirmation Code</p>
                  <p style="color: #ffffff; font-size: 36px; font-weight: bold; letter-spacing: 2px; margin: 0 0 12px 0;">{{confirmation_code}}</p>
                  <p style="color: rgba(255,255,255,0.75); font-size: 11px; margin: 0;">Please show this code at drop-off (digital or printed)</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        
        <!-- Booking Details -->
        <tr>
          <td style="padding: 0 40px 30px;">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td width="50%" valign="top" style="padding-right: 15px;">
                  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px;">
                    <tr>
                      <td style="padding-bottom: 15px;">
                        <h3 style="color: #1f2937; font-size: 16px; margin: 0;">Drop-off</h3>
                      </td>
                    </tr>
                    <tr>
                      <td style="color: #374151; font-size: 14px; line-height: 1.6;">
                        <strong>{{dropoff_date}}</strong> at <strong>{{dropoff_time}}</strong><br>
                        <strong>Capital Luggage Deposit</strong><br>
                        Via Giovanni Giolitti 127<br>
                        00185 Roma RM, Italy<br>
                        <a href="https://www.google.com/maps/search/?api=1&query=Via+Giovanni+Giolitti+127%2C+00185+Rome%2C+Italy" target="_blank" style="display: inline-block; margin-top: 8px; background-color: #FFFF00; color: #001f3f; text-decoration: none; padding: 6px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600; border: 1px solid #001f3f;">Open in Google Maps</a>
                      </td>
                    </tr>
                  </table>
                </td>
                <td width="50%" valign="top" style="padding-left: 15px;">
                  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px;">
                    <tr>
                      <td style="padding-bottom: 15px;">
                        <h3 style="color: #1f2937; font-size: 16px; margin: 0;">Pick-up</h3>
                      </td>
                    </tr>
                    <tr>
                      <td style="color: #374151; font-size: 14px; line-height: 1.6;">
                        <strong>{{pickup_date}}</strong> at <strong>{{pickup_time}}</strong><br>
                        Same location<br>
                        <strong>Capital Luggage Deposit</strong><br>
                        Via Giovanni Giolitti 127
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        
        <!-- Luggage & Pricing -->
        <tr>
          <td style="padding: 0 40px 30px;">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td width="50%" valign="top" style="padding-right: 15px;">
                  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px;">
                    <tr>
                      <td style="padding-bottom: 10px; color: #1f2937; font-size: 16px; font-weight: 600;">
                        Luggage
                      </td>
                    </tr>
                    <tr>
                      <td style="color: #111827; font-size: 28px; font-weight: bold; padding-bottom: 8px;">
                        {{num_bags}} Bag(s)
                      </td>
                    </tr>
                    <tr>
                      <td style="color: #6b7280; font-size: 11px; line-height: 1.4;">
                        Standard suitcases and bags only<br>
                        No bicycles or oversized items
                      </td>
                    </tr>
                  </table>
                </td>
                <td width="50%" valign="top" style="padding-left: 15px;">
                  <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px;">
                    <tr>
                      <td style="padding-bottom: 10px; color: #1f2937; font-size: 16px; font-weight: 600;">
                        Payment
                      </td>
                    </tr>
                    <tr>
                      <td style="color: #111827; font-size: 28px; font-weight: bold; padding-top: 8px; border-top: 1px solid #d1d5db;">
                        €{{total_price}}
                      </td>
                    </tr>
                    <tr>
                      <td style="color: #6b7280; font-size: 11px; padding-top: 8px;">
                        Payment Status: <span style="color: #16a34a; font-weight: 600;">Paid</span>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        
        <!-- Important Info -->
        <tr>
          <td style="padding: 0 40px 30px;">
            <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #fef3c7; border: 1px solid #fde68a; border-radius: 12px; padding: 20px;">
              <tr>
                <td style="color: #1f2937; font-size: 16px; font-weight: 600; padding-bottom: 12px;">
                  Important Information
                </td>
              </tr>
              <tr>
                <td style="color: #374151; font-size: 13px; line-height: 1.6;">
                  • <strong>Operating Hours:</strong> Open daily 9:00 AM – 7:00 PM. No pickups after 18:55.<br>
                  • <strong>Drop-off & Pickup Times:</strong> The times shown are approximate. Drop off and pick up anytime during operating hours.<br>
                  • <strong>Non-refundable:</strong> All bookings are non-refundable.<br>
                  • <strong>Insurance:</strong> All bags insured up to €500 per bag.
                </td>
              </tr>
            </table>
          </td>
        </tr>
        
        <!-- Contact -->
        <tr>
          <td style="padding: 0 40px 30px; text-align: center;">
            <h3 style="color: #1f2937; font-size: 18px; margin: 0 0 10px 0;">Need Help?</h3>
            <p style="color: #374151; font-size: 14px; margin: 0 0 20px 0;">Contact us anytime via WhatsApp or email</p>
            <a href="https://wa.me/390656569244?text=Hello,%20my%20name%20is%20{{guest_name}},%20my%20booking%20number%20is%20{{confirmation_code}}." target="_blank" style="display: inline-block; background-color: #22c55e; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 9999px; font-size: 14px; font-weight: 600; margin-right: 10px;">WhatsApp Us</a>
            <a href="mailto:info@luggagedeposit.com?subject=Booking%20{{confirmation_code}}%20-%20{{guest_name}}&body=Dear%20Support%20Team,%0D%0A%0D%0AMy%20name%20is%20{{guest_name}}%20and%20my%20booking%20number%20is%20{{confirmation_code}}.%0D%0A%0D%0AI%20need%20assistance%20with:%0D%0A%0D%0A[Please%20describe%20your%20issue]%0D%0A%0D%0AThank%20you,%0D%0A{{guest_name}}" style="display: inline-block; background-color: #001f3f; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 9999px; font-size: 14px; font-weight: 600;">Email Us</a>
          </td>
        </tr>
        
        <!-- Footer -->
        <tr>
          <td style="padding: 30px 40px; border-top: 1px solid #e5e7eb; text-align: center;">
            <p style="color: #4b5563; font-size: 14px; font-weight: 600; margin: 0 0 8px 0;">LUGGAGEDEPOSIT.COM</p>
            <p style="color: #6b7280; font-size: 11px; margin: 0 0 8px 0;">
              Partner: Capital Luggage Deposit<br>
              Via Giovanni Giolitti 127, 00185 Roma RM, Italy
            </p>
            <p style="color: #9ca3af; font-size: 11px; margin: 0;">
              © 2026 LUGGAGEDEPOSIT.COM — All rights reserved
            </p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>