"""
Gera 5 variacoes editoriais v6-v10 do BLOCO CASAMENTO Chacara Sonho Verde Top.
Regras deste pacote (2026-08-11 iteracao 3):
- CHACARA REAL como protagonista (SEM noiva)
- Textos secundarios MAIORES (localizacao, tagline, CTA)
- Bloco de LOCAL com presenca visual forte (ancora de marca)
- 5 refs editoriais NOVAS (nao repetidas de v1-v5)
- 1080x1350 (4:5)
- ZERO telefone visivel
"""
import base64
from pathlib import Path
from playwright.sync_api import sync_playwright

OUT = Path("/opt/mia/workspace/clientes/chacara-sonho-verde/variacoes_casamento_2026-08-11")
OUT.mkdir(parents=True, exist_ok=True)

def img_to_b64(path):
    with open(path, "rb") as f:
        return base64.b64encode(f.read()).decode()

FOTO_PERGOLADO   = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_33.jpg')}"
FOTO_SALAO       = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_11.jpg')}"
FOTO_MESA_BOLO   = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_12.jpg')}"
FOTO_AEREA       = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_100.jpg')}"
FOTO_CASA_JARDIM = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_44.jpg')}"
FOTO_CASA_NOITE  = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_20.jpg')}"
FOTO_CERIMONIA   = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_02.jpg')}"

# =========================================================================
# V6 - REF "Onde o silencio" (Faustino portrait) - PANEL POETICO
# Foto: casa iluminada de noite (foto_20). Painel escuro esquerdo com copy
# poetica, marca em baixo direito (assinatura), local em destaque no topo
# =========================================================================
V6_HTML = f"""
<!doctype html>
<html><head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  body {{ margin:0; overflow:hidden; width:1080px; height:1350px; font-family:'Inter',sans-serif; }}
  .canvas {{ position:relative; width:1080px; height:1350px; background:#0d1710; overflow:hidden; }}
  .photo {{
    position:absolute; inset:0;
    background-image:
      linear-gradient(90deg, rgba(15,26,18,.85) 0%, rgba(15,26,18,.55) 40%, rgba(15,26,18,.15) 65%, rgba(15,26,18,.55) 100%),
      linear-gradient(180deg, rgba(15,26,18,.4) 0%, rgba(15,26,18,.1) 30%, rgba(15,26,18,.85) 100%),
      url('{FOTO_CASA_NOITE}');
    background-size:cover; background-position:center 40%;
    filter: saturate(1.1) contrast(1.08);
  }}
  .top-bar {{
    position:absolute; top:52px; left:60px; right:60px;
    display:flex; justify-content:space-between; align-items:center;
    color:#f2ead4; z-index:5;
  }}
  .top-bar .kicker {{
    font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.42em;
    text-transform:uppercase; color:#e6c98a; font-weight:700;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
  }}
  .top-bar .est {{
    font-family:'Cormorant Garamond',serif; font-style:italic;
    font-size:20px; color:#f2ead4; letter-spacing:.05em;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
  }}
  .panel {{
    position:absolute; top:230px; left:60px; width:560px;
    background: rgba(30, 48, 32, .88);
    border: 1px solid rgba(230, 201, 138, .5);
    padding: 60px 58px 54px;
    color:#f2ead4;
    backdrop-filter: blur(2px);
  }}
  .panel .lead {{
    font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.44em;
    text-transform:uppercase; color:#e6c98a; font-weight:700;
    margin-bottom:26px;
  }}
  .panel h1 {{
    font-family:'Cormorant Garamond',serif; font-size:82px; line-height:.98;
    font-weight:400; color:#f2ead4; letter-spacing:-.005em;
    margin-bottom:28px;
  }}
  .panel h1 .accent {{ font-style:italic; color:#e6c98a; font-weight:400; }}
  .panel .sub {{
    font-family:'Cormorant Garamond',serif; font-size:26px; line-height:1.35;
    font-weight:400; font-style:italic;
    color:#f2ead4; opacity:.95; letter-spacing:.005em;
  }}
  .brand-signature {{
    position:absolute; bottom:60px; right:60px;
    text-align:right; color:#f2ead4;
  }}
  .brand-signature .brand {{
    font-family:'Cormorant Garamond',serif;
    font-size:44px; font-weight:500; letter-spacing:.02em;
    color:#f2ead4;
    text-shadow: 0 2px 14px rgba(0,0,0,.7);
    line-height:1;
  }}
  .brand-signature .brand em {{ font-style:italic; color:#e6c98a; font-weight:400; }}
  .brand-signature .divider {{
    width:120px; height:1px; background:#e6c98a; margin:16px 0 16px auto; opacity:.85;
  }}
  .brand-signature .loc {{
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.4em;
    text-transform:uppercase; font-weight:700; color:#f2ead4;
    line-height:1.9;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
  }}
  .brand-signature .loc .strong {{ color:#e6c98a; }}
  .cta-bottom {{
    position:absolute; bottom:64px; left:60px;
    background:#e6c98a; color:#1a2a1c;
    padding:18px 30px;
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.32em;
    text-transform:uppercase; font-weight:800;
  }}
</style></head>
<body>
<div class="canvas">
  <div class="photo"></div>
  <div class="top-bar">
    <div class="kicker">Casamentos & Cerimonias</div>
    <div class="est">Est. Valinhos</div>
  </div>
  <div class="panel">
    <div class="lead">O seu dia mais importante</div>
    <h1>Onde o SIM<br><span class="accent">encontra</span><br>a natureza.</h1>
    <div class="sub">18 mil m&sup2; de reserva privada. Salao coberto para 120 pessoas e area externa sem limite.</div>
  </div>
  <div class="cta-bottom">Consulte a data</div>
  <div class="brand-signature">
    <div class="brand">Chacara Sonho Verde <em>Top</em></div>
    <div class="divider"></div>
    <div class="loc"><span class="strong">Valinhos - SP</span><br>No alto da montanha</div>
  </div>
</div>
</body></html>
"""

