<h1 style="color: #dc3545;">🚫 Booking Request Cancelled</h1>

<p>A booking request has been cancelled by the customer.</p>

<div style="margin-bottom: 20px;">
  <p><strong>Customer:</strong> {@customer_name}</p>
  <p><strong>Email:</strong> <a href={"mailto:#{@customer_email}"}>{@customer_email}</a></p>

  <%= if @customer_phone && String.trim(@customer_phone) != "" do %>
    <p><strong>Phone:</strong> <a href={"tel:#{@customer_phone}"}>{@customer_phone}</a></p>
  <% else %>
    <p><strong>Phone:</strong> N/A</p>
  <% end %>
</div>

<.details_list>
  <.detail_item label="Space">{@space_name}</.detail_item>
  <.detail_item label="Date">{@date}</.detail_item>
  <.detail_item label="Time">{@start_time} - {@end_time}</.detail_item>
</.details_list>

<div style="background-color: #fff5f5; border-left: 4px solid #dc3545; padding: 15px; margin: 20px 0; color: #2d3748;">
  <h3 style="color: #dc3545; margin-top: 0; font-size: 16px;">Cancellation Reason:</h3>
  <p style="margin: 0; font-weight: 500;">
    {@cancellation_reason}
  </p>
</div>

<p style="color: #718096; font-size: 14px; font-style: italic;">
  This is an automated notification. No action is required.
</p>
