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

48 lines
// Template 3 — Bold Color Block
// Solid colored top half (primary), white bottom half. Geometric, modern.
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="background:${c.primary};color:#fff;padding:80px 0 120px;position:relative;overflow:hidden">
  <div class="wrap" style="position:relative;z-index:2">
    <p style="margin:0 0 14px;text-transform:uppercase;letter-spacing:2px;font-size:13px;opacity:.8">${esc(b.category || 'Local')} · ${esc(b.city || '')}</p>
    <h1 style="font-size:72px;font-weight:900;margin:0 0 18px;letter-spacing:-1px">${esc(b.name)}</h1>
    <p style="font-size:20px;max-width:600px;opacity:.95;margin:0 0 28px">${esc(b.about_text || `Bold cuts, color, and care. ${b.years_in_business ? `${b.years_in_business}+ years strong.` : ''}`)}</p>
    <a class="btn" href="#book" style="background:#fff;color:${c.primary}">Book your seat →</a>
  </div>
  <div style="position:absolute;right:-100px;top:-50px;width:500px;height:500px;background:${c.accent};border-radius:50%;opacity:.45"></div>
</section>
<section style="margin-top:-80px;position:relative;z-index:3">
  <div class="wrap">
    <img src="${esc(heroSrc)}" alt="${esc(b.name)}" style="width:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);display:block;max-height:520px;object-fit:cover">
  </div>
</section>
<section style="padding:80px 0">
  <div class="wrap">
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center">
      ${[
        { n: b.years_in_business || '—', l: 'years in business' },
        { n: '4.9★', l: 'avg rating' },
        { n: b.owner_name ? esc(b.owner_name) : 'Independent', l: 'owner' },
      ].map(s => `<div><div style="font-size:42px;font-weight:900;color:${c.primary}">${s.n}</div><div style="color:#666;text-transform:uppercase;letter-spacing:1px;font-size:12px;margin-top:6px">${s.l}</div></div>`).join('')}
    </div>
  </div>
</section>
<section id="book" style="padding:60px 0;background:#0b0b0b;color:#fff;text-align:center">
  <div class="wrap">
    <h2 style="margin:0 0 12px;font-size:34px">Let's do this.</h2>
    <p style="margin:0 0 22px;opacity:.85">${b.phone ? esc(b.phone) : 'DM us on Instagram'}</p>
    <a class="btn" href="${b.phone ? `tel:${esc(b.phone)}` : '#'}" style="background:${c.accent}">Book Now</a>
  </div>
</section>
<footer style="padding:24px 0;text-align:center;color:#888;font-size:13px">${esc(b.name)}</footer>`;
  return shell(b.name, body, b);
}

export const meta = { id: 3, name: 'Bold Color Block', blurb: 'Vivid color slab · floating hero · stat strip' };