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

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

<section class="seo-page-head zones-head">
  <p class="eyebrow">Zones d’intervention</p>
  <h1>Zones desservies par <%= site.name %>.</h1>
  <p><%= site.zones.length ? `${site.name} intervient notamment à ${site.zones.join(', ')}.` : 'Configurez les zones desservies depuis les paramètres de votre entreprise.' %></p>
  <div class="actions">
    <a class="button" href="<%= site.quoteUrl %>">Demander un devis</a>
    <a class="button secondary" href="<%= site.servicesUrl %>">Voir les services</a>
  </div>
</section>

<section class="seo-section">
  <div class="section-heading">
    <p class="eyebrow">Zones principales</p>
    <h2>Un service local et réactif.</h2>
  </div>
  <div class="zone-grid">
    <% (site.zones.length ? site.zones : ['Zone principale', 'Zone secondaire', 'Zone à configurer']).forEach((zone) => { %>
      <article class="seo-card zone-card">
        <span class="service-kicker">Zone suivie</span>
        <h2><a href="<%= site.quoteUrl %>?ville=<%= encodeURIComponent(zone) %>"><%= zone %></a></h2>
        <p>Demandez un devis pour une intervention à <%= zone %>. Les détails, accès, délais et contraintes sont analysés avant proposition.</p>
        <div class="zone-actions">
          <a class="text-link" href="<%= site.quoteUrl %>?ville=<%= encodeURIComponent(zone) %>">Demander un devis</a>
          <a class="text-link" href="<%= site.contactUrl %>">Contacter</a>
        </div>
      </article>
    <% }) %>
  </div>
</section>

<section class="seo-band">
  <div>
    <p class="eyebrow">Prestations locales</p>
    <h2>Services, devis et suivi client selon votre zone.</h2>
    <p>Chaque demande est analysée selon l’adresse, la prestation, les accès, les délais et les informations transmises.</p>
  </div>
  <div class="seo-list">
    <% site.services.slice(0, 4).forEach((service) => { %><span><%= service.title %></span><% }) %>
  </div>
</section>

<section class="final-cta">
  <div>
    <p class="eyebrow">Devis</p>
    <h2>Votre zone est couverte ? Envoyez votre demande.</h2>
    <p>Indiquez l’adresse d’intervention et les détails utiles. <%= site.name %> vous répond avec une offre adaptée.</p>
  </div>
  <a class="button" href="<%= site.quoteUrl %>">Commencer ma demande</a>
</section>
