<!doctype html>
<html>
<body style="margin:0;padding:0;background:#0c0e13;font-family:Segoe UI,Arial,sans-serif;color:#e8e0d4;">
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="background:#0c0e13;padding:28px 12px;">
    <tr><td align="center">
      <table role="presentation" width="600" cellspacing="0" cellpadding="0" style="max-width:600px;width:100%;background:#ffffff;border:1px solid #1e2430;border-radius:16px;overflow:hidden;">

        <tr><td style="padding:30px;background:linear-gradient(120deg,#f0c040,#d4a420);color:#ffffff;">
          <div style="font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.9;">Get In Touch</div>
          <h1 style="margin:10px 0 0;font-size:26px;line-height:1.2;color:#ffffff;">New Message from {{ contact.name }}</h1>
        </td></tr>

        <tr><td style="padding:28px 30px;">
          <table role="presentation" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border:1px solid #1e2430;border-radius:10px;overflow:hidden;">
            {% for label, value in [
              ('Name', contact.name),
              ('Email', contact.email),
              ('Phone', contact.phone),
              ('Received', contact.created_at)
            ] %}
            <tr>
              <td style="padding:11px 16px;border-bottom:1px solid #141820;color:#8c8070;font-size:13px;width:35%;">{{ label }}</td>
              <td style="padding:11px 16px;border-bottom:1px solid #141820;text-align:right;font-weight:600;color:#e8e0d4;font-size:14px;">{{ value }}</td>
            </tr>
            {% endfor %}
          </table>

          <div style="margin-top:18px;padding:18px;background:#111620;border:1px solid #1e2430;border-radius:10px;">
            <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#d4a420;margin-bottom:10px;">Message</div>
            <p style="margin:0;font-size:14.5px;line-height:1.75;color:#b8ac9e;white-space:pre-wrap;">{{ contact.message }}</p>
          </div>

          <div style="margin-top:22px;text-align:center;">
            <a href="mailto:{{ contact.email }}" style="display:inline-block;padding:13px 26px;background:linear-gradient(120deg,#d4a420,#f0c040);color:#ffffff;text-decoration:none;border-radius:10px;font-size:14.5px;font-weight:600;">Reply to {{ contact.name }}</a>
          </div>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>
