"""
Fix v8: script ilegivel sobre ceu claro. Solucao:
- Overlay mais escuro (gradiente vertical mais forte)
- Bloco central com backdrop discreto atras do script
- Brand top-left com backdrop
"""
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')}"

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,.72) 0%, rgba(26,37,25,.35) 30%, rgba(26,37,25,.45) 55%, rgba(26,37,25,.85) 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:70px; left:80px; color:#f5edd6;
    display:flex; flex-direction:column; gap:8px;
    padding: 4px 0;
  }}
  .brand-top .name {{
    font-family:'Cormorant Garamond',serif; font-size:24px;
    font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 40px rgba(0,0,0,.6);
  }}
  .brand-top .divider {{ width:64px; height:1px; background:#e8d6aa; opacity:.85; }}
  .brand-top .kicker {{
    font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.44em;
    text-transform:uppercase; color:#e8d6aa; font-weight:800;
    text-shadow: 0 2px 12px rgba(0,0,0,.9);
  }}
  .center-block {{
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    text-align:center; color:#f5edd6; padding: 60px 70px;
    background: rgba(20, 32, 22, .58);
    border-top: 1px solid rgba(232, 214, 170, .5);
    border-bottom: 1px solid rgba(232, 214, 170, .5);
    max-width: 780px;
    backdrop-filter: blur(2px);
  }}
  .center-block .lead {{
    font-family:'Inter',sans-serif; font-size:15px; letter-spacing:.5em;
    text-transform:uppercase; color:#e8d6aa; font-weight:800;
    margin-bottom:14px;
  }}
  .center-block .l1 {{
    font-family:'Cormorant Garamond',serif; font-size:64px; font-weight:400;
    line-height:1; color:#f5edd6; letter-spacing:.005em;
  }}
  .center-block .script {{
    font-family:'Pinyon Script', cursive; font-size:132px; line-height:1;
    color:#f5c680; font-weight:400;
    margin: 6px 0 8px;
    text-shadow: 0 4px 24px rgba(0,0,0,.55);
  }}
  .center-block .l3 {{
    font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:400;
    line-height:1.2; color:#f5edd6; font-style:italic;
    margin-bottom:22px;
  }}
  .center-block .sub {{
    font-family:'Inter',sans-serif; font-size:17px; line-height:1.55; font-weight:500;
    color:#f5edd6; opacity:.96; letter-spacing:.02em;
    max-width:560px; margin: 0 auto;
  }}
  .bottom {{
    position:absolute; bottom:82px; 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:800;
    text-shadow: 0 2px 14px rgba(0,0,0,.9);
  }}
  .bottom .loc .strong {{ color:#e8d6aa; }}
  .bottom .cta {{
    background: #e8d6aa; color:#1a2519;
    padding: 20px 32px;
    font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.36em;
    text-transform:uppercase; font-weight:800;
  }}
</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 class="sub">18 mil m&sup2; de reserva privada e salao coberto para 120 pessoas.</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>
"""

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 / "v8_script_refugio.png"
render(V8_HTML, destino)
print(f"ok -> {destino}")
