<% layout('layouts/main') %>
<% const site = publicSite; %>
<% const builder = site.builder || { blocks: [] }; %>
<% const blocks = (builder.blocks || []).filter((block) => block.visible !== false); %>
<% const faqBlockCount = blocks.filter((block) => block.type === 'faq').length; %>
<% const testimonialBlockCount = blocks.filter((block) => block.type === 'testimonials').length; %>
<% let renderedFaqBlocks = 0; %>
<% let renderedTestimonialBlocks = 0; %>
<% const fallbackZones = site.zones.length ? site.zones : ['Zone principale', 'Zone secondaire']; %>
<% const fallbackServices = site.services.length ? site.services : [{ title: 'Nettoyage régulier', slug: 'nettoyage-regulier', short: 'Prestation de nettoyage préparée selon votre besoin, avec réponse structurée et suivi en ligne.' }]; %>
<% const fallbackProofs = [
  { title: 'Devis clair', text: 'Demande en ligne et réponse suivie.' },
  { title: 'Suivi moderne', text: 'Documents, messages et interventions.' },
  { title: 'Service local', text: fallbackZones.slice(0, 3).join(', ') }
]; %>
<% const fallbackTestimonials = [
  { title: 'Client vérifié', text: 'Communication claire, devis propre et suivi simple.' },
  { title: 'Intervention suivie', text: 'Les échanges, documents et rendez-vous restent centralisés.' },
  { title: 'Expérience moderne', text: 'Un espace client pratique du devis à la facture.' }
]; %>
<% const fallbackFaq = [
  { title: 'Le devis est-il gratuit ?', text: 'Oui, la demande est gratuite et sans engagement.' },
  { title: 'Puis-je suivre ma demande en ligne ?', text: 'Oui, l’espace client permet de suivre demandes, devis, factures et messages.' },
  { title: 'Comment contacter l’entreprise ?', text: 'Vous pouvez utiliser le formulaire, l’espace client ou les coordonnées affichées sur le site.' }
]; %>
<% const mediaStyle = (data = {}) => `object-fit:${data.imageFit || 'cover'};object-position:${data.imagePosition || 'center center'};`; %>
<% const mediaAspect = (data = {}) => `media-aspect-${String(data.imageAspect || '4-3').replace(/[^a-z0-9-]/gi, '')}`; %>
<% const templateClass = `template-${String(builder.template || 'premium-service').replace(/[^a-z0-9-]/gi, '')}`; %>

