<section class="post-hero">
  <div class="wrap">
    <p class="eyebrow">Get in touch</p>
    <h1>Contact ZUCE Group</h1>
    <p class="post-date">Tell us about your event, campaign or platform, and we will get back to you with the right team for it.</p>
  </div>
  <div class="post-hero-pattern"></div>
</section>

<section class="block">
  <div class="contact-grid">
    <div class="contact-form-col">
      <div class="form-section">
        <h3 class="form-section-title">Send us a message</h3>
        <form method="POST" action="/contact">
          <!-- Same spam guard as the blog comment form (see post.ejs +
               .honeypot-field in site.css): a hidden field real visitors
               never see or fill, plus a load-time check server side. -->
          <input type="hidden" name="formLoadedAt" value="<%= Date.now() %>">
          <div class="honeypot-field" aria-hidden="true">
            <label>Leave this field empty
              <input type="text" name="website" tabindex="-1" autocomplete="off">
            </label>
          </div>
          <label>
            Your name
            <input type="text" name="name" required placeholder="Jane Doe">
          </label>
          <label>
            Phone number
            <div class="phone-input-group">
              <div class="country-code-picker" data-default-dial="+254">
                <input type="text" class="country-code-search" placeholder="Search country or code" autocomplete="off" aria-label="Country code">
                <input type="hidden" name="phoneCountryCode" class="country-code-value">
                <div class="country-code-dropdown" hidden></div>
              </div>
              <input type="text" name="phone" placeholder="7XX XXX XXX">
            </div>
          </label>
          <label>
            Email address
            <input type="email" name="email" placeholder="you@company.com">
          </label>
          <label>
            Subject
            <input type="text" name="subject" placeholder="What is this about?">
          </label>
          <label>
            Which service is this about? <span class="hint">(optional)</span>
            <select name="serviceInterest">
              <option value="">General enquiry / not sure</option>
              <% services.forEach(function(service) { %>
                <option value="<%= service.name %>"><%= service.name %></option>
              <% }) %>
            </select>
          </label>
          <label>
            Your message <span class="hint">(optional)</span>
            <textarea name="message" rows="5" placeholder="Tell us a bit about what you need..."></textarea>
          </label>
          <% if (settings.turnstileSiteKey) { %>
            <div class="cf-turnstile" data-sitekey="<%= settings.turnstileSiteKey %>"></div>
          <% } %>
          <button type="submit" class="button button-primary">Send message</button>
        </form>
      </div>
    </div>

    <div class="contact-info-col">
      <div class="contact-info-card">
        <h4>Reach us directly</h4>
        <ul class="contact-info-list">
          <% if (settings.phone) { %>
            <li><span class="contact-info-label">Phone</span><a href="tel:<%= settings.phone.replace(/\s+/g, '') %>"><%= settings.phone %></a></li>
          <% } %>
          <% if (settings.whatsapp) { %>
            <li><span class="contact-info-label">WhatsApp</span><a href="https://wa.me/<%= settings.whatsapp.replace(/[^0-9]/g, '') %>" target="_blank" rel="noopener"><%= settings.whatsapp %></a></li>
          <% } %>
          <% if (settings.email) { %>
            <li><span class="contact-info-label">Email</span><a href="mailto:<%= settings.email %>"><%= settings.email %></a></li>
          <% } %>
          <% if (settings.officeHours) { %>
            <li><span class="contact-info-label">Hours</span><span><%= settings.officeHours %></span></li>
          <% } %>
        </ul>
        <% if (settings.facebookUrl || settings.linkedinUrl || settings.twitterUrl || settings.youtubeUrl || settings.instagramUrl) { %>
          <div class="contact-social-row">
            <% if (settings.linkedinUrl) { %><a href="<%= settings.linkedinUrl %>" target="_blank" rel="noopener" aria-label="LinkedIn">in</a><% } %>
            <% if (settings.facebookUrl) { %><a href="<%= settings.facebookUrl %>" target="_blank" rel="noopener" aria-label="Facebook">f</a><% } %>
            <% if (settings.twitterUrl) { %><a href="<%= settings.twitterUrl %>" target="_blank" rel="noopener" aria-label="X">X</a><% } %>
            <% if (settings.instagramUrl) { %><a href="<%= settings.instagramUrl %>" target="_blank" rel="noopener" aria-label="Instagram">ig</a><% } %>
            <% if (settings.youtubeUrl) { %><a href="<%= settings.youtubeUrl %>" target="_blank" rel="noopener" aria-label="YouTube">yt</a><% } %>
          </div>
        <% } %>
      </div>
    </div>
  </div>
</section>

<section class="block alt">
  <div class="inner">
    <div class="section-head">
      <p class="eyebrow">Find us</p>
      <h2><%= offices.length > 1 ? 'Our offices' : 'Our office' %></h2>
    </div>

    <% var locations = offices.length ? offices : [{ name: 'ZUCE Group', address: settings.address, phone: settings.phone, mapEmbedUrl: settings.mapEmbedUrl }]; %>
    <% var isSingle = locations.length === 1; %>
    <div class="office-grid<%= isSingle ? ' office-grid-single' : '' %>">
      <% locations.forEach(function(loc) { %>
        <div class="office-card<%= isSingle ? ' office-card-single' : '' %>">
          <% if (loc.mapEmbedUrl) { %>
            <div class="office-map">
              <iframe src="<%= loc.mapEmbedUrl %>" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
            </div>
          <% } %>
          <div class="office-body">
            <h4><%= loc.name %></h4>
            <% if (loc.address) { %><p class="office-address"><%- loc.address.replace(/\n/g, '<br>') %></p><% } %>
            <% if (loc.phone) { %><p class="office-phone"><a href="tel:<%= loc.phone.replace(/\s+/g, '') %>"><%= loc.phone %></a></p><% } %>
          </div>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<script src="/js/country-code-picker.js"></script>
<% if (settings.turnstileSiteKey) { %>
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<% } %>
