`src/render/templates/template-5.js`

55 lines
// Template 5 — Magazine Grid
// Mosaic of photo + name card + services + reviews tiles. Feels like a city-mag profile.
import { esc } from '../../lib/escape.js';
import { pickColors, placeholderHero, shell, brandStrip } from './_helpers.js';

export function render(b) {
  const c = pickColors(b);
  const heroSrc = b.hero_image_url || placeholderHero(b, b.name);
  const body = `
${brandStrip(b)}
<section style="padding:40px 0">
  <div class="wrap">
    <div style="display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:18px">
      <div style="grid-row:1/3;background:#000;border-radius:14px;overflow:hidden">
        <img src="${esc(heroSrc)}" alt="${esc(b.name)}" style="width:100%;height:100%;object-fit:cover;display:block;min-height:480px">
      </div>
      <div style="background:${c.primary};color:#fff;border-radius:14px;padding:32px">
        <p style="margin:0 0 8px;opacity:.7;text-transform:uppercase;font-size:11px;letter-spacing:2px">${esc(b.category || 'Local')}</p>
        <h1 style="margin:0 0 12px;font-family:Georgia,serif;font-size:36px;line-height:1.05">${esc(b.name)}</h1>
        <p style="margin:0;font-size:14px;opacity:.92;line-height:1.5">${esc(b.city ? `${b.city}${b.state ? ', ' + b.state : ''}` : '')} ${b.years_in_business ? `· est. ${new Date().getFullYear() - b.years_in_business}` : ''}</p>
      </div>
      <div style="background:${c.accent};color:#fff;border-radius:14px;padding:24px;display:flex;flex-direction:column;justify-content:center">
        <p style="margin:0 0 8px;font-size:13px;opacity:.85">Ready to book?</p>
        <p style="margin:0 0 12px;font-size:22px;font-weight:700">${b.phone ? esc(b.phone) : 'DM us'}</p>
        <a class="btn ghost" href="${b.phone ? `tel:${esc(b.phone)}` : '#'}" style="border-color:#fff;color:#fff;align-self:flex-start">Book →</a>
      </div>
    </div>
  </div>
</section>
<section style="padding:40px 0">
  <div class="wrap">
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px">
      ${['Cuts','Color','Treatments','Styling'].map(s => `
        <div style="background:#f6f4f0;border-radius:10px;padding:24px">
          <div style="width:32px;height:32px;border-radius:50%;background:${c.primary};margin-bottom:10px"></div>
          <strong style="display:block;font-size:15px">${s}</strong>
          <small style="color:#666">By appointment</small>
        </div>`).join('')}
    </div>
  </div>
</section>
<section style="padding:60px 0;background:#0b0b0b;color:#fff">
  <div class="wrap">
    <h2 style="font-family:Georgia,serif;margin:0 0 24px">What people say</h2>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px">
      ${[1,2,3].map(_ => `<blockquote style="margin:0;padding:20px;background:#1a1a1a;border-radius:10px;font-size:14px;line-height:1.5;color:#ddd">"Real people, real care — easily our favorite spot in the neighborhood."<br><small style="opacity:.6;display:block;margin-top:10px">— ${esc(b.city || 'Local')} client</small></blockquote>`).join('')}
    </div>
  </div>
</section>
<footer style="padding:30px 0;text-align:center;color:#888;font-size:13px">${esc(b.name)} ${b.address ? '· ' + esc(b.address) : ''}</footer>`;
  return shell(b.name, body, b);
}

export const meta = { id: 5, name: 'Magazine Grid', blurb: 'Mosaic tiles · review wall · city-mag feel' };