/* ===========================================================================
   Lya Torres Imóveis — Motor de Capa de Reels (1080 × 1920)
   Renderiza uma capa em espaço real 1080×1920 e escala para o artboard.
   Estilos de selo: nuvem · etiqueta · janela · editorial
   Estados: dados · vendido · alugado
   =========================================================================== */

const BRAND = {
  marromTerra: '#5D3F35',
  marromClaro: '#936B52',
  bege: '#F5F1EC',
  linho: '#ECE2D4',
  nude: '#E6CDBB',
  rosa: '#C8A595',
  terracota: '#B4694A',
  ouro: '#C9A063',
  verde: '#7A8B70',
  tintaSuave: '#7A6A60',
  serif: "'Cormorant Garamond', Georgia, serif",
  sans: "'Hanken Grotesk', system-ui, sans-serif",
};

/* Símbolo da janela (vetor da marca) — tingido por currentColor */
function WindowMark({ size = 100, stroke = 1.7, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', color }} aria-hidden="true">
      <g fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
        <rect x="12" y="10" width="76" height="80"></rect>
        <line x1="50" y1="10" x2="50" y2="88"></line>
        <line x1="12" y1="45" x2="50" y2="45"></line>
        <path d="M12 50 C 24 84, 52 90, 84 64"></path>
        <path d="M18 52 C 30 80, 52 85, 81 65"></path>
        <path d="M80 68 C 77.5 60, 76.5 54, 75 48"></path>
      </g>
      <g fill="currentColor" stroke="none">
        <path d="M76.5 53 C 77.47,47.34 74.87,41.54 70 38.5 C 69.03,44.16 71.63,49.96 76.5 53 Z"></path>
        <path d="M79 56 C 83.12,55.34 85.52,52.14 85 48 C 80.88,48.66 78.48,51.86 79 56 Z"></path>
        <path d="M78 59 C 75.03,55.16 70.03,53.76 65.5 55.5 C 68.47,59.34 73.47,60.74 78 59 Z"></path>
        <circle cx="75" cy="25" r="5.6"></circle>
      </g>
    </svg>
  );
}

/* Wordmark "Lya Torres / IMÓVEIS" */
function Wordmark({ color = BRAND.bege, size = 1 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', lineHeight: 1, color }}>
      <span style={{ fontFamily: BRAND.serif, fontWeight: 500, fontSize: 46 * size, letterSpacing: '.01em' }}>Lya Torres</span>
      <span style={{ fontFamily: BRAND.sans, fontWeight: 500, fontSize: 13 * size, letterSpacing: '.46em', marginTop: 9 * size, paddingLeft: '.46em', opacity: .92 }}>IMÓVEIS</span>
    </div>
  );
}

/* Assinatura de marca legível — nome em caps com filetes */
function BrandSig({ color = BRAND.ouro, rule = 'rgba(201,160,99,.5)', mt = 30 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20, marginTop: mt }}>
      <span style={{ height: 1.5, width: 56, background: rule }}></span>
      <span style={{ fontFamily: BRAND.sans, fontWeight: 600, fontSize: 31, letterSpacing: '.30em', color, whiteSpace: 'nowrap' }}>LYA TORRES</span>
      <span style={{ height: 1.5, width: 56, background: rule }}></span>
    </div>
  );
}

/* Separador • em cor de acento */
function dotted(parts, dotColor) {
  const out = [];
  parts.forEach((p, i) => {
    if (i > 0) out.push(<span key={'d' + i} style={{ color: dotColor, padding: '0 .42em', fontWeight: 400 }}>•</span>);
    out.push(<span key={'p' + i}>{p}</span>);
  });
  return out;
}

/* ----------------------------------------------------------------------------
   SELOS — cada um recebe { d } com os dados e devolve o markup do selo
   d = { bairro, linha2:[...], valor }
   ---------------------------------------------------------------------------- */

