<% layout('layouts/main') %>
<% const site = publicSite; %>

<nav class="breadcrumbs" aria-label="Fil d’Ariane">
  <a href="<%= site.homeUrl %>">Accueil</a>
  <span>/</span>
  <strong>Contact</strong>
</nav>

<section class="seo-page-head">
  <p class="eyebrow">Contact</p>
  <h1>Contactez <%= site.name %>.</h1>
  <p><%= site.contactIntro %></p>
  <div class="actions">
    <a class="button" href="<%= site.quoteUrl %>">Demander un devis</a>
    <% if (site.phoneHref) { %><a class="button secondary" href="tel:<%= site.phoneHref %>">Appeler <%= site.name %></a><% } %>
  </div>
</section>

<section class="seo-section split">
  <div class="seo-card">
    <h2><%= site.name %></h2>
    <p><%- site.addressLines.length ? site.addressLines.join('<br>') : 'Adresse à configurer' %></p>
    <p>
      <% if (site.email) { %><a href="mailto:<%= site.email %>"><%= site.email %></a><% } else { %>Email à configurer<% } %>
      <br>
      <% if (site.phoneHref) { %><a href="tel:<%= site.phoneHref %>"><%= site.phone %></a><% } else { %>Téléphone à configurer<% } %>
    </p>
  </div>
  <div>
    <h2>Zones principales</h2>
    <div class="area-links">
      <% (site.zones.length ? site.zones : ['Zone principale à configurer']).forEach((zone) => { %>
        <a href="<%= site.quoteUrl %>"><%= zone %></a>
      <% }) %>
    </div>
  </div>
</section>

<section class="seo-section">
  <div class="section-heading">
    <p class="eyebrow">Services demandés</p>
    <h2>Choisissez directement votre prestation.</h2>
  </div>
  <div class="compact-link-grid">
    <% site.services.forEach((service) => { %>
      <a href="<%= site.quoteUrl %>?service=<%= service.slug %>"><%= service.title %></a>
    <% }) %>
  </div>
</section>
