"""
Gera 3 variacoes editoriais do BLOCO CASAMENTO da Chacara Sonho Verde Top.
Cada variacao inspirada numa referencia distinta (nao repete Faustino refugio memoravel).
REGRA CRITICA: ZERO telefone em qualquer peca.

Iteracao 2 - ajustes:
- V1: bloco central com faixa de contraste, brand top com backdrop
- V2: painel lateral reduzido, foto mais protagonista
- V3: foto aerea no topo (diferente do jardim), footer strip reposicionado
"""
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_PATIO_NOITE = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_54.jpg')}"
FOTO_MESA_BOLO   = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_12.jpg')}"
FOTO_CASA_JARDIM = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_44.jpg')}"
FOTO_AEREA       = f"data:image/jpeg;base64,{img_to_b64('/opt/mia/workspace/chacarasonhoverdetop/fotos/foto_100.jpg')}"

# ============================================================
# VARIACAO 1 — "Faustino Experiencias Unicas" (editorial hero vertical)
# Bloco central com faixa escura + backdrop no topo pra contraste
# Copy: Criativo 05 "Cerimonia com vista de reserva"
# ============================================================
V1_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;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&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:#1a2419; overflow:hidden; }}
  .photo {{
    position:absolute; inset:0;
    background-image:
      linear-gradient(180deg, rgba(15,25,15,.55) 0%, rgba(15,25,15,.2) 25%, rgba(15,25,15,.15) 55%, rgba(15,25,15,.92) 100%),
      url('{FOTO_PERGOLADO}');
    background-size:cover; background-position:center 30%;
    filter: saturate(1.05) contrast(1.05);
  }}
  .top-brand {{
    position:absolute; top:56px; left:0; right:0; text-align:center; color:#f4ecdb;
  }}
  .top-brand .kicker {{
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.44em; font-weight:500;
    text-transform:uppercase; color:#e6c98a;
  }}
  .top-brand .divider {{ width:44px; height:1px; background:#c7b184; margin:14px auto 14px; }}
  .top-brand .brand {{
    font-family:'Cormorant Garamond',serif; font-size:36px; letter-spacing:.16em; font-weight:400;
    text-transform:uppercase; color:#f4ecdb;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
  }}
  .center-block {{
    position:absolute; left:0; right:0; top:52%; transform:translateY(-46%);
    text-align:center; color:#f4ecdb; padding:0 90px;
  }}
  .center-block .lead {{
    font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.44em; text-transform:uppercase;
    color:#e6c98a; margin-bottom:26px; font-weight:600;
  }}
  .center-block h1 {{
    font-family:'Cormorant Garamond',serif; font-size:104px; line-height:.98; font-weight:400;
    letter-spacing:-.01em; color:#f4ecdb;
    text-shadow: 0 4px 40px rgba(0,0,0,.65);
  }}
  .center-block h1 em {{ font-style:italic; font-weight:400; color:#e6c98a; }}
  .center-block .sub {{
    margin-top:32px; font-family:'Cormorant Garamond',serif;
    font-size:26px; font-style:italic; font-weight:400;
    color:#f4ecdb; opacity:.94; letter-spacing:.01em; line-height:1.35;
    max-width:640px; margin-left:auto; margin-right:auto;
    text-shadow: 0 2px 20px rgba(0,0,0,.6);
  }}
  .footer {{
    position:absolute; bottom:0; left:0; right:0; padding:44px 70px 46px;
    display:flex; justify-content:space-between; align-items:flex-end; color:#f4ecdb;
  }}
  .footer .loc {{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.38em; text-transform:uppercase;
    font-weight:600; line-height:1.9;
  }}
  .footer .loc .strong {{ color:#e6c98a; }}
  .footer .cta {{
    border:1px solid #e6c98a; padding:16px 30px;
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.34em; text-transform:uppercase;
    font-weight:600; color:#f4ecdb; background:rgba(230,201,138,.1);
  }}
  .side-mark {{
    position:absolute; left:32px; top:50%; transform:translateY(-50%) rotate(-90deg);
    transform-origin:left center; font-family:'Inter',sans-serif; color:#c7b184;
    font-size:10px; letter-spacing:.6em; text-transform:uppercase; opacity:.7; font-weight:500;
  }}
</style></head>
<body>
<div class="canvas">
  <div class="photo"></div>
  <div class="top-brand">
    <div class="kicker">Casamentos & Cerimonias</div>
    <div class="divider"></div>
    <div class="brand">Chacara Sonho Verde Top</div>
  </div>
  <div class="side-mark">Est. Valinhos</div>
  <div class="center-block">
    <div class="lead">O seu dia mais importante</div>
    <h1>Cerimonia<br><em>com vista</em><br>de reserva.</h1>
    <div class="sub">18 mil m&sup2; de natureza privada. Salao nobre e area externa sem limite.</div>
  </div>
  <div class="footer">
    <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>
"""

# ============================================================
# VARIACAO 2 — "IMOVEL DISPONIVEL" adaptado: painel lateral compacto
# Copy: Criativo 06 "Salao para 120. Area externa sem limite."
# ============================================================
V2_HTML = f"""
<!doctype html>
<html><head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&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:#0f1a12; overflow:hidden; }}
  .photo {{
    position:absolute; inset:0;
    background-image: url('{FOTO_PERGOLADO}');
    background-size:cover; background-position:center 30%;
    filter: saturate(1.08) contrast(1.05);
  }}
  .photo::after {{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(15,26,18,.15) 0%, rgba(15,26,18,.35) 100%);
  }}
  .top-strip {{
    position:absolute; top:44px; left:44px; right:44px;
    display:flex; justify-content:space-between; align-items:center;
    color:#efe6cf; z-index:5;
  }}
  .top-strip .brand-mini {{
    font-family:'Playfair Display',serif; font-size:22px; font-weight:500;
    letter-spacing:.04em; text-shadow: 0 2px 12px rgba(0,0,0,.5);
  }}
  .top-strip .tag {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.42em; text-transform:uppercase;
    font-weight:600; color:#d4b878;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
  }}
  .panel {{
    position:absolute; bottom:44px; left:44px; right:44px;
    background:#1f2e21; color:#efe6cf;
    padding:52px 56px 40px;
    display:grid; grid-template-columns: 1fr auto; gap:40px;
    align-items:end;
    border:1px solid rgba(212,184,120,.35);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  }}
  .panel .kicker {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.5em; text-transform:uppercase;
    color:#d4b878; font-weight:600; margin-bottom:16px;
  }}
  .panel h1 {{
    font-family:'Playfair Display',serif; font-size:76px; line-height:.98; font-weight:500;
    color:#efe6cf; letter-spacing:-.01em; margin-bottom:22px;
  }}
  .panel h1 .accent {{ font-style:italic; font-weight:400; color:#d4b878; }}
  .panel .sub {{
    font-family:'Inter',sans-serif; font-size:16px; line-height:1.55; font-weight:400;
    color:#efe6cf; opacity:.88; max-width:520px; margin-bottom:28px;
  }}
  .panel .specs {{
    display:flex; gap:36px; padding-top:24px;
    border-top:1px solid rgba(212,184,120,.3);
  }}
  .panel .spec {{ }}
  .panel .spec .num {{
    font-family:'Playfair Display',serif; font-size:38px; font-weight:500; color:#d4b878;
    letter-spacing:-.02em; line-height:1;
  }}
  .panel .spec .lbl {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    opacity:.85; font-weight:500; margin-top:6px;
  }}
  .panel .right-col {{
    display:flex; flex-direction:column; align-items:flex-end; gap:18px;
    min-width:220px;
  }}
  .panel .right-col .loc {{
    font-family:'Inter',sans-serif; text-align:right;
    font-size:12px; letter-spacing:.34em; text-transform:uppercase;
    line-height:1.9; font-weight:600; color:#efe6cf;
  }}
  .panel .right-col .loc .strong {{ color:#d4b878; }}
  .panel .right-col .cta {{
    padding:14px 22px; background:#d4b878; color:#1f2e21;
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.32em; text-transform:uppercase;
    font-weight:700;
  }}
</style></head>
<body>
<div class="canvas">
  <div class="photo"></div>
  <div class="top-strip">
    <div class="brand-mini">Chacara Sonho Verde Top</div>
    <div class="tag">Bloco Casamento</div>
  </div>

  <div class="panel">
    <div class="left-col">
      <div class="kicker">O seu casamento no campo</div>
      <h1>Salao para 120.<br><span class="accent">Area externa sem limite.</span></h1>
      <div class="sub">Salao nobre coberto para 120 pessoas, mais area externa para ampliar como precisar. Piscina, sauna, lago e caseiros residentes cuidando de tudo.</div>
      <div class="specs">
        <div class="spec"><div class="num">120</div><div class="lbl">Salao nobre</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; de reserva</div></div>
      </div>
    </div>
    <div class="right-col">
      <div class="loc"><span class="strong">Valinhos - SP</span><br>No alto da montanha</div>
      <div class="cta">Verifique a data</div>
    </div>
  </div>
</div>
</body></html>
"""

# ============================================================
# VARIACAO 3 — "Faustino Detalhe Pensado" (mosaico simetrico com selo)
# Foto aerea no topo (diferente da de baixo), footer integrado ao layout
# Copy: Criativo 04 "Cerimonia, festa e hospedagem. Um so lugar."
# ============================================================
V3_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&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:#f2ecdc; overflow:hidden;
    padding:44px;
  }}
  .frame {{
    position:relative; width:100%; height:100%;
    border:1px solid #b19863; padding:22px;
    display:grid; grid-template-rows: 400px 1fr 300px;
    gap:22px;
  }}
  .photo-top {{
    position:relative; overflow:hidden;
    background:
      linear-gradient(180deg, rgba(20,32,20,.05) 0%, rgba(20,32,20,.45) 100%),
      url('{FOTO_AEREA}');
    background-size:cover; background-position:center;
    filter: saturate(1.15) contrast(1.08);
  }}
  .photo-top .tag {{
    position:absolute; top:22px; left:24px;
    background:#f2ecdc; color:#243024;
    padding:8px 16px;
    font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.42em; text-transform:uppercase;
    font-weight:700;
  }}
  .middle {{
    background:#f2ecdc; text-align:center;
    display:flex; flex-direction:column; justify-content:center;
    padding:20px 30px 10px;
  }}
  .middle .brand-kicker {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.52em; text-transform:uppercase;
    color:#7d6a3a; font-weight:700; margin-bottom:8px;
  }}
  .middle .brand {{
    font-family:'DM Serif Display',serif; font-size:22px; letter-spacing:.18em;
    color:#243024; text-transform:uppercase; margin-bottom:20px;
  }}
  .middle .ornament {{
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin-bottom:18px; color:#b19863;
  }}
  .middle .ornament .line {{ height:1px; width:50px; background:#b19863; opacity:.7; }}
  .middle .ornament .dot {{ width:5px; height:5px; background:#b19863; border-radius:50%; }}
  .middle h1 {{
    font-family:'DM Serif Display',serif; font-size:66px; line-height:1.02; font-weight:400;
    color:#243024; letter-spacing:-.01em; margin-bottom:16px;
  }}
  .middle h1 em {{ font-style:italic; color:#7d6a3a; }}
  .middle .sub {{
    font-family:'Inter',sans-serif; font-size:15px; line-height:1.55; font-weight:400;
    color:#3a4a3a; opacity:.9; max-width:620px; margin:0 auto;
    letter-spacing:.01em;
  }}
  .bottom-row {{
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px;
  }}
  .cell {{
    position:relative; overflow:hidden;
    background-size:cover; background-position:center;
    filter: saturate(1.08);
  }}
  .cell.a {{
    background-image:
      linear-gradient(180deg, rgba(20,32,20,.05) 0%, rgba(20,32,20,.55) 100%),
      url('{FOTO_PERGOLADO}');
  }}
  .cell.b {{
    background-image:
      linear-gradient(180deg, rgba(20,32,20,.05) 0%, rgba(20,32,20,.55) 100%),
      url('{FOTO_MESA_BOLO}');
  }}
  .cell.c {{
    background:#243024;
    padding:34px 26px;
    display:flex; flex-direction:column; justify-content:space-between;
    color:#f2ecdc;
  }}
  .cell .lbl {{
    position:absolute; bottom:18px; left:20px;
    color:#f2ecdc; font-family:'Inter',sans-serif;
    font-size:10px; letter-spacing:.42em; text-transform:uppercase; font-weight:700;
  }}
  .cell.c .loc {{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.36em; text-transform:uppercase;
    line-height:1.9; font-weight:600; color:#f2ecdc;
  }}
  .cell.c .loc .strong {{ color:#d9c48a; }}
  .cell.c .cta-wrap {{ }}
  .cell.c .cta {{
    display:inline-block; font-family:'Inter',sans-serif;
    font-size:11px; letter-spacing:.34em; text-transform:uppercase; font-weight:700;
    color:#243024; background:#d9c48a; padding:14px 20px;
  }}
  .cell.c .arrow {{
    font-family:'DM Serif Display',serif; font-size:34px; color:#d9c48a;
    line-height:1; margin-bottom:10px;
  }}
</style></head>
<body>
<div class="canvas">
  <div class="frame">
    <div class="photo-top">
      <div class="tag">18 mil m&sup2; &middot; Vista aerea</div>
    </div>

    <div class="middle">
      <div class="brand-kicker">Casamentos no campo</div>
      <div class="brand">Chacara Sonho Verde Top</div>
      <div class="ornament"><div class="line"></div><div class="dot"></div><div class="line"></div></div>
      <h1>Cerimonia, festa <em>e hospedagem.</em><br>Um so lugar.</h1>
      <div class="sub">Seus convidados saem da cerimonia, curtem a festa e dormem no mesmo lugar. Sem van, sem hotel separado, sem correria.</div>
    </div>

    <div class="bottom-row">
      <div class="cell a"><div class="lbl">Cerimonia</div></div>
      <div class="cell b"><div class="lbl">Decor & festa</div></div>
      <div class="cell c">
        <div>
          <div class="arrow">&#8250;</div>
          <div class="loc"><span class="strong">Valinhos - SP</span><br>No alto da<br>montanha</div>
        </div>
        <div class="cta-wrap"><div class="cta">Reserve sua data</div></div>
      </div>
    </div>
  </div>
</div>
</body></html>
"""

VARIACOES = [
    ("v1_cerimonia_com_vista.png", V1_HTML),
    ("v2_salao_120_editorial.png", V2_HTML),
    ("v3_um_so_lugar_mosaico.png", V3_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.")
