<section class="project-form-shell">
  <div class="admin-header">
    <h1>Company Settings</h1>
    <a class="button button-secondary" href="/admin/settings/offices">Office Locations &rarr;</a>
  </div>
  <p class="hint" style="margin-bottom: 1.5rem;">These details apply across the whole site: header, footer, and the Contact page. Email delivery and spam-protection credentials moved to System &gt; Integrations.</p>

  <form method="POST" action="/admin/settings?_method=PUT">
    <div class="form-grid">
      <div class="form-main">

        <div class="form-section">
          <h3 class="form-section-title">Contact details</h3>
          <label>
            Email address
            <input type="email" name="email" value="<%= settings.email || '' %>" placeholder="info@zucegroup.com">
          </label>
          <label>
            Phone number
            <input type="text" name="phone" value="<%= settings.phone || '' %>" placeholder="+254 734 040 593">
          </label>
          <label>
            WhatsApp number <span class="hint">(can be the same as phone)</span>
            <input type="text" name="whatsapp" value="<%= settings.whatsapp || '' %>" placeholder="+254 734 040 593">
          </label>
          <label>
            Postal address
            <textarea name="address" rows="3"><%= settings.address || '' %></textarea>
          </label>
          <label>
            Office hours
            <input type="text" name="officeHours" value="<%= settings.officeHours || '' %>" placeholder="Monday - Friday, 8:00am - 5:00pm">
          </label>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">Map</h3>
          <label>
            Google Maps embed link <span class="hint">(from Google Maps: Share &rarr; Embed a map &rarr; copy the src=&quot;...&quot; URL)</span>
            <input type="text" name="mapEmbedUrl" value="<%= settings.mapEmbedUrl || '' %>" placeholder="https://www.google.com/maps/embed?pb=...">
          </label>
          <p class="hint">This is the map shown on the main Contact page. Individual offices can each have their own map under Office Locations.</p>
        </div>

        <div class="form-section">
          <h3 class="form-section-title">Social media</h3>
          <label>
            Facebook page URL
            <input type="text" name="facebookUrl" value="<%= settings.facebookUrl || '' %>" placeholder="https://www.facebook.com/zucegroup">
          </label>
          <label>
            LinkedIn page URL
            <input type="text" name="linkedinUrl" value="<%= settings.linkedinUrl || '' %>" placeholder="https://www.linkedin.com/company/zucegroup">
          </label>
          <label>
            X (Twitter) URL
            <input type="text" name="twitterUrl" value="<%= settings.twitterUrl || '' %>" placeholder="https://x.com/zucegroup">
          </label>
          <label>
            YouTube URL
            <input type="text" name="youtubeUrl" value="<%= settings.youtubeUrl || '' %>">
          </label>
          <label>
            Instagram URL
            <input type="text" name="instagramUrl" value="<%= settings.instagramUrl || '' %>">
          </label>
          <p class="hint">Leave any of these blank to hide that icon in the footer.</p>
        </div>

      </div>

      <div class="form-sidebar">
        <div class="form-section">
          <h3 class="form-section-title">Save</h3>
          <p class="hint">Changes apply site-wide immediately.</p>
          <button type="submit" class="button button-primary form-save-button">Save settings</button>
        </div>
      </div>
    </div>
  </form>
</section>
