"""
V6_V2, V8_V2, V9_V2, V10_V2 - Correcao de ACENTUACAO apenas.
Layout identico as originais. So corrige acentos, tils, cedilhas.
"""
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")

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_NOITE  = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_20.jpg')}"

# =========================================================================
# V6_V2 - "Onde o silencio" -> "Onde o sil&ecirc;ncio" (com acentos)
# =========================================================================
V6_HTML = f"""
<!doctype html>
<html lang="pt-BR"><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 &amp; Cerim&ocirc;nias</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. Sal&atilde;o coberto para 120 pessoas e &aacute;rea externa sem limite.</div>
  </div>
  <div class="cta-bottom">Consulte a data</div>
  <div class="brand-signature">
    <div class="brand">Ch&aacute;cara 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>
"""

# =========================================================================
# V8_V2 - "Um refugio para o sim" -> "Um ref&uacute;gio para o sim"
# =========================================================================
V8_HTML = f"""
<!doctype html>
<html lang="pt-BR"><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 &amp; Cerim&ocirc;nias</div>
    <div class="name">Ch&aacute;cara 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 ref&uacute;gio</div>
    <div class="script">para o sim.</div>
    <div class="l3">Cerim&ocirc;nia, festa e hospedagem em um s&oacute; 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_V2 - Mosaico 4 fotos com card central benefits
# =========================================================================
V9_HTML = f"""
<!doctype html>
<html lang="pt-BR"><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:60px; 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:560px; 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">Ch&aacute;cara Sonho Verde Top</div>
  </div>
  <div class="card">
    <div class="lead">Tudo em um s&oacute; lugar</div>
    <h1>Cerim&ocirc;nia, festa <em>e hospedagem.</em></h1>
    <div class="list">
      <div class="item"><span class="dot"></span>Sal&atilde;o 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_V2 - Hero broadcast com top pill + specs pill
# =========================================================================
V10_HTML = f"""
<!doctype html>
<html lang="pt-BR"><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-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:36px; font-weight:700;
    letter-spacing:.005em; line-height:1;
  }}
  .top-pill .sub {{
    font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.14em;
    text-transform:uppercase; color:#d9b46a; font-weight:700;
    padding-left: 52px;
  }}

  .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:26px; font-weight:500; letter-spacing:.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
    max-width:640px;
  }}
  .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 {{
    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:40px; 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:.24em;
    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>CH&Aacute;CARA SONHO VERDE TOP</h1>
    </div>
    <div class="sub">Casamentos &middot; Valinhos SP &middot; No alto da montanha</div>
  </div>

  <div class="hero">
    <div class="inset"></div>
    <div class="caption">
      <div class="txt">Sal&atilde;o para 120 &middot; &aacute;rea 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">Sal&atilde;o</div></div>
      <div class="spec"><div class="num">64</div><div class="lbl">H&oacute;spedes</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_v2.png", V6_HTML),
    ("v8_v2.png", V8_HTML),
    ("v9_v2.png", V9_HTML),
    ("v10_v2.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.")