function SeloNuvem({ d }) {
  return (
    <div style={{ position: 'absolute', top: 150, left: 0, right: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ color: BRAND.ouro, marginBottom: -30, position: 'relative', zIndex: 2, filter: 'drop-shadow(0 2px 7px rgba(0,0,0,.30))' }}>
        <WindowMark size={108} stroke={3.0} />
      </div>
      <div style={{
        background: BRAND.marromTerra, borderRadius: 90, padding: '74px 70px 60px',
        width: 858, textAlign: 'center', boxShadow: '0 26px 60px rgba(48,30,22,.34)', position: 'relative',
      }}>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 500, fontSize: 104, lineHeight: .98, color: BRAND.bege, letterSpacing: '.005em' }}>{d.bairro}</div>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 500, fontSize: 56, lineHeight: 1, color: BRAND.nude, marginTop: 26 }}>{dotted(d.linha2, BRAND.ouro)}</div>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 70, lineHeight: 1, color: BRAND.ouro, marginTop: 24 }}>{d.valor}</div>
        <BrandSig color={BRAND.ouro} rule="rgba(201,160,99,.45)" mt={32} />
      </div>
    </div>
  );
}

function SeloEtiqueta({ d }) {
  return (
    <div style={{ position: 'absolute', top: 168, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
      <div style={{
        background: BRAND.bege, borderRadius: 44, padding: '60px 64px 56px', width: 824, textAlign: 'center',
        boxShadow: '0 24px 56px rgba(48,30,22,.30)', border: '2px solid ' + BRAND.linho,
      }}>
        <div style={{ color: BRAND.terracota, display: 'flex', justifyContent: 'center', marginBottom: 18 }}><WindowMark size={78} stroke={2.6} /></div>
        <div style={{ fontFamily: BRAND.serif, fontWeight: 600, fontSize: 92, lineHeight: .96, color: BRAND.marromTerra }}>{d.bairro}</div>
        <div style={{ height: 2, width: 120, background: BRAND.terracota, margin: '30px auto 28px', opacity: .8 }}></div>
        <div style={{ fontFamily: BRAND.sans, fontWeight: 500, fontSize: 41, letterSpacing: '.01em', color: BRAND.marromClaro }}>{dotted(d.linha2, BRAND.terracota)}</div>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 72, color: BRAND.terracota, marginTop: 22 }}>{d.valor}</div>
        <BrandSig color={BRAND.marromClaro} rule="rgba(180,105,74,.4)" mt={30} />
      </div>
    </div>
  );
}

function SeloJanela({ d }) {
  return (
    <>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 880, background: 'linear-gradient(180deg, rgba(45,29,21,.86) 0%, rgba(45,29,21,.55) 48%, rgba(45,29,21,0) 100%)' }}></div>
      <div style={{ position: 'absolute', top: 152, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
        <div style={{ position: 'relative', width: 868, background: 'rgba(53,35,26,.78)', backdropFilter: 'blur(2px)', padding: '58px 56px 52px', textAlign: 'center', border: '2.5px solid ' + BRAND.ouro, boxShadow: '0 24px 56px rgba(30,18,12,.40)' }}>
          <div style={{ color: BRAND.ouro, display: 'flex', justifyContent: 'center', marginBottom: 20 }}><WindowMark size={92} stroke={2.8} /></div>
          <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 500, fontSize: 104, lineHeight: .98, color: BRAND.bege }}>{d.bairro}</div>
          <div style={{ height: 1.5, background: 'rgba(201,160,99,.6)', margin: '28px 30px' }}></div>
          <div style={{ fontFamily: BRAND.sans, fontWeight: 500, fontSize: 42, letterSpacing: '.05em', textTransform: 'uppercase', color: BRAND.bege }}>{dotted(d.linha2, BRAND.ouro)}</div>
          <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 76, color: BRAND.ouro, marginTop: 20 }}>{d.valor}</div>
          <BrandSig color={BRAND.ouro} rule="rgba(201,160,99,.5)" mt={30} />
        </div>
      </div>
    </>
  );
}

