<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ subject }}</title>
</head>
<body style="margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:#f4f4f5;">

<!-- Preview text (visible in inbox preview) -->
<div style="display:none;font-size:1px;color:#f4f4f5;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
{{ preview_text | default(subject) }}&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
</div>

<table role="presentation" style="width:100%;max-width:600px;margin:0 auto;">

  <!-- Header -->
  <tr>
    <td style="padding:32px 24px 24px;background-color:#111827;text-align:center;">
      <h1 style="margin:0;color:#ffffff;font-size:20px;font-weight:600;letter-spacing:-0.025em;">
        {{ form_name | default('') }}
      </h1>
      {% if sender_name %}
      <p style="margin:8px 0 0 0;color:#9ca3af;font-size:13px;">
        from {{ sender_name }}
      </p>
      {% endif %}
    </td>
  </tr>

  <!-- Body -->
  <tr>
    <td style="padding:32px 24px;background-color:#ffffff;">

      <!-- Greeting -->
      {% if recipient.first_name %}
      <p style="margin:0 0 12px 0;color:#374151;font-size:15px;line-height:1.6;">
        Hi {{ recipient.first_name }},
      </p>
      {% else %}
      <p style="margin:0 0 12px 0;color:#374151;font-size:15px;line-height:1.6;">
        Hello,
      </p>
      {% endif %}

      <!-- Message body -->
      {% if body %}
      <div style="margin:0 0 24px 0;color:#374151;font-size:15px;line-height:1.6;">
        {{ body }}
      </div>
      {% endif %}

      <!-- Field preview (first 3 fields) -->
      {% if field_preview %}
      <table role="presentation" style="width:100%;margin:0 0 24px 0;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;">
        <tr><td style="padding:16px;">
          <p style="margin:0 0 8px 0;color:#6b7280;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;">
            What you'll see:
          </p>
          {{ field_preview }}
        </td></tr>
      </table>
      {% endif %}

      <!-- CTA button -->
      {% if cta_url %}
      <table role="presentation" style="margin:0 0 8px 0;">
        <tr>
          <td style="border-radius:6px;background-color:#3b82f6;">
            <a href="{{ cta_url }}" style="display:inline-block;padding:12px 32px;color:#ffffff;font-size:15px;font-weight:600;text-decoration:none;border-radius:6px;">
              {{ cta_text | default('Open Form') }}
            </a>
          </td>
        </tr>
      </table>
      {% endif %}

      <!-- Fallback URL -->
      {% if cta_url %}
      <p style="margin:16px 0 0 0;color:#9ca3af;font-size:12px;line-height:1.5;">
        If the button above doesn't work, copy and paste this link:<br>
        <a href="{{ cta_url }}" style="color:#6b7280;word-break:break-all;">{{ cta_url }}</a>
      </p>
      {% endif %}

    </td>
  </tr>

  <!-- Footer -->
  <tr>
    <td style="padding:24px;background-color:#f9fafb;text-align:center;border-top:1px solid #e5e7eb;">
      <p style="margin:0 0 8px 0;color:#9ca3af;font-size:12px;line-height:1.5;">
        Sent by {{ sender_name | default('AgentForms') }}
      </p>
      {% if unsubscribe_url %}
      <p style="margin:0;color:#9ca3af;font-size:12px;line-height:1.5;">
        <a href="{{ unsubscribe_url }}" style="color:#6b7280;text-decoration:underline;">Unsubscribe</a>
      </p>
      {% endif %}
      {% if physical_address %}
      <p style="margin:12px 0 0 0;color:#d1d5db;font-size:11px;line-height:1.4;">
        {{ physical_address }}
      </p>
      {% endif %}
    </td>
  </tr>

</table>
</body>
</html>
