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

100 lines
<%- include('../partials/head', { title, bodyClass: 'tpl-studio' }) %>
<%- 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();
%>
<article class="tpl-root">
  <header class="st-hero">
    <div class="st-hero-text">
      <span class="st-pill"><%= installer.claim_status === 'claimed' ? 'Verified studio' : 'Directory listing' %></span>
      <h1 class="st-name"><%= installer.business_name %></h1>
      <p class="st-headline"><%= installer.headline || (installer.bio || '').split(/\.\s/)[0] %></p>
      <div class="st-actions">
        <% if (installer.claim_status === 'claimed') { %>
          <a class="primary" href="/installer/<%= installer.slug %>/book">Book a consultation</a>
        <% } %>
        <% if (installer.website) { %><a class="ghost" href="<%= installer.website %>" target="_blank" rel="noopener">Studio site ↗</a><% } %>
        <% if (installer.instagram_handle) { %><a class="ghost" href="https://instagram.com/<%= encodeURIComponent(installer.instagram_handle) %>" target="_blank" rel="noopener">@<%= installer.instagram_handle %></a><% } %>
      </div>
    </div>
    <div class="st-hero-img" style="background-image:url('<%= heroUrl || '' %>')"></div>
  </header>

  <% if (installer.claim_status === 'unclaimed') { %>
    <div class="tpl-claim-cta" style="color:#0a0a0a;border-color:#d4d2c8;margin:0 64px 32px;border-radius:16px;background:#fff8e6">
      <div style="flex:1">If this is your studio, claim it in 2 minutes to enable bookings and the verified badge.</div>
      <a href="/installer/<%= installer.slug %>/claim" style="background:#0a0a0a;color:#fff;padding:10px 20px;border-radius:10px;text-decoration:none;font-weight:600;font-size:14px">Claim listing</a>
    </div>
  <% } %>

  <div class="st-strip">
    <div><div class="num"><%= installer.service_radius_miles || '—' %></div><div class="lbl">Service radius (mi)</div></div>
    <div><div class="num"><%= installer.team_size || '—' %></div><div class="lbl">Team</div></div>
    <div><div class="num"><%= installer.response_time_hours ? '<' + installer.response_time_hours + 'h' : '—' %></div><div class="lbl">Reply SLA</div></div>
    <div><div class="num"><%= acceptance ? acceptance.rate + '%' : ((credentials||[]).length ? credentials.length : '—') %></div><div class="lbl"><%= acceptance ? 'Accept rate' : 'Brand-trained' %></div></div>
  </div>

  <section class="st-section">
    <div class="st-bio">
      <h2>About</h2>
      <div>
        <p><%= installer.bio || 'Profile not yet completed by the studio.' %></p>
        <% if ((installer.materials || []).length) { %>
          <p style="margin-top:18px;color:#666;font-size:14px"><strong>Materials</strong> — <%= installer.materials.map(function(m){return String(m||'').replace(/_/g,' ');}).filter(Boolean).join(', ') %></p>
        <% } %>
        <% if ((installer.brands_handled || []).length) { %>
          <p style="margin-top:6px;color:#666;font-size:14px"><strong>Brands installed</strong> — <%= installer.brands_handled.join(', ') %></p>
        <% } %>
      </div>
    </div>
  </section>

  <% if (portfolio.length) { %>
    <section class="st-section">
      <h2>Selected projects</h2>
      <div class="st-tiles">
        <% portfolio.slice(0,9).forEach(function(p){ %>
          <article class="st-tile">
            <% if (p.image_url) { %><img src="<%= p.image_url %>" alt="<%= p.title %>" loading="lazy"><% } %>
            <div class="st-tile-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 ((credentials || []).length) { %>
    <section class="st-section" style="padding-top:0">
      <h2>Brand-trained</h2>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <% credentials.forEach(function(c){ %>
          <span style="background:#efece5;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600"><%= c.brand %><% if (c.year_issued) { %> · <%= c.year_issued %><% } %></span>
        <% }); %>
      </div>
    </section>
  <% } %>

  <% if (installer.claim_status === 'claimed') { %>
    <section class="st-cta">
      <h2>Bring <%= installer.business_name %> on the next project</h2>
      <a href="/installer/<%= installer.slug %>/book">Book a consultation</a>
    </section>
  <% } %>
  <%- include('../partials/social-videos') %>

</article>
<%- include('../partials/paper-contributions') %>
<%- include('../partials/coi-request') %>
<%- include('../partials/call-installer') %>
<%- include('../partials/footer') %>