# =========================================================================
# V7 - REF "Casa de Aluguel de Temporada" - INFO-DENSA COM SPECS
# Titulo GIGANTE, lista de specs a esquerda, foto salao a direita
# Local no rodape amplo em barra. Mosaico bottom de 3 fotos.
# =========================================================================
V7_HTML = f"""
<!doctype html>
<html><head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  body {{ margin:0; overflow:hidden; width:1080px; height:1350px; font-family:'Inter',sans-serif; }}
  .canvas {{
    position:relative; width:1080px; height:1350px; background:#f0ead9; overflow:hidden;
    padding:0;
  }}
  .top-block {{
    padding: 60px 60px 34px;
    background: #f0ead9;
  }}
  .top-block .kicker {{
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.5em;
    text-transform:uppercase; color:#8a6b2e; font-weight:800; margin-bottom:22px;
  }}
  .top-block h1 {{
    font-family:'Fraunces',serif; font-size:96px; line-height:.92;
    font-weight:600; color:#1e2a1e; letter-spacing:-.025em;
  }}
  .top-block h1 em {{ font-style:italic; color:#8a6b2e; font-weight:500; }}
  .grid {{
    display:grid; grid-template-columns: 380px 1fr; gap:0;
    padding: 26px 60px 0;
  }}
  .specs {{ padding-top:8px; }}
  .specs ul {{ list-style:none; }}
  .specs li {{
    padding: 14px 0;
    border-bottom: 1px solid rgba(30,42,30,.18);
    font-family:'Inter',sans-serif; font-size:17px; font-weight:500;
    color:#1e2a1e; letter-spacing:.01em;
    display:flex; align-items:baseline; gap:14px;
  }}
  .specs li .num {{
    font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:#8a6b2e;
    min-width:56px; letter-spacing:-.02em;
  }}
  .specs li .txt {{ flex:1; }}
  .photo-hero {{
    height: 380px; margin-left: 28px;
    background-image:
      linear-gradient(180deg, rgba(20,32,20,.05) 0%, rgba(20,32,20,.4) 100%),
      url('{FOTO_SALAO}');
    background-size:cover; background-position:center 40%;
    position:relative;
    filter: saturate(1.1) contrast(1.08);
  }}
  .photo-hero .tag {{
    position:absolute; bottom:20px; left:22px;
    background:#f0ead9; color:#1e2a1e;
    padding:10px 18px;
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.42em;
    text-transform:uppercase; font-weight:800;
  }}
  .bottom-strip {{
    position:absolute; bottom:0; left:0; right:0;
    background: #1e2a1e; color:#f0ead9;
    padding: 34px 60px;
    display:flex; justify-content:space-between; align-items:center;
  }}
  .bottom-strip .loc {{
    display:flex; flex-direction:column; gap:6px;
  }}
  .bottom-strip .loc .brand {{
    font-family:'Fraunces',serif; font-size:26px; font-weight:600; letter-spacing:.01em;
    color:#f0ead9;
  }}
  .bottom-strip .loc .brand em {{ font-style:italic; color:#d9b46a; }}
  .bottom-strip .loc .place {{
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.4em;
    text-transform:uppercase; font-weight:700; color:#f0ead9;
    margin-top:6px;
  }}
  .bottom-strip .loc .place .strong {{ color:#d9b46a; }}
  .bottom-strip .cta {{
    background:#d9b46a; color:#1e2a1e;
    padding:20px 32px;
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.34em;
    text-transform:uppercase; font-weight:800;
  }}
  .mini-mosaic {{
    position:absolute; bottom:150px; left:60px; right:60px;
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px; height: 160px;
  }}
  .mini-cell {{
    background-size:cover; background-position:center;
    filter: saturate(1.05);
    position:relative;
  }}
  .mini-cell.a {{ background-image: url('{FOTO_PERGOLADO}'); background-position: center 40%; }}
  .mini-cell.b {{ background-image: url('{FOTO_AEREA}'); }}
  .mini-cell.c {{ background-image: url('{FOTO_MESA_BOLO}'); }}
</style></head>
<body>
<div class="canvas">
  <div class="top-block">
    <div class="kicker">Casamento no campo</div>
    <h1>Chacara<br>completa <em>para<br>o seu grande dia.</em></h1>
  </div>
  <div class="grid">
    <div class="specs">
      <ul>
        <li><span class="num">120</span><span class="txt">Salao nobre coberto</span></li>
        <li><span class="num">18k</span><span class="txt">m&sup2; de reserva privada</span></li>
        <li><span class="num">64</span><span class="txt">Hospedes acomodados</span></li>
        <li><span class="num">01</span><span class="txt">Piscina, sauna e lago</span></li>
        <li><span class="num">24h</span><span class="txt">Caseiros residentes</span></li>
      </ul>
    </div>
    <div class="photo-hero"><div class="tag">Salao Nobre</div></div>
  </div>
  <div class="mini-mosaic">
    <div class="mini-cell a"></div>
    <div class="mini-cell b"></div>
    <div class="mini-cell c"></div>
  </div>
  <div class="bottom-strip">
    <div class="loc">
      <div class="brand">Chacara Sonho Verde <em>Top</em></div>
      <div class="place"><span class="strong">Valinhos - SP</span> &middot; No alto da montanha</div>
    </div>
    <div class="cta">Reserve sua data</div>
  </div>
</div>
</body></html>
"""

