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

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

<section class="seo-page-head guide-head">
  <p class="eyebrow">Article</p>
  <h1><%= page.h1 %></h1>
  <p><%= page.intro %></p>
  <div class="actions">
    <a class="button" href="<%= publicSite.quoteUrl %><%= service ? '?service=' + service.slug : '' %>">Demander un devis</a>
    <% if (service) { %><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 guide-layout">
  <div class="guide-content">
    <% if (page.sections && page.sections.length) { %>
      <% page.sections.forEach((section) => { %>
        <article class="seo-card guide-block">
          <h2><%= section.title %></h2>
          <ul class="checked-list">
            <% section.items.forEach((item) => { %><li><%= item %></li><% }) %>
          </ul>
        </article>
      <% }) %>
    <% } else { %>
      <article class="seo-card guide-block article-body">
        <% String(page.body || '').split(/\n{2,}/).filter(Boolean).forEach((paragraph) => { %>
          <p><%= paragraph.trim() %></p>
        <% }) %>
      </article>
    <% } %>
  </div>
  <aside class="service-sticky-cta">
    <h2>Besoin d’un devis ?</h2>
    <p>Décrivez votre besoin, votre adresse et les détails utiles. Vous pouvez ajouter des photos pour une estimation plus précise.</p>
    <a class="button" href="<%= publicSite.quoteUrl %><%= service ? '?service=' + service.slug : '' %>">Commencer</a>
  </aside>
</section>

<% if (page.faq && page.faq.length) { %>
  <section class="seo-section service-faq-layout">
    <div class="section-heading">
      <p class="eyebrow">Questions fréquentes</p>
      <h2>Les réponses utiles avant de réserver.</h2>
    </div>
    <div class="faq-list">
      <% page.faq.forEach(([question, answer]) => { %>
        <details>
          <summary><%= question %></summary>
          <p><%= answer %></p>
        </details>
      <% }) %>
    </div>
  </section>
<% } %>

<section class="seo-section">
  <div class="section-heading">
    <p class="eyebrow">Services associés</p>
    <h2>Continuer avec la bonne prestation.</h2>
  </div>
  <div class="compact-link-grid">
    <% publicSite.services.slice(0, 6).forEach((item) => { %>
      <a href="<%= publicSite.quoteUrl %>?service=<%= item.slug %>"><%= item.title %></a>
    <% }) %>
  </div>
</section>
