"""
V7_V2 - REDESIGN completo do BLOCO CASAMENTO Chacara Sonho Verde Top.
Mudancas aprovadas pelo Renato (2026-08-12):
  1. Foto principal = foto_piscina.jpg (piscina + casa no fundo)
  2. Remove "Salao para 120" no rodape
  3. Adiciona 3 mini fotos abaixo (cerimonia, pergolado, aerea)
  4. Novos specs: 120 CONVIDADOS NO SALAO / 64 EM HOSPEDAGEM /
     18.000 m² DE MATA / 80 KM DE SAO PAULO
  5. ACENTUACAO CORRETA em tudo (chacara -> chacara com acento,
     salao com til, area, cerimonia, hospedes, cocegas, prox, etc)
"""
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 PRINCIPAL: piscina + casa no fundo (a que Renato descreveu)
FOTO_PRINCIPAL = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_piscina.jpg')}"
# Mini 1: cerimonia (foto_02) - altar branco, cadeiras
FOTO_MINI_CERIMONIA = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_02.jpg')}"
# Mini 2: pergolado no jardim com buganvilia
FOTO_MINI_PERGOLADO = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_33.jpg')}"
# Mini 3: aerea - mostra escala
FOTO_MINI_AEREA = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_100.jpg')}"

V7V2_HTML = f"""
<!doctype html>
<html lang="pt-BR"><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;
  }}

  /* TOP - kicker + titulo grande */
  .top-block {{
    padding: 54px 60px 22px;
    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:18px;
  }}
  .top-block h1 {{
    font-family:'Fraunces',serif; font-size:88px; line-height:.94;
    font-weight:600; color:#1e2a1e; letter-spacing:-.025em;
  }}
  .top-block h1 em {{ font-style:italic; color:#8a6b2e; font-weight:500; }}

  /* FOTO PRINCIPAL (piscina + casa) grande, hero horizontal */
  .hero-photo {{
    margin: 22px 60px 0;
    height: 400px;
    background-image:
      linear-gradient(180deg, rgba(20,32,20,0) 0%, rgba(20,32,20,.05) 55%, rgba(20,32,20,.4) 100%),
      url('{FOTO_PRINCIPAL}');
    background-size:cover; background-position:center 45%;
    position:relative;
    filter: saturate(1.1) contrast(1.06);
  }}
  .hero-photo .tag {{
    position:absolute; bottom:18px; left:18px;
    background:#f0ead9; color:#1e2a1e;
    padding: 10px 18px;
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.4em;
    text-transform:uppercase; font-weight:800;
  }}

  /* MOSAICO 3 mini fotos abaixo do hero */
  .mosaic {{
    margin: 12px 60px 0;
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; height: 140px;
  }}
  .mini {{
    background-size:cover; background-position:center;
    filter: saturate(1.08);
    position:relative;
  }}
  .mini::after {{
    content: attr(data-label);
    position:absolute; bottom:8px; left:8px;
    background: rgba(30, 42, 30, .88); color:#f0ead9;
    padding: 5px 10px;
    font-family:'Inter',sans-serif; font-size:9px; letter-spacing:.28em;
    text-transform:uppercase; font-weight:700;
  }}
  .mini.a {{ background-image: url('{FOTO_MINI_CERIMONIA}'); background-position: center 30%; }}
  .mini.b {{ background-image: url('{FOTO_MINI_PERGOLADO}'); background-position: center 40%; }}
  .mini.c {{ background-image: url('{FOTO_MINI_AEREA}'); }}

  /* SPECS grid - 4 quadros com numeros */
  .specs {{
    margin: 22px 60px 0;
    display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:0;
    border-top: 1px solid rgba(30,42,30,.22);
    border-bottom: 1px solid rgba(30,42,30,.22);
  }}
  .spec {{
    padding: 20px 14px;
    text-align:left;
    border-right: 1px solid rgba(30,42,30,.15);
  }}
  .spec:last-child {{ border-right: none; }}
  .spec .num {{
    font-family:'Fraunces',serif; font-size:44px; font-weight:700; color:#8a6b2e;
    line-height:.95; letter-spacing:-.025em;
    margin-bottom:4px;
  }}
  .spec .num .unit {{ font-size:22px; font-weight:500; }}
  .spec .lbl {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.24em;
    text-transform:uppercase; font-weight:700; color:#1e2a1e;
    line-height:1.35;
  }}

  /* BOTTOM STRIP - marca + local (SEM "Salao para 120") */
  .bottom-strip {{
    position:absolute; bottom:0; left:0; right:0;
    background: #1e2a1e; color:#f0ead9;
    padding: 28px 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:28px; font-weight:600; letter-spacing:.005em;
    color:#f0ead9; line-height:1;
  }}
  .bottom-strip .loc .brand em {{ font-style:italic; color:#d9b46a; }}
  .bottom-strip .loc .place {{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.36em;
    text-transform:uppercase; font-weight:700; color:#f0ead9;
    margin-top:8px;
  }}
  .bottom-strip .loc .place .strong {{ color:#d9b46a; }}
  .bottom-strip .cta {{
    background:#d9b46a; color:#1e2a1e;
    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="top-block">
    <div class="kicker">Casamento no campo</div>
    <h1>Ch&aacute;cara<br>completa <em>para<br>o seu grande dia.</em></h1>
  </div>

  <div class="hero-photo">
    <div class="tag">&Aacute;rea externa</div>
  </div>

  <div class="mosaic">
    <div class="mini a" data-label="Cerim&ocirc;nia"></div>
    <div class="mini b" data-label="Jardim"></div>
    <div class="mini c" data-label="Vista a&eacute;rea"></div>
  </div>

  <div class="specs">
    <div class="spec">
      <div class="num">120</div>
      <div class="lbl">Convidados<br>no sal&atilde;o</div>
    </div>
    <div class="spec">
      <div class="num">64</div>
      <div class="lbl">H&oacute;spedes<br>na chácara</div>
    </div>
    <div class="spec">
      <div class="num">18<span class="unit">mil</span></div>
      <div class="lbl">m&sup2; de<br>&aacute;rea verde</div>
    </div>
    <div class="spec">
      <div class="num">80<span class="unit">km</span></div>
      <div class="lbl">De S&atilde;o<br>Paulo</div>
    </div>
  </div>

  <div class="bottom-strip">
    <div class="loc">
      <div class="brand">Ch&aacute;cara 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>
"""

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()

destino = OUT / "v7_v2_ext_multifoto.png"
print(f"Renderizando {destino.name}...")
render(V7V2_HTML, destino)
print(f"  ok -> {destino}")