# =========================================================================
# V8 - REF "Seu refugio de paz" (Faustino script) - SCRIPT ROMANTICO
# Foto pergolado (foto_33). Frame fino. Brand top-left tipo assinatura.
# Copy: script italico grande estilo caligrafia.
# =========================================================================
V8_HTML = f"""
<!doctype html>
<html><head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=Pinyon+Script&display=swap" rel="stylesheet">
<style>
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  body {{ margin:0; overflow:hidden; width:1080px; height:1350px; font-family:'Inter',sans-serif; }}
  .canvas {{ position:relative; width:1080px; height:1350px; background:#1a2519; overflow:hidden; }}
  .photo {{
    position:absolute; inset:0;
    background-image:
      linear-gradient(180deg, rgba(26,37,25,.15) 0%, rgba(26,37,25,.1) 40%, rgba(26,37,25,.7) 100%),
      url('{FOTO_PERGOLADO}');
    background-size:cover; background-position:center 25%;
    filter: saturate(1.15) contrast(1.05);
  }}
  .thin-frame {{
    position:absolute; top:38px; left:38px; right:38px; bottom:38px;
    border: 1px solid rgba(232, 214, 170, .55);
    pointer-events:none;
  }}
  .brand-top {{
    position:absolute; top:74px; left:80px; color:#f5edd6;
    display:flex; flex-direction:column; gap:6px;
  }}
  .brand-top .name {{
    font-family:'Cormorant Garamond',serif; font-size:22px;
    font-weight:500; letter-spacing:.12em; text-transform:uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
  }}
  .brand-top .divider {{ width:64px; height:1px; background:#e8d6aa; opacity:.85; }}
  .brand-top .kicker {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.44em;
    text-transform:uppercase; color:#e8d6aa; font-weight:700;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
  }}
  .center-block {{
    position:absolute; top:48%; left:0; right:0; transform:translateY(-48%);
    text-align:center; color:#f5edd6; padding: 0 100px;
  }}
  .center-block .lead {{
    font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.5em;
    text-transform:uppercase; color:#e8d6aa; font-weight:700;
    margin-bottom:14px;
  }}
  .center-block .l1 {{
    font-family:'Cormorant Garamond',serif; font-size:70px; font-weight:400;
    line-height:1; color:#f5edd6; letter-spacing:.005em;
    text-shadow: 0 3px 22px rgba(0,0,0,.55);
  }}
  .center-block .script {{
    font-family:'Pinyon Script', cursive; font-size:140px; line-height:1;
    color:#f5c680; font-weight:400;
    margin: 4px 0 4px;
    text-shadow: 0 3px 30px rgba(0,0,0,.7);
  }}
  .center-block .l3 {{
    font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:400;
    line-height:1.15; color:#f5edd6; font-style:italic;
    text-shadow: 0 3px 22px rgba(0,0,0,.55);
    margin-bottom:36px;
  }}
  .center-block .sub {{
    font-family:'Inter',sans-serif; font-size:17px; line-height:1.55; font-weight:400;
    color:#f5edd6; opacity:.94; letter-spacing:.015em;
    max-width:620px; margin: 0 auto;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
  }}
  .bottom {{
    position:absolute; bottom:78px; left:80px; right:80px;
    display:flex; justify-content:space-between; align-items:center;
    color:#f5edd6;
  }}
  .bottom .loc {{
    font-family:'Inter',sans-serif;
    font-size:15px; letter-spacing:.42em; text-transform:uppercase;
    line-height:1.8; font-weight:700;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }}
  .bottom .loc .strong {{ color:#e8d6aa; }}
  .bottom .cta {{
    border: 1.5px solid #e8d6aa; color:#f5edd6; background: rgba(232, 214, 170, .12);
    padding: 18px 30px;
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.36em;
    text-transform:uppercase; font-weight:700;
  }}
</style></head>
<body>
<div class="canvas">
  <div class="photo"></div>
  <div class="thin-frame"></div>
  <div class="brand-top">
    <div class="kicker">Casamentos & Cerimonias</div>
    <div class="name">Chacara Sonho Verde Top</div>
    <div class="divider"></div>
  </div>
  <div class="center-block">
    <div class="lead">O seu casamento no campo</div>
    <div class="l1">Um refugio</div>
    <div class="script">para o sim.</div>
    <div class="l3">Cerimonia, festa e hospedagem em um so lugar.</div>
  </div>
  <div class="bottom">
    <div class="loc"><span class="strong">Valinhos - SP</span><br>No alto da montanha</div>
    <div class="cta">Consulte disponibilidade</div>
  </div>
</div>
</body></html>
"""

