`views/public/installer-tpl-bilingue.ejs`

118 lines
<%- include('../partials/head', { title, bodyClass: 'tpl-bilingue' }) %>
<%- include('../partials/header') %>
<%
  function _heroUrl() {
    var s = installer.template_settings || {};
    if (s.hero_url) return s.hero_url;
    if (portfolio.length && portfolio[0].image_url) return portfolio[0].image_url;
    var seg = (typeof pickSegmentImage === 'function') ? pickSegmentImage(installer) : null;
    return seg ? seg.file : null;
  }
  var heroUrl = _heroUrl();
  var s = installer.template_settings || {};
  var esBio = s.bio_es || null;     // optional pre-translated ES bio (manual or AI)
  var esHeadline = s.headline_es || null;
%>
<article class="tpl-root">
  <div class="bl-langtoggle" role="tablist" aria-label="Language">
    <button type="button" class="active" data-set-lang="en" role="tab">EN</button>
    <button type="button" data-set-lang="es" role="tab">ES</button>
  </div>

  <div class="bl-hero">
    <% if (heroUrl) { %><img class="bl-hero-img" src="<%= heroUrl %>" alt="<%= installer.business_name %>"><% } %>
    <div>
      <p data-lang="en" style="color:#b85c2b;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;font-size:12px">Wallcovering Studio</p>
      <p data-lang="es" style="color:#b85c2b;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;font-size:12px">Estudio de Empapelado</p>
      <h1 class="bl-name"><%= installer.business_name %></h1>
      <p class="bl-place"><%= [installer.city, installer.state].filter(Boolean).join(' · ') %><% if (installer.founded_year) { %> · <span data-lang="en">Est.</span><span data-lang="es">Desde</span> <%= installer.founded_year %><% } %></p>
      <% if (installer.headline) { %>
        <p class="bl-headline" data-lang="en"><%= installer.headline %></p>
        <p class="bl-headline" data-lang="es"><%= esHeadline || installer.headline %></p>
      <% } %>
      <% if (installer.claim_status === 'claimed') { %>
        <a class="bl-cta" href="/installer/<%= installer.slug %>/book"><span data-lang="en">Book a consultation</span><span data-lang="es">Solicitar consulta</span></a>
      <% } %>
    </div>
  </div>

  <% if (installer.claim_status === 'unclaimed') { %>
    <div class="tpl-claim-cta" style="color:#b85c2b;border-color:#b85c2b;background:#fff;border-radius:16px">
      <div style="flex:1">
        <span data-lang="en">If you operate <%= installer.business_name %>, claim this listing to enable bookings.</span>
        <span data-lang="es">Si usted opera <%= installer.business_name %>, reclame este listado para habilitar reservas.</span>
      </div>
      <a href="/installer/<%= installer.slug %>/claim" style="background:#b85c2b;color:#fff7ec;padding:10px 22px;border-radius:999px;text-decoration:none;font-weight:700"><span data-lang="en">Claim →</span><span data-lang="es">Reclamar →</span></a>
    </div>
  <% } %>

  <div class="bl-stats">
    <div><div class="num"><%= installer.service_radius_miles || '—' %></div><div class="lbl"><span data-lang="en">Service radius (mi)</span><span data-lang="es">Radio de servicio (mi)</span></div></div>
    <div><div class="num"><%= installer.team_size || '—' %></div><div class="lbl"><span data-lang="en">Team</span><span data-lang="es">Equipo</span></div></div>
    <div><div class="num"><%= installer.response_time_hours ? '<' + installer.response_time_hours + 'h' : '—' %></div><div class="lbl"><span data-lang="en">Response</span><span data-lang="es">Respuesta</span></div></div>
    <div><div class="num"><%= acceptance ? acceptance.rate + '%' : (credentials || []).length %></div><div class="lbl"><%= acceptance ? '<span data-lang="en">Accept rate</span><span data-lang="es">Aceptación</span>' : '<span data-lang="en">Brand-trained</span><span data-lang="es">Certificaciones</span>' %></div></div>
  </div>

  <section class="bl-section">
    <div class="bl-callout">
      <span data-lang="en">Specialist in <%= (installer.materials || ['wallcoverings']).slice(0,3).map(function(m){return String(m||'').replace(/_/g,' ');}).filter(Boolean).join(', ') %> installations.</span>
      <span data-lang="es">Especialista en instalaciones de <%= (installer.materials || ['empapelado']).slice(0,3).map(function(m){return String(m||'').replace(/_/g,' ');}).filter(Boolean).join(', ') %>.</span>
    </div>
    <h2><span data-lang="en">About the studio</span><span data-lang="es">Sobre el estudio</span></h2>
    <% if (installer.bio) { %>
      <p class="bl-bio" data-lang="en"><%= installer.bio %></p>
      <p class="bl-bio" data-lang="es"><%= esBio || installer.bio %></p>
    <% } %>
  </section>

  <% if (portfolio.length) { %>
    <section class="bl-section">
      <h2><span data-lang="en">Recent projects</span><span data-lang="es">Proyectos recientes</span></h2>
      <div class="bl-pf-grid">
        <% portfolio.slice(0,9).forEach(function(p){ %>
          <article class="bl-pf-card">
            <% if (p.image_url) { %><img src="<%= p.image_url %>" alt="<%= p.title %>" loading="lazy"><% } %>
            <div class="meta"><h3><%= p.title %></h3><p><%= [p.city, p.state, p.year].filter(Boolean).join(' · ') %><% if (p.brand) { %> · <%= p.brand %><% } %></p></div>
          </article>
        <% }); %>
      </div>
    </section>
  <% } %>

  <% if (installer.claim_status === 'claimed') { %>
    <section class="bl-cta-final">
      <h2><span data-lang="en">Ready to book <%= installer.business_name %>?</span><span data-lang="es">¿Listo para contratar a <%= installer.business_name %>?</span></h2>
      <a href="/installer/<%= installer.slug %>/book"><span data-lang="en">Book a consultation</span><span data-lang="es">Solicitar consulta</span></a>
    </section>
  <% } %>

  <%- include('../partials/social-videos') %>

</article>
<script>
  (function(){
    var body = document.body;
    var saved = null;
    try { saved = localStorage.getItem('nph-lang'); } catch (e) {}
    if (saved === 'es') { body.classList.add('lang-es'); }
    document.querySelectorAll('[data-set-lang]').forEach(function(b){
      b.addEventListener('click', function(){
        var lang = b.getAttribute('data-set-lang');
        body.classList.toggle('lang-es', lang === 'es');
        document.querySelectorAll('[data-set-lang]').forEach(function(x){ x.classList.toggle('active', x === b); });
        try { localStorage.setItem('nph-lang', lang); } catch (e) {}
      });
    });
    if (saved === 'es') {
      var btn = document.querySelector('[data-set-lang="es"]');
      var btnEn = document.querySelector('[data-set-lang="en"]');
      if (btn) btn.classList.add('active');
      if (btnEn) btnEn.classList.remove('active');
    }
  })();
</script>
<%- include('../partials/paper-contributions') %>
<%- include('../partials/coi-request') %>
<%- include('../partials/call-installer') %>
<%- include('../partials/footer') %>