function SeloEditorial({ d }) {
  return (
    <>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1080, background: 'linear-gradient(180deg, rgba(45,29,21,.93) 0%, rgba(45,29,21,.80) 30%, rgba(45,29,21,.45) 62%, rgba(45,29,21,0) 100%)' }}></div>
      <div style={{ position: 'absolute', top: 176, left: 86, right: 86 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, marginBottom: 30 }}>
          <span style={{ color: BRAND.ouro }}><WindowMark size={74} stroke={2.8} /></span>
          <span style={{ fontFamily: BRAND.sans, fontWeight: 600, fontSize: 33, letterSpacing: '.30em', textTransform: 'uppercase', color: BRAND.bege }}>Lya Torres</span>
          <span style={{ flex: 1, height: 1.5, background: 'rgba(201,160,99,.55)' }}></span>
        </div>
        <div style={{ fontFamily: BRAND.sans, fontWeight: 600, fontSize: 30, letterSpacing: '.30em', textTransform: 'uppercase', color: BRAND.ouro, marginBottom: 14 }}>À venda em</div>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 500, fontSize: 150, lineHeight: .9, color: BRAND.bege, letterSpacing: '-.01em' }}>{d.bairro}</div>
        <div style={{ height: 2, width: 220, background: BRAND.ouro, margin: '38px 0 32px' }}></div>
        <div style={{ fontFamily: BRAND.sans, fontWeight: 500, fontSize: 46, letterSpacing: '.04em', color: BRAND.bege }}>{dotted(d.linha2, BRAND.ouro)}</div>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 98, color: BRAND.ouro, marginTop: 24 }}>{d.valor}</div>
      </div>
    </>
  );
}

function SeloJanelaClara({ d, boxY = 0.72 }) {
  return (
    <div style={{ position: 'absolute', top: boxY * 1920, left: 0, right: 0, transform: 'translateY(-50%)', display: 'flex', justifyContent: 'center' }}>
      <div style={{ position: 'relative', width: 824, background: BRAND.bege, padding: '44px 54px 40px', textAlign: 'center', boxShadow: '0 22px 50px rgba(48,30,22,.32)', border: '12px solid ' + BRAND.bege, outline: '2px solid ' + BRAND.terracota, outlineOffset: '-14px' }}>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 88, lineHeight: .95, color: BRAND.marromTerra }}>{d.bairro}</div>
        <div style={{ height: 1.5, width: 150, background: 'rgba(180,105,74,.55)', margin: '22px auto' }}></div>
        <div style={{ fontFamily: BRAND.sans, fontWeight: 600, fontSize: 35, letterSpacing: '.04em', textTransform: 'uppercase', color: BRAND.marromClaro }}>{dotted(d.linha2, BRAND.terracota)}</div>
        <div style={{ fontFamily: BRAND.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 68, color: BRAND.terracota, marginTop: 14 }}>{d.valor}</div>
      </div>
    </div>
  );
}

/* TARJA DE STATUS — Vendido / Alugado, sem dados (faixa forte e central) */
function StatusTarja({ estado }) {
  const st = { vendido: { t: 'VENDIDO', bg: BRAND.terracota }, alugado: { t: 'ALUGADO', bg: BRAND.verde } }[estado];
  if (!st) return null;
  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(45,29,21,.42)' }}></div>
      <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)' }}>
        <div style={{ background: st.bg, padding: '74px 0 60px', textAlign: 'center', borderTop: '5px solid ' + BRAND.bege, borderBottom: '5px solid ' + BRAND.bege, boxShadow: '0 30px 80px rgba(30,18,12,.55)' }}>
          <div style={{ color: BRAND.bege, display: 'flex', justifyContent: 'center', marginBottom: 18 }}><WindowMark size={100} stroke={3.0} /></div>
          <div style={{ fontFamily: BRAND.sans, fontWeight: 800, fontSize: 196, lineHeight: .88, letterSpacing: '.05em', color: BRAND.bege }}>{st.t}</div>
          <BrandSig color="rgba(245,241,236,.95)" rule="rgba(245,241,236,.5)" mt={30} />
        </div>
      </div>
    </>
  );
}

const SELOS = { nuvem: SeloNuvem, etiqueta: SeloEtiqueta, janela: SeloJanela, 'janela-clara': SeloJanelaClara, editorial: SeloEditorial };

/* ----------------------------------------------------------------------------
   CARIMBO DE STATUS — Vendido / Alugado (banda no terço inferior-central)
   ---------------------------------------------------------------------------- */
function Carimbo({ texto }) {
  return (
    <div style={{ position: 'absolute', top: 1180, left: 0, right: 0, display: 'flex', justifyContent: 'center' }}>
      <div style={{ position: 'relative', width: '100%', display: 'flex', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, background: 'rgba(45,29,21,.30)' }}></div>
        <div style={{
          position: 'relative', background: 'rgba(201,160,99,.94)', padding: '34px 0', width: '100%', textAlign: 'center',
          boxShadow: '0 14px 40px rgba(48,30,22,.30)', borderTop: '2px solid rgba(255,255,255,.5)', borderBottom: '2px solid rgba(255,255,255,.5)',
        }}>
          <span style={{ fontFamily: BRAND.sans, fontWeight: 800, fontSize: 132, letterSpacing: '.04em', color: BRAND.bege }}>{texto}</span>
        </div>
      </div>
    </div>
  );
}

/* ----------------------------------------------------------------------------
   UI fantasma do Instagram — para provar a zona segura
   ---------------------------------------------------------------------------- */
function InstagramChrome() {
  const ico = (path) => (
    <svg width="58" height="58" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ filter: 'drop-shadow(0 1px 3px rgba(0,0,0,.5))' }}>{path}</svg>
  );
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      {/* status bar */}
      <div style={{ position: 'absolute', top: 28, left: 44, right: 44, display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#fff', fontFamily: BRAND.sans, fontWeight: 700, fontSize: 34, filter: 'drop-shadow(0 1px 2px rgba(0,0,0,.5))' }}>
        <span>9:41</span>
        <span style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 28 }}>▮▮▮ ▾ ▰</span>
      </div>
      {/* botões da direita */}
      <div style={{ position: 'absolute', right: 34, bottom: 360, display: 'flex', flexDirection: 'column', gap: 56, alignItems: 'center' }}>
        {ico(<><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z" /></>)}
        {ico(<><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.8L3 21l1.9-5.2A8.4 8.4 0 1 1 21 11.5z" /></>)}
        {ico(<><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></>)}
        {ico(<><circle cx="12" cy="12" r="1.6" /><circle cx="6" cy="12" r="1.6" /><circle cx="18" cy="12" r="1.6" /></>)}
      </div>
      {/* legenda inferior */}
      <div style={{ position: 'absolute', left: 40, right: 230, bottom: 200, color: '#fff', filter: 'drop-shadow(0 1px 3px rgba(0,0,0,.6))' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, fontFamily: BRAND.sans, fontWeight: 700, fontSize: 36 }}>
          <span style={{ width: 64, height: 64, borderRadius: '50%', background: BRAND.nude, display: 'inline-block', border: '2px solid #fff' }}></span>
          lyatorresimoveis
        </div>
        <div style={{ fontFamily: BRAND.sans, fontWeight: 400, fontSize: 33, marginTop: 16, opacity: .96 }}>Um sonho começa por um endereço ✦ <span style={{ opacity: .8 }}>mais</span></div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 320, background: 'linear-gradient(0deg, rgba(0,0,0,.45), transparent)' }}></div>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 180, background: 'linear-gradient(180deg, rgba(0,0,0,.30), transparent)' }}></div>
    </div>
  );
}

/* ----------------------------------------------------------------------------
   COVER — compõe tudo dentro de um frame 1080×1920 e escala
   ---------------------------------------------------------------------------- */