# =========================================================================
# V9 - REF mosaico 4 fotos com card benefits central - MOSAICO INFO
# 4 fotos ocupando o canvas todo (2x2). Card central com titulo + lista
# de beneficios + CTA. Local em uma faixa embaixo com peso forte.
# =========================================================================
V9_HTML = f"""
<!doctype html>
<html><head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  body {{ margin:0; overflow:hidden; width:1080px; height:1350px; font-family:'Inter',sans-serif; }}
  .canvas {{ position:relative; width:1080px; height:1350px; background:#0f1a11; overflow:hidden; }}
  .mosaic {{
    position:absolute; inset:0;
    display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap:6px; background:#0f1a11;
  }}
  .cell {{ background-size:cover; background-position:center; filter: saturate(1.1); }}
  .c1 {{ background-image: url('{FOTO_PERGOLADO}'); background-position: center 30%; }}
  .c2 {{ background-image: url('{FOTO_SALAO}'); background-position: center 40%; }}
  .c3 {{ background-image: url('{FOTO_MESA_BOLO}'); }}
  .c4 {{ background-image: url('{FOTO_AEREA}'); }}
  .overlay {{
    position:absolute; inset:0;
    background: radial-gradient(ellipse at center, rgba(15,26,17,.55) 0%, rgba(15,26,17,.75) 100%);
  }}
  .top-brand {{
    position:absolute; top:56px; left:0; right:0; text-align:center; z-index:5;
    color:#f0e6ca;
  }}
  .top-brand .kicker {{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.5em;
    text-transform:uppercase; font-weight:800; color:#e0c17e;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
  }}
  .top-brand .divider {{ width:36px; height:1px; background:#e0c17e; margin:12px auto; }}
  .top-brand .name {{
    font-family:'DM Serif Display',serif; font-size:28px; letter-spacing:.14em;
    text-transform:uppercase;
    text-shadow: 0 2px 14px rgba(0,0,0,.7);
  }}
  .card {{
    position:absolute; left:70px; right:70px; top:50%;
    transform:translateY(-46%);
    background:#f0e6ca; color:#1e2a1e;
    padding: 54px 56px 44px;
    text-align:center;
    border-top: 4px solid #b8944a;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
  }}
  .card .lead {{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.5em;
    text-transform:uppercase; color:#8a6b2e; font-weight:800; margin-bottom:16px;
  }}
  .card h1 {{
    font-family:'DM Serif Display',serif; font-size:64px; line-height:1;
    font-weight:400; color:#1e2a1e; letter-spacing:-.005em;
    margin-bottom:24px;
  }}
  .card h1 em {{ font-style:italic; color:#8a6b2e; }}
  .card .list {{
    display:grid; grid-template-columns: 1fr 1fr; gap: 14px 40px;
    margin: 24px auto 32px;
    max-width:520px; text-align:left;
  }}
  .card .list .item {{
    display:flex; align-items:center; gap:12px;
    font-family:'Inter',sans-serif; font-size:16px; font-weight:600;
    color:#1e2a1e; letter-spacing:.01em;
  }}
  .card .list .item .dot {{
    width:8px; height:8px; background:#b8944a; border-radius:50%; flex-shrink:0;
  }}
  .card .cta {{
    display:inline-block;
    background:#1e2a1e; color:#f0e6ca;
    padding: 20px 44px;
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.38em;
    text-transform:uppercase; font-weight:800;
  }}
  .bottom-loc {{
    position:absolute; bottom:0; left:0; right:0;
    background: #1e2a1e;
    padding: 30px 60px;
    display:flex; justify-content:center; align-items:center; gap:24px;
    color:#f0e6ca;
  }}
  .bottom-loc .icon {{ color:#e0c17e; font-size:22px; }}
  .bottom-loc .place {{
    font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.44em;
    text-transform:uppercase; font-weight:800;
  }}
  .bottom-loc .place .strong {{ color:#e0c17e; }}
  .bottom-loc .sep {{ color:#e0c17e; opacity:.6; }}
</style></head>
<body>
<div class="canvas">
  <div class="mosaic">
    <div class="cell c1"></div>
    <div class="cell c2"></div>
    <div class="cell c3"></div>
    <div class="cell c4"></div>
  </div>
  <div class="overlay"></div>
  <div class="top-brand">
    <div class="kicker">Casamento no Campo</div>
    <div class="divider"></div>
    <div class="name">Chacara Sonho Verde Top</div>
  </div>
  <div class="card">
    <div class="lead">Tudo em um so lugar</div>
    <h1>Cerimonia, festa <em>e hospedagem.</em></h1>
    <div class="list">
      <div class="item"><span class="dot"></span>Salao para 120 pessoas</div>
      <div class="item"><span class="dot"></span>18 mil m&sup2; de reserva</div>
      <div class="item"><span class="dot"></span>Hospedagem para 64</div>
      <div class="item"><span class="dot"></span>Piscina, sauna e lago</div>
    </div>
    <div class="cta">Reserve sua data</div>
  </div>
  <div class="bottom-loc">
    <span class="icon">&#9670;</span>
    <div class="place"><span class="strong">Valinhos - SP</span> <span class="sep">/</span> No alto da montanha</div>
    <span class="icon">&#9670;</span>
  </div>
</div>
</body></html>
"""

