"""
Aplica layout editorial (padrao v1) sobre a cena da noiva gerada por IA.
Copy: 'O dia que ela sempre imaginou.' + sub com specs pra manter conversao.
"""
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_NOIVA = f"data:image/png;base64,{img_to_b64(OUT/'v4_noiva_raw.png')}"

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(20,15,10,.55) 0%, rgba(20,15,10,.15) 22%, rgba(20,15,10,.12) 52%, rgba(20,15,10,.94) 100%),
      url('{FOTO_NOIVA}');
    background-size:cover; background-position:center 30%;
    filter: saturate(1.04) contrast(1.04);
  }}
  .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:600;
    text-transform:uppercase; color:#f0d79b;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }}
  .top-brand .divider {{ width:44px; height:1px; background:#f0d79b; 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,.7);
  }}
  .bottom-block {{
    position:absolute; left:0; right:0; bottom:190px;
    text-align:center; color:#f4ecdb; padding:0 90px;
  }}
  .bottom-block .lead {{
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.44em; text-transform:uppercase;
    color:#f0d79b; margin-bottom:22px; font-weight:600;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }}
  .bottom-block h1 {{
    font-family:'Cormorant Garamond',serif; font-size:88px; line-height:.98; font-weight:400;
    letter-spacing:-.01em; color:#f4ecdb;
    text-shadow: 0 4px 40px rgba(0,0,0,.75);
  }}
  .bottom-block h1 em {{ font-style:italic; font-weight:400; color:#f0d79b; }}
  .bottom-block .sub {{
    margin-top:24px; font-family:'Cormorant Garamond',serif;
    font-size:23px; font-style:italic; font-weight:400;
    color:#f4ecdb; opacity:.95; letter-spacing:.01em; line-height:1.4;
    max-width:640px; margin-left:auto; margin-right:auto;
    text-shadow: 0 2px 18px rgba(0,0,0,.7);
  }}
  .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:#f0d79b; }}
  .footer .cta {{
    border:1px solid #f0d79b; padding:16px 30px;
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.34em; text-transform:uppercase;
    font-weight:600; color:#f4ecdb; background:rgba(240,215,155,.12);
  }}
  .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:.75; 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="bottom-block">
    <div class="lead">O seu dia mais importante</div>
    <h1>O dia que ela<br><em>sempre imaginou.</em></h1>
    <div class="sub">Salao para 120 e area externa sem limite. 18 mil m&sup2; para viver o seu momento sem pressa.</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>
"""

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 / "v4_noiva.png"
print(f"Renderizando v4_noiva.png...")
render(HTML, destino)
print(f"OK -> {destino}")
