<!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.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="x-apple-disable-message-reformatting">
  <title>New Enquiry — Nexa Tech</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <!--[if mso]>
  <noscript>
    <xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
  </noscript>
  <![endif]-->
  <style>
    /* Reset */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    /* Responsive */
    @media only screen and (max-width: 620px) {
      .email-wrapper   { width: 100% !important; }
      .email-body      { padding: 0 12px !important; }
      .header-pad      { padding: 28px 20px 22px !important; }
      .field-row td    { display: block !important; width: 100% !important; padding: 0 0 4px 0 !important; }
      .two-col td      { display: block !important; width: 100% !important; padding-right: 0 !important; }
      .content-pad     { padding: 28px 28px 0 !important; }
    }
  </style>
</head>
<body style="margin:0;padding:0;background-color:#eef0f3;font-family:'Roboto',sans-serif;">

<!-- Preheader (hidden preview text) -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;color:#eef0f3;line-height:1px;">
  New contact form submission received — {{ $contact->first_name }} {{ $contact->last_name }} is enquiring.
</div>

<!-- Outer wrapper -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#eef0f3;">
  <tr>
    <td align="center" style="padding:32px 16px;">

      <!-- Email card -->
      <table class="email-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" style="max-width:600px;background-color:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.10);">

        <!-- HEADER -->
        <tr>
          <td class="header-pad" style="background-color:#03080f;padding:32px 40px 26px;text-align:left;">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td>
                  <img src="{{ asset('images/logo.png') }}" alt="Nexa Tech" width="150" style="display:block;border:0;height:auto;">
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <!-- INTRO BAND -->
        <tr>
          <td style="background-color:#f9fafb;padding:16px 40px;border-bottom:1px solid #e8eaed;">
            <p style="margin:0;font-size:13px;color:#6b7280;font-family:'Roboto',sans-serif;line-height:1.5;">
              A visitor has submitted the enquiry form on your website. All submitted details are listed below. Please respond within <strong style="color:#111827;">24 hours</strong> as per your stated response policy.
            </p>
          </td>
        </tr>

        <!-- FORM FIELDS -->
        <tr>
          <td class="content-pad" style="padding:28px 40px 0;">
            <p style="margin:0 0 16px;font-size:11px;font-weight:700;color:#9ca3af;letter-spacing:0.1em;text-transform:uppercase;font-family:'Roboto',sans-serif;">
              Submission Details
            </p>

            <!-- Two-col row: First & Last name -->
            <table class="two-col" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:2px;">
              <tr>
                <td width="50%" style="padding-bottom:12px;padding-right:8px;vertical-align:top;">
                  <div style="background-color:#f9fafb;border:1px solid #e4e6ea;border-radius:6px;padding:13px 15px;">
                    <p style="margin:0 0 3px;font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:0.08em;text-transform:uppercase;font-family:'Roboto',sans-serif;">First Name</p>
                    <p style="margin:0;font-size:14px;color:#111827;font-weight:600;font-family:'Roboto',sans-serif;">{{ $contact->first_name }}</p>
                  </div>
                </td>
                <td width="50%" style="padding-bottom:12px;vertical-align:top;">
                  <div style="background-color:#f9fafb;border:1px solid #e4e6ea;border-radius:6px;padding:13px 15px;">
                    <p style="margin:0 0 3px;font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:0.08em;text-transform:uppercase;font-family:'Roboto',sans-serif;">Last Name</p>
                    <p style="margin:0;font-size:14px;color:#111827;font-weight:600;font-family:'Roboto',sans-serif;">{{ $contact->last_name }}</p>
                  </div>
                </td>
              </tr>
            </table>

            <!-- Email -->
            <div style="background-color:#f9fafb;border:1px solid #e4e6ea;border-radius:6px;padding:13px 15px;margin-bottom:12px;">
              <p style="margin:0 0 3px;font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:0.08em;text-transform:uppercase;font-family:'Roboto',sans-serif;">Email Address</p>
              <a href="mailto:{{ $contact->email }}" style="font-size:14px;color:#03080f;font-weight:600;text-decoration:underline;font-family:'Roboto',sans-serif;">{{ $contact->email }}</a>
            </div>

            <!-- Company -->
            <div style="background-color:#f9fafb;border:1px solid #e4e6ea;border-radius:6px;padding:13px 15px;margin-bottom:12px;">
              <p style="margin:0 0 3px;font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:0.08em;text-transform:uppercase;font-family:'Roboto',sans-serif;">Company</p>
              <p style="margin:0;font-size:14px;color:#111827;font-weight:600;font-family:'Roboto',sans-serif;">{{ $contact->company ?? '-' }}</p>
            </div>

            {{-- Service interest — highlighted
            <div style="background-color:#03080f;border-radius:6px;padding:14px 16px;margin-bottom:12px;">
              <p style="margin:0 0 3px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.4);letter-spacing:0.08em;text-transform:uppercase;font-family:'Roboto',sans-serif;">Service Interested In</p>
              <p style="margin:0;font-size:15px;color:#ffffff;font-weight:700;font-family:'Roboto',sans-serif;">{{ $contact->service ? $contact->service->name : '-' }}</p>
            </div> --}}

            <!-- Message -->
            <div style="background-color:#f9fafb;border:1px solid #e4e6ea;border-radius:6px;padding:14px 16px;margin-bottom:0;">
              <p style="margin:0 0 8px;font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:0.08em;text-transform:uppercase;font-family:'Roboto',sans-serif;">Project Message</p>
              <p style="margin:0;font-size:14px;color:#374151;line-height:1.7;font-family:'Roboto',sans-serif;white-space:pre-wrap;">{{ $contact->message }}</p>
            </div>
          </td>
        </tr>

        <!-- SPACER -->
        <tr>
          <td style="padding:24px 40px 28px;">
          </td>
        </tr>

        <!-- DIVIDER -->
        <tr>
          <td style="padding:0 40px;">
            <div style="height:1px;background-color:#e4e6ea;"></div>
          </td>
        </tr>

        <!-- FOOTER -->
        <tr>
          <td style="background-color:#03080f;padding:18px 40px;border-radius:0 0 8px 8px;">
            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td style="vertical-align:middle;">
                  <img src="{{ asset('images/logo.png') }}" alt="Nexa Tech" width="90" style="display:block;border:0;height:auto;">
                </td>
                <td align="right" style="vertical-align:middle;">
                  <p style="margin:0;font-size:11px;color:#fff;font-family:'Roboto',sans-serif;">&copy; {{ date('Y') }} Nexa Tech Limited. All rights reserved.</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>

      </table>
      <!-- /Email card -->

    </td>
  </tr>
</table>
<!-- /Outer wrapper -->

</body>
</html>