# =========================================================================
# V10 - REF "Aluga-se este imovel" - HERO BROADCAST com TOPBAR FORTE
# Topbar arredondado com kicker + tag ancorando marca no alto
# Foto aerea (foto_100) grande hero. Card inferior com specs + CTA amarelo/dourado.
# Inset com foto do salao (foto_11)
# =========================================================================
V10_HTML = f"""
<!doctype html>
<html><head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  body {{ margin:0; overflow:hidden; width:1080px; height:1350px; font-family:'Inter',sans-serif; }}
  .canvas {{ position:relative; width:1080px; height:1350px; background:#e8e2cf; overflow:hidden; }}

  /* TOP BAR pill destaque */
  .top-pill {{
    position:absolute; top:44px; left:44px; right:44px;
    background: #1e3020; color:#f0e6c8;
    border-radius: 22px;
    padding: 24px 40px 26px;
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,.35);
    z-index:8;
  }}
  .top-pill .row {{
    display:flex; align-items:center; gap:14px; width:100%;
  }}
  .top-pill .pin {{
    width:38px; height:38px; border-radius:50%; background:#d9b46a;
    display:flex; align-items:center; justify-content:center; color:#1e3020;
    font-size:20px; font-weight:900;
    flex-shrink:0;
  }}
  .top-pill h1 {{
    font-family:'Playfair Display',serif; font-size:38px; font-weight:700;
    letter-spacing:.005em; line-height:1;
  }}
  .top-pill .sub {{
    font-family:'Inter',sans-serif; font-size:16px; letter-spacing:.14em;
    text-transform:uppercase; color:#d9b46a; font-weight:700;
    padding-left: 52px;
  }}

  /* HERO photo */
  .hero {{
    position:absolute; top:180px; left:44px; right:44px; height:680px;
    background-image:
      linear-gradient(180deg, rgba(20,32,20,0) 0%, rgba(20,32,20,.15) 60%, rgba(20,32,20,.55) 100%),
      url('{FOTO_AEREA}');
    background-size:cover; background-position:center;
    border-radius: 14px;
    overflow:hidden;
    filter: saturate(1.12) contrast(1.05);
  }}
  .hero .inset {{
    position:absolute; top:26px; left:26px;
    width:220px; height:150px;
    background-image: url('{FOTO_SALAO}');
    background-size:cover; background-position:center 40%;
    border: 3px solid #f0e6c8;
    box-shadow: 0 10px 24px -6px rgba(0,0,0,.5);
  }}
  .hero .caption {{
    position:absolute; bottom:24px; left:26px; right:26px;
    display:flex; justify-content:space-between; align-items:flex-end;
    color:#f0e6c8;
  }}
  .hero .caption .txt {{
    font-family:'Playfair Display',serif; font-style:italic;
    font-size:28px; font-weight:500; letter-spacing:.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }}
  .hero .caption .tag {{
    background:#d9b46a; color:#1e3020;
    padding: 10px 18px; border-radius: 999px;
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.32em;
    text-transform:uppercase; font-weight:800;
  }}

  /* BOTTOM CARD */
  .bottom-card {{
    position:absolute; bottom:44px; left:44px; right:44px;
    background: #f0e6c8; color:#1e3020;
    border-radius: 22px;
    padding: 30px 40px;
    display:grid; grid-template-columns: 1fr auto; gap:30px; align-items:center;
    box-shadow: 0 -8px 24px -8px rgba(0,0,0,.15);
  }}
  .bottom-card .specs {{
    display:flex; gap:34px; align-items:center; flex-wrap:wrap;
  }}
  .bottom-card .spec {{ display:flex; flex-direction:column; gap:4px; }}
  .bottom-card .spec .num {{
    font-family:'Playfair Display',serif; font-size:42px; font-weight:700;
    color:#8a6b2e; line-height:1; letter-spacing:-.02em;
  }}
  .bottom-card .spec .lbl {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.28em;
    text-transform:uppercase; font-weight:800; color:#1e3020;
  }}
  .bottom-card .cta-col {{
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  }}
  .bottom-card .loc {{
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.38em;
    text-transform:uppercase; font-weight:800; text-align:right;
    line-height:1.9; color:#1e3020;
  }}
  .bottom-card .loc .strong {{ color:#8a6b2e; }}
  .bottom-card .cta {{
    background:#d9b46a; color:#1e3020;
    padding: 18px 28px; border-radius: 999px;
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.32em;
    text-transform:uppercase; font-weight:800;
    margin-top:6px;
  }}
</style></head>
<body>
<div class="canvas">
  <div class="top-pill">
    <div class="row">
      <div class="pin">&#9825;</div>
      <h1>CHACARA SONHO VERDE TOP</h1>
    </div>
    <div class="sub">Casamentos - Valinhos SP - No alto da montanha</div>
  </div>

  <div class="hero">
    <div class="inset"></div>
    <div class="caption">
      <div class="txt">Salao para 120 &middot; area externa sem limite.</div>
      <div class="tag">18 mil m&sup2;</div>
    </div>
  </div>

  <div class="bottom-card">
    <div class="specs">
      <div class="spec"><div class="num">120</div><div class="lbl">Salao</div></div>
      <div class="spec"><div class="num">64</div><div class="lbl">Hospedes</div></div>
      <div class="spec"><div class="num">18k</div><div class="lbl">m&sup2; reserva</div></div>
    </div>
    <div class="cta-col">
      <div class="loc"><span class="strong">Valinhos - SP</span><br>No alto da montanha</div>
      <div class="cta">Reserve sua data</div>
    </div>
  </div>
</div>
</body></html>
"""

VARIACOES = [
    ("v6_silencio_editorial.png", V6_HTML),
    ("v7_infodenso_specs.png", V7_HTML),
    ("v8_script_refugio.png", V8_HTML),
    ("v9_mosaico_benefits.png", V9_HTML),
    ("v10_hero_broadcast.png", V10_HTML),
]

def render(html, destino, largura=1080, altura=1350):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": largura, "height": altura})
        page.set_content(html, wait_until="networkidle")
        page.screenshot(path=str(destino), clip={"x":0,"y":0,"width":largura,"height":altura})
        browser.close()

for nome, html in VARIACOES:
    destino = OUT / nome
    print(f"Renderizando {nome}...")
    render(html, destino)
    print(f"  ok -> {destino}")

print("\nDone.")