function Cover({ photo, focus = 'center 56%', selo = 'nuvem', estado = 'dados', d, igUi = false, guide = false, boxY = 0.6, scale = 1 / 3 }) {
  const Selo = SELOS[selo] || SeloNuvem;
  const ownsStatus = selo === 'janela-clara';
  const W = 1080, H = 1920;
  return (
    <div style={{ width: W * scale, height: H * scale, position: 'relative', overflow: 'hidden', background: '#000' }}>
      <div style={{ width: W, height: H, transform: scale === 1 ? 'none' : `scale(${scale})`, transformOrigin: 'top left', position: 'absolute', top: 0, left: 0 }}>
        {/* foto (background p/ render confiável + export PNG) */}
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `url("${photo}")`, backgroundSize: 'cover', backgroundPosition: focus, backgroundRepeat: 'no-repeat' }}></div>
        {/* escurecimento sutil p/ status */}
        {estado !== 'dados' && !ownsStatus && <div style={{ position: 'absolute', inset: 0, background: 'rgba(45,29,21,.18)' }}></div>}
        {/* selo de informações (estado dados) ou tarja de status */}
        {(!ownsStatus || estado === 'dados') && <Selo d={d} estado={estado} boxY={boxY} />}
        {ownsStatus && (estado === 'vendido' || estado === 'alugado') && <StatusTarja estado={estado} />}
        {/* carimbo de status (selos sem status próprio) */}
        {!ownsStatus && estado === 'vendido' && <Carimbo texto="VENDIDO" />}
        {!ownsStatus && estado === 'alugado' && <Carimbo texto="ALUGADO" />}
        {/* UI do Instagram (prova) */}
        {igUi && <InstagramChrome />}
        {/* guia: corte 1:1 da grade do perfil */}
        {guide && (
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 420, background: 'repeating-linear-gradient(45deg, rgba(180,80,60,.12) 0 16px, rgba(180,80,60,.22) 16px 32px)' }}></div>
            <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 420, background: 'repeating-linear-gradient(45deg, rgba(180,80,60,.12) 0 16px, rgba(180,80,60,.22) 16px 32px)' }}></div>
            <div style={{ position: 'absolute', top: 420, left: 0, right: 0, height: 1080, border: '2.5px dashed rgba(201,160,99,.95)' }}></div>
            <div style={{ position: 'absolute', top: 444, left: 0, right: 0, textAlign: 'center', fontFamily: BRAND.sans, fontWeight: 700, fontSize: 26, letterSpacing: '.16em', color: BRAND.ouro, textTransform: 'uppercase', textShadow: '0 1px 4px rgba(0,0,0,.55)' }}>corte 1:1 · sempre aparece na grade</div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ----------------------------------------------------------------------------
   EXPORT — desenha a capa "janela-clara" num canvas 1080×1920 (PNG confiável)
   ---------------------------------------------------------------------------- */
function markSvgUrl(color) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">`
    + `<g fill="none" stroke="${color}" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round">`
    + `<rect x="12" y="10" width="76" height="80"/><line x1="50" y1="10" x2="50" y2="88"/>`
    + `<line x1="12" y1="45" x2="50" y2="45"/><path d="M12 50 C 24 84, 52 90, 84 64"/>`
    + `<path d="M18 52 C 30 80, 52 85, 81 65"/><path d="M80 68 C 77.5 60, 76.5 54, 75 48"/></g>`
    + `<g fill="${color}">`
    + `<path d="M76.5 53 C 77.47,47.34 74.87,41.54 70 38.5 C 69.03,44.16 71.63,49.96 76.5 53 Z"/>`
    + `<path d="M79 56 C 83.12,55.34 85.52,52.14 85 48 C 80.88,48.66 78.48,51.86 79 56 Z"/>`
    + `<path d="M78 59 C 75.03,55.16 70.03,53.76 65.5 55.5 C 68.47,59.34 73.47,60.74 78 59 Z"/>`
    + `<circle cx="75" cy="25" r="5.6"/></g></svg>`;
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}
function loadImg(src) {
  return new Promise((res, rej) => {
    const i = new Image();
    i.onload = () => res(i); i.onerror = rej;
    if (/^https?:/.test(src)) i.crossOrigin = 'anonymous';
    i.src = src;
  });
}
function drawMark(ctx, color, cx, cy, size) {
  return loadImg(markSvgUrl(color)).then(m => { ctx.drawImage(m, cx - size / 2, cy - size / 2, size, size); }).catch(() => {});
}
function drawBrandSig(ctx, cx, y, color, rule) {
  ctx.save(); ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  ctx.font = '600 31px "Hanken Grotesk", sans-serif'; ctx.letterSpacing = '9px';
  const txt = 'LYA TORRES'; const tw = ctx.measureText(txt).width;
  ctx.fillStyle = color; ctx.fillText(txt, cx + 4.5, y); ctx.letterSpacing = '0px';
  ctx.strokeStyle = rule; ctx.lineWidth = 1.5;
  const gap = tw / 2 + 28;
  ctx.beginPath(); ctx.moveTo(cx - gap - 56, y); ctx.lineTo(cx - gap, y); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(cx + gap, y); ctx.lineTo(cx + gap + 56, y); ctx.stroke();
  ctx.restore();
}