<div class="tenant-builder-page <%= templateClass %>">
  <% blocks.forEach((block) => { const data = block.settings || {}; %>
    <% if (block.type === 'hero') { %>
      <section class="home-hero tenant-hero builder-hero <%= data.imageUrl ? 'has-visual' : '' %>">
        <div class="home-hero-copy">
          <p class="eyebrow"><%= data.eyebrow || site.industryLabel || 'Nettoyage et entretien' %></p>
          <h1><%= data.title || site.heroTitle %></h1>
          <p class="hero-lead"><%= data.text || site.heroText %></p>
          <div class="actions home-hero-actions">
            <a class="button quote-animated" href="<%= site.quoteUrl %>"><%= data.primaryCta || 'Demander un devis' %></a>
            <% if (site.phoneHref) { %><a class="button secondary call-button" href="tel:<%= site.phoneHref %>"><%= data.secondaryCta || 'Appeler' %></a><% } %>
            <a class="hero-text-link" href="<%= site.loginUrl %>">Accéder à mon espace</a>
          </div>
        </div>
        <% if (data.imageUrl) { %>
          <figure class="builder-hero-visual <%= mediaAspect(data) %>">
            <img src="<%= data.imageUrl %>" alt="<%= data.title || site.name %>" loading="eager" style="<%= mediaStyle(data) %>">
          </figure>
        <% } %>
      </section>
    <% } else if (block.type === 'proof') { %>
      <section class="builder-proof-strip">
        <% ((data.items && data.items.length ? data.items : fallbackProofs).slice(0, 4)).forEach((item) => { %>
          <article>
            <strong><%= item.title %></strong>
            <span><%= item.text %></span>
          </article>
        <% }) %>
      </section>
    <% } else if (block.type === 'services') { %>
      <% const services = data.items && data.items.length ? data.items : fallbackServices; %>
      <section class="seo-section home-services builder-section builder-services">
        <div class="home-services-head">
          <p class="eyebrow lined-eyebrow"><%= data.eyebrow || 'Prestations' %></p>
          <h2><%= data.title || 'Prestations de nettoyage avec devis clair.' %></h2>
          <% if (data.text) { %><p><%= data.text %></p><% } %>
        </div>
        <div class="home-service-grid tenant-service-grid">
          <% services.forEach((service) => { %>
            <article class="home-service-card <%= service.featured ? 'service-featured-wide' : '' %>">
              <span class="home-service-icon" aria-hidden="true"><svg viewBox="0 0 48 48"><path d="M18 25l5 5 10-12"/><circle cx="24" cy="24" r="18"/></svg></span>
              <h3><a href="<%= site.quoteUrl %>?service=<%= service.slug || '' %>"><%= service.title %></a></h3>
              <p><%= service.short || service.text || 'Prestation de nettoyage préparée selon votre besoin, avec réponse structurée et suivi en ligne.' %></p>
              <a class="text-link service-more-link" href="<%= site.quoteUrl %>?service=<%= service.slug || '' %>">Demander un devis <span>→</span></a>
            </article>
          <% }) %>
        </div>
      </section>
    <% } else if (block.type === 'imageText') { %>
      <section class="seo-section home-confidence builder-section builder-image-text <%= data.imageUrl ? 'has-visual' : '' %>">
        <div class="confidence-copy">
          <p class="eyebrow lined-eyebrow"><%= data.eyebrow || 'À propos' %></p>
          <h2><%= data.title || site.aboutTitle %></h2>
          <p><%= data.text || site.aboutText %></p>
        </div>
        <% if (data.imageUrl) { %>
          <figure class="builder-split-image <%= mediaAspect(data) %>">
            <img src="<%= data.imageUrl %>" alt="<%= data.title || site.name %>" loading="lazy" style="<%= mediaStyle(data) %>">
          </figure>
        <% } else { %>
          <div class="confidence-points">
            <% ((data.points && data.points.length ? data.points : [
              { title: '01', text: 'Demande de devis centralisée' },
              { title: '02', text: 'Suivi client en ligne' },
              { title: '03', text: 'Planning et documents connectés' },
              { title: '04', text: 'Informations client toujours accessibles' }
            ])).forEach((point) => { %>
              <article><strong><%= point.title %></strong><span><%= point.text %></span></article>
            <% }) %>
          </div>
        <% } %>
      </section>
    <% } else if (block.type === 'gallery') { %>
      <% const images = data.images || []; %>
      <% if (images.length) { %>
        <section class="seo-section builder-section builder-gallery">
          <div class="section-heading compact-heading">
            <p class="eyebrow lined-eyebrow"><%= data.eyebrow || 'Réalisations' %></p>
            <h2><%= data.title || 'Photos et réalisations' %></h2>
            <% if (data.text) { %><p><%= data.text %></p><% } %>
          </div>
          <div class="photo-strip">
            <% images.slice(0, 6).forEach((image) => { %>
              <figure class="<%= mediaAspect(data) %>">
                <img src="<%= image.url %>" alt="<%= image.alt || site.name %>" loading="lazy" style="<%= mediaStyle(data) %>">
                <% if (image.caption) { %><figcaption><%= image.caption %></figcaption><% } %>
              </figure>
            <% }) %>
          </div>
        </section>
      <% } %>
    <% } else if (block.type === 'zones') { %>
      <% const zones = data.items && data.items.length ? data.items : fallbackZones; %>
      <section class="seo-section home-zones builder-section">
        <div>
          <p class="eyebrow lined-eyebrow"><%= data.eyebrow || 'Zones desservies' %></p>
          <h2><%= data.title || `${site.name} intervient dans vos zones locales.` %></h2>
          <p><%= data.text || (zones.length ? `Zones principales: ${zones.join(', ')}.` : 'Contactez-nous pour confirmer la disponibilité dans votre commune.') %></p>
        </div>
        <div class="home-zone-links">
          <% zones.forEach((zone) => { %><a href="<%= site.contactUrl %>"><%= zone %></a><% }) %>
        </div>
      </section>
    <% } else if (block.type === 'testimonials') { %>
      <% const testimonials = renderedTestimonialBlocks ? [] : (data.items && data.items.length ? data.items : (testimonialBlockCount === 1 ? fallbackTestimonials : [])); %>
      <% if (testimonials.length) { %>
        <% renderedTestimonialBlocks += 1; %>
        <section class="seo-section builder-section builder-testimonials">
          <div class="section-heading compact-heading">
            <p class="eyebrow lined-eyebrow"><%= data.eyebrow || 'Avis' %></p>
            <h2><%= data.title || 'Ce que les clients apprécient' %></h2>
            <% if (data.text) { %><p><%= data.text %></p><% } %>
          </div>
          <div class="builder-card-grid">
            <% testimonials.forEach((item) => { %>
              <article><p><%= item.text %></p><strong><%= item.title %></strong></article>
            <% }) %>
          </div>
        </section>
      <% } %>
    <% } else if (block.type === 'faq') { %>
      <% const faqItems = renderedFaqBlocks ? [] : (data.items && data.items.length ? data.items : (faqBlockCount === 1 ? fallbackFaq : [])); %>
      <% if (faqItems.length) { %>
        <% renderedFaqBlocks += 1; %>
        <section class="seo-section builder-section builder-faq">
          <div class="section-heading compact-heading">
            <p class="eyebrow lined-eyebrow"><%= data.eyebrow || 'Questions fréquentes' %></p>
            <h2><%= data.title || 'Questions fréquentes' %></h2>
            <% if (data.text) { %><p><%= data.text %></p><% } %>
          </div>
          <div class="builder-card-grid">
            <% faqItems.forEach((item) => { %>
              <article><strong><%= item.title %></strong><p><%= item.text %></p></article>
            <% }) %>
          </div>
        </section>
      <% } %>
    <% } else if (block.type === 'cta') { %>
      <section class="final-cta home-final-cta builder-cta">
        <div>
          <p class="eyebrow"><%= data.eyebrow || 'Contact' %></p>
          <h2><%= data.title || `Besoin d’une prestation ? Envoyez votre demande à ${site.name}.` %></h2>
          <p><%= data.text || site.contactIntro %></p>
          <div class="home-contact-details">
            <div class="home-contact-title">
              <strong><%= site.name %></strong>
              <span>Coordonnées</span>
            </div>
            <div class="home-contact-list">
              <div><span>Adresse</span><strong><%- site.addressLines.length ? site.addressLines.join('<br>') : 'Adresse à configurer' %></strong></div>
              <div><span>Email</span><strong><% if (site.email) { %><a href="mailto:<%= site.email %>"><%= site.email %></a><% } else { %>Email à configurer<% } %></strong></div>
              <div><span>Téléphone</span><strong><% if (site.phoneHref) { %><a href="tel:<%= site.phoneHref %>"><%= site.phone %></a><% } else { %>Téléphone à configurer<% } %></strong></div>
            </div>
          </div>
        </div>
        <div class="actions">
          <a class="button quote-animated" href="<%= site.quoteUrl %>"><%= data.primaryCta || 'Demander un devis' %></a>
          <a class="button secondary" href="<%= site.contactUrl %>"><%= data.secondaryCta || 'Contact' %></a>
        </div>
      </section>
    <% } %>
  <% }) %>
</div>
