<% layout('layouts/main') %>

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

<section class="seo-page-head blog-head">
  <p class="eyebrow">Infos utiles</p>
  <h1>Articles et conseils publiés par <%= publicSite.name %>.</h1>
  <p>Retrouvez les contenus de l’entreprise: prestations, préparation de demande, conseils pratiques, actualités et informations utiles.</p>
  <div class="actions">
    <a class="button" href="<%= publicSite.quoteUrl %>">Demander un devis gratuit</a>
    <a class="button secondary" href="<%= publicSite.servicesUrl %>">Voir les services</a>
  </div>
</section>

<% if (typeof articlePhotos !== 'undefined' && articlePhotos.length) { %>
  <section class="seo-section photo-strip">
    <% articlePhotos.forEach((photo) => { %>
      <figure>
        <img src="/photos/<%= photo.stored_name %>" alt="<%= photo.alt_text %>" loading="lazy">
        <% if (photo.caption) { %><figcaption><%= photo.caption %></figcaption><% } %>
      </figure>
    <% }) %>
  </section>
<% } %>

<section class="seo-section blog-layout blog-index-layout">
  <div class="blog-grid">
    <% guidePages.forEach((guide) => { const service = publicSite.services.find((item) => item.slug === guide.serviceSlug); %>
      <article class="seo-card blog-card">
        <span class="service-kicker"><%= service ? service.title : 'Article' %></span>
        <h2><a href="<%= publicSite.guidesUrl %>/<%= guide.slug %>"><%= guide.title %></a></h2>
        <p><%= guide.intro %></p>
        <div class="blog-card-footer">
          <a class="text-link" href="<%= publicSite.guidesUrl %>/<%= guide.slug %>">Lire l’article</a>
          <% if (service) { %><a class="text-link secondary-link" href="<%= publicSite.quoteUrl %>?service=<%= service.slug %>">Demander cette prestation</a><% } %>
        </div>
      </article>
    <% }) %>
    <% if (!guidePages.length) { %>
      <article class="seo-card blog-card">
        <span class="service-kicker">Articles</span>
        <h2>Aucun article publié pour le moment.</h2>
        <p>Les contenus validés par l’entreprise apparaissent ici avec leurs conseils, prestations et informations utiles.</p>
      </article>
    <% } %>
  </div>
  <aside class="service-sticky-cta blog-sidebar">
    <h2>Besoin d’une réponse rapide ?</h2>
    <p>Vous pouvez demander un devis, envoyer des photos et indiquer votre préférence de contact.</p>
    <a class="button" href="<%= publicSite.quoteUrl %>">Commencer</a>
    <div class="compact-link-list">
      <% publicSite.services.slice(0, 7).forEach((service) => { %>
        <a href="<%= publicSite.quoteUrl %>?service=<%= service.slug %>"><%= service.title %></a>
      <% }) %>
    </div>
  </aside>
</section>

<section class="seo-section">
  <div class="section-heading">
    <p class="eyebrow">Zones</p>
    <h2>Zones desservies par <%= publicSite.name %>.</h2>
  </div>
  <div class="compact-link-grid">
    <% (publicSite.zones.length ? publicSite.zones : ['Zone principale à configurer']).forEach((zone) => { %>
      <a href="<%= publicSite.contactUrl %>"><%= zone %></a>
    <% }) %>
  </div>
</section>