async function drawInfoBox(ctx, cx, W, H, d, boxY) {
  const boxW = 824;
  const linha2 = (d.linha2 || []).join('   •   ').toUpperCase();
  const padT = 44, hBairro = 88, gDiv = 22, hData = 35, gVal = 16, hVal = 68, padB = 42;
  const innerH = padT + hBairro + gDiv + gDiv + hData + gVal + hVal + padB;
  const boxTop = Math.round(boxY * H - innerH / 2);
  const boxX = cx - boxW / 2;
  ctx.save(); ctx.shadowColor = 'rgba(48,30,22,.32)'; ctx.shadowBlur = 50; ctx.shadowOffsetY = 22;
  ctx.fillStyle = '#F5F1EC'; ctx.fillRect(boxX, boxTop, boxW, innerH); ctx.restore();
  ctx.strokeStyle = '#B4694A'; ctx.lineWidth = 2; ctx.strokeRect(boxX + 14, boxTop + 14, boxW - 28, innerH - 28);
  let y = boxTop + padT;
  ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic'; ctx.fillStyle = '#5D3F35';
  ctx.font = '600 italic 88px "Cormorant Garamond", serif'; ctx.fillText(d.bairro || '', cx, y + 72);
  y += hBairro + gDiv;
  ctx.strokeStyle = 'rgba(180,105,74,.55)'; ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(cx - 75, y); ctx.lineTo(cx + 75, y); ctx.stroke();
  y += gDiv;
  ctx.fillStyle = '#936B52'; ctx.font = '600 35px "Hanken Grotesk", sans-serif'; ctx.letterSpacing = '1.5px';
  ctx.fillText(linha2, cx, y + 33); ctx.letterSpacing = '0px';
  y += hData + gVal;
  ctx.fillStyle = '#B4694A'; ctx.font = '600 italic 68px "Cormorant Garamond", serif';
  ctx.fillText(d.valor || '', cx, y + 58);
}

async function drawSash(ctx, cx, W, H, estado) {
  const st = { vendido: { t: 'VENDIDO', bg: '#B4694A' }, alugado: { t: 'ALUGADO', bg: '#7A8B70' } }[estado];
  if (!st) return;
  ctx.fillStyle = 'rgba(45,29,21,.42)'; ctx.fillRect(0, 0, W, H);
  const bandH = 470, bandTop = H / 2 - bandH / 2;
  ctx.save(); ctx.shadowColor = 'rgba(30,18,12,.55)'; ctx.shadowBlur = 80; ctx.shadowOffsetY = 30;
  ctx.fillStyle = st.bg; ctx.fillRect(0, bandTop, W, bandH); ctx.restore();
  ctx.fillStyle = '#F5F1EC'; ctx.fillRect(0, bandTop, W, 5); ctx.fillRect(0, bandTop + bandH - 5, W, 5);
  await drawMark(ctx, '#F5F1EC', cx, bandTop + 100, 100);
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#F5F1EC';
  ctx.font = '800 196px "Hanken Grotesk", sans-serif'; ctx.letterSpacing = '10px';
  ctx.fillText(st.t, cx + 5, bandTop + bandH / 2 + 40); ctx.letterSpacing = '0px';
  drawBrandSig(ctx, cx, bandTop + bandH - 56, '#F5F1EC', 'rgba(245,241,236,.55)');
}

async function drawCover(canvas, { photo, d, estado = 'dados', boxY = 0.72, focus = [0.5, 0.56] }) {
  const W = 1080, H = 1920;
  canvas.width = W; canvas.height = H;
  const ctx = canvas.getContext('2d');
  try { await document.fonts.ready; } catch (e) {}
  ctx.fillStyle = '#241a14'; ctx.fillRect(0, 0, W, H);
  if (photo) {
    try {
      const img = await loadImg(photo);
      const s = Math.max(W / img.width, H / img.height);
      const dw = img.width * s, dh = img.height * s;
      ctx.drawImage(img, (W - dw) * focus[0], (H - dh) * focus[1], dw, dh);
    } catch (e) {}
  }
  const cx = W / 2;
  if (estado === 'dados') await drawInfoBox(ctx, cx, W, H, d, boxY);
  else await drawSash(ctx, cx, W, H, estado);
  return canvas;
}

Object.assign(window, { Cover, WindowMark, Wordmark, Carimbo, drawCover, BRAND_LT: BRAND });