#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Renderiza 5 criativos IG (1080x1350) seguindo o padrao visual do designer atual
do @franciscoborrello. Padrao extraido em GUIA_DE_ESTILO.md.
"""
import os
from pathlib import Path
from playwright.sync_api import sync_playwright
import base64
import tempfile

OUT = Path("/opt/mia/workspace/clientes/borrello/criativos_ig_teste_2026-09-18")
OUT.mkdir(parents=True, exist_ok=True)

W, H = 1080, 1350

BORRELLO_PNG = OUT / "borrello_recorte.png"
if BORRELLO_PNG.exists():
    with open(BORRELLO_PNG, "rb") as f:
        BORRELLO_B64 = base64.b64encode(f.read()).decode()
else:
    BORRELLO_B64 = ""


def base_head(extra_css=""):
    return f"""<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  html, body {{ margin: 0; padding: 0; overflow: hidden; width: {W}px; height: {H}px; font-family: 'Inter', sans-serif; }}
  .canvas {{ position: relative; width: {W}px; height: {H}px; overflow: hidden; }}

  .pill {{
    display: inline-flex; align-items: center; gap: 10px;
    border: 2px solid #F6E600; border-radius: 100px;
    padding: 12px 26px;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px;
    letter-spacing: 2px; color: #FFF;
    background: rgba(0,0,0,0.35);
  }}
  .pill.dark {{ background: #000; color: #FFF; }}

  .h1 {{
    font-family: 'Anton', 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.5px;
  }}
  .h1.dark  {{ color: #FFF; }}
  .h1.light {{ color: #111; }}

  .hl {{
    background: #F6E600;
    color: #111;
    padding: 4px 18px 8px 18px;
    border-radius: 8px;
    display: inline-block;
    line-height: 0.95;
    margin: 4px 0;
  }}

  .sub {{
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 30px; line-height: 1.28;
    margin-top: 26px;
  }}
  .sub.white {{ color: #EEE; }}
  .sub.dark {{ color: #222; }}

  .dash {{
    display: block; width: 60px; height: 4px; background: #F6E600;
    margin-bottom: 22px;
  }}

  .ig-bar {{
    position: absolute;
    left: 40px; right: 40px;
    bottom: 130px;
    display: flex; align-items: center; gap: 14px;
    z-index: 10;
  }}
  .ig-bar .avatar {{
    width: 56px; height: 56px; border-radius: 50%;
    background: #FFB800;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.15);
  }}
  .ig-bar .name {{
    display: flex; flex-direction: column;
  }}
  .ig-bar .name b {{ font-family: 'Inter'; font-weight: 700; font-size: 22px; }}
  .ig-bar .name span {{ font-family: 'Inter'; font-weight: 400; font-size: 18px; opacity: 0.65; margin-top: 2px; }}
  .ig-bar .btn {{
    padding: 10px 16px; border-radius: 8px;
    font-family: 'Inter'; font-size: 16px; font-weight: 500;
  }}
  .ig-bar.dark .name b, .ig-bar.dark .name span {{ color: #FFF; }}
  .ig-bar.dark .btn {{ background: rgba(255,255,255,0.12); color: #FFF; }}
  .ig-bar.light .name b {{ color: #111; }}
  .ig-bar.light .name span {{ color: #444; }}
  .ig-bar.light .btn {{ background: rgba(0,0,0,0.06); color: #111; }}
  .ig-bar .dots {{ font-size: 22px; margin-left: auto; opacity: 0.8; }}

  .cta {{
    position: absolute; left: 40px; right: 40px; bottom: 40px;
    background: #F6E600; color: #000;
    text-align: center;
    padding: 22px 20px; border-radius: 12px;
    font-family: 'Inter'; font-weight: 900; font-size: 30px;
    text-transform: uppercase; letter-spacing: 1px;
    z-index: 10;
  }}
  .cta.small {{ font-size: 26px; padding: 20px 18px; }}

  .dots-grid {{
    position: absolute;
    width: 120px; height: 120px;
    background-image: radial-gradient(#F6E600 2px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0.6;
  }}
</style>
{extra_css}
</head><body>"""


def render(html, dest):
    """Renderiza via arquivo local (garante UTF-8 sem ambiguidade)."""
    tmp = tempfile.NamedTemporaryFile(mode="w", suffix=".html", delete=False, encoding="utf-8")
    tmp.write(html)
    tmp.close()
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": W, "height": H}, device_scale_factor=2)
        page.goto("file://" + tmp.name, wait_until="networkidle")
        page.wait_for_timeout(900)
        page.screenshot(path=dest, clip={"x": 0, "y": 0, "width": W, "height": H})
        browser.close()
    os.unlink(tmp.name)
    print(f"  render OK -> {dest}")


# =============================================================================
# CRIATIVO 1 — Quiz Feng Shui
# =============================================================================
c1 = base_head() + """
<div class="canvas" style="background:
  radial-gradient(ellipse at 70% 50%, #1a1810 0%, #000 60%);">

  <svg width="1080" height="1350" viewBox="0 0 1080 1350" style="position:absolute; inset:0; opacity:0.55;">
    <defs>
      <filter id="blur1"><feGaussianBlur stdDeviation="3"/></filter>
    </defs>
    <path d="M 900 0 Q 1000 300 850 500 Q 700 700 950 900 Q 1100 1100 800 1350"
          stroke="#F6E600" stroke-width="6" fill="none" filter="url(#blur1)"/>
    <path d="M 950 100 Q 1050 400 900 600 Q 750 800 1000 1000 Q 1150 1200 850 1350"
          stroke="#FFEE00" stroke-width="3" fill="none" opacity="0.7"/>
  </svg>

  <div style="position:absolute; right:-140px; top:340px;
              width:700px; height:700px; border:2px solid rgba(246,230,0,0.15); border-radius:50%;"></div>
  <div style="position:absolute; right:-40px; top:440px;
              width:500px; height:500px; border:2px solid rgba(246,230,0,0.25); border-radius:50%;"></div>

  <div class="dots-grid" style="right:80px; top:80px;"></div>
  <div class="dots-grid" style="left:60px; bottom:340px; width:80px; height:80px;"></div>

  <div style="position:absolute; top:80px; left:60px;">
    <div class="pill dark">FENG SHUI <span style="color:#F6E600">•</span> QUIZ GRATUITO</div>
  </div>

  <div style="position:absolute; top:220px; left:60px; right:60px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 112px;">
      A SUA CASA<br>
      TE <span class="hl">AJUDA</span><br>
      OU TE<br>
      <span class="hl">ATRAPALHA</span>?
    </h1>

    <p class="sub white" style="max-width: 720px;">
      Sete perguntas rápidas revelam<br>
      o que o seu ambiente <b>silenciosamente</b><br>
      tenta te dizer todo dia.
    </p>
  </div>

  <div class="ig-bar dark">
    <div class="avatar"></div>
    <div class="name"><b>Francisco Borrello</b><span>@franciscoborrello</span></div>
    <div class="btn">Seguindo v</div>
    <div class="btn">Enviar mensagem</div>
    <div class="dots">•••</div>
  </div>

  <div class="cta">FAÇA O TESTE GRATUITO</div>
</div>
</body></html>
"""
render(c1, str(OUT / "01_quiz_fengshui.png"))


# =============================================================================
# CRIATIVO 2 — Curso (autoridade + promessa emocional)
# Fix: reduziu headline pra 92px, subtitulo mais curto, numeros de autoridade compactos
# =============================================================================
c2 = base_head() + """
<div class="canvas" style="background:
  radial-gradient(ellipse at 30% 40%, #1a1810 0%, #000 65%);">

  <svg width="640" height="640" viewBox="0 0 640 640"
       style="position:absolute; right:-120px; top:280px; opacity:0.28;">
    <g fill="none" stroke="#F6E600" stroke-width="2">
      <circle cx="320" cy="320" r="300"/>
      <circle cx="320" cy="320" r="230"/>
      <circle cx="320" cy="320" r="160"/>
      <line x1="320" y1="10" x2="320" y2="120"/>
      <line x1="320" y1="630" x2="320" y2="520"/>
      <line x1="10" y1="320" x2="120" y2="320"/>
      <line x1="630" y1="320" x2="520" y2="320"/>
    </g>
    <text x="320" y="355" fill="#F6E600" text-anchor="middle"
          font-family="serif" font-size="150" opacity="0.9">陰陽</text>
  </svg>

  <div style="position:absolute; top:80px; left:60px;">
    <div class="pill dark">O MÉTODO <span style="color:#F6E600">•</span> FORMAÇÃO COMPLETA</div>
  </div>

  <div style="position:absolute; top:200px; left:60px; right:60px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 96px;">
      A CASA É O<br>
      <span class="hl">ESPELHO</span> DA<br>
      VIDA QUE<br>
      VOCÊ <span class="hl">VIVE</span>.
    </h1>

    <p class="sub white" style="max-width: 640px; margin-top: 34px;">
      Aprenda a <b>ler os sinais</b> do seu ambiente<br>
      e a destravar o que segura sua energia,<br>
      seu sono, seu dinheiro e sua paz.
    </p>
  </div>

  <div style="position:absolute; bottom:290px; left:60px; right:60px;
              display:flex; gap:60px; align-items:flex-end;">
    <div>
      <div style="font-family:'Anton'; font-size:82px; color:#F6E600; line-height:0.9;">+40</div>
      <div style="font-family:'Inter'; font-size:18px; font-weight:700; color:#EEE; letter-spacing:1.5px; margin-top:4px;">ANOS DE ENSINO</div>
    </div>
    <div style="width:2px; height:70px; background:rgba(246,230,0,0.5);"></div>
    <div>
      <div style="font-family:'Anton'; font-size:82px; color:#F6E600; line-height:0.9;">+40 MIL</div>
      <div style="font-family:'Inter'; font-size:18px; font-weight:700; color:#EEE; letter-spacing:1.5px; margin-top:4px;">ALUNOS FORMADOS</div>
    </div>
  </div>

  <div class="ig-bar dark">
    <div class="avatar"></div>
    <div class="name"><b>Francisco Borrello</b><span>@franciscoborrello</span></div>
    <div class="btn">Seguindo v</div>
    <div class="btn">Enviar mensagem</div>
    <div class="dots">•••</div>
  </div>

  <div class="cta small">ACESSE O LINK NA BIO</div>
</div>
</body></html>
"""
render(c2, str(OUT / "02_curso_chapeu_preto.png"))


# =============================================================================
# CRIATIVO 3 — Kit (fundo bege)
# Fix: subtitulo subido, kit menor, linha do meio ajustada
# =============================================================================
c3 = base_head() + """
<div class="canvas" style="background: #F5F1E8;">

  <div class="dots-grid" style="right:80px; top:80px;"></div>

  <svg width="70" height="420" viewBox="0 0 70 420"
       style="position:absolute; left:60px; top:820px; opacity:0.55;">
    <g fill="none" stroke="#111" stroke-width="2">
      <polygon points="35,10 60,50 10,50"/>
      <rect x="13" y="75" width="44" height="44"/>
      <polygon points="35,140 60,165 35,190 10,165"/>
      <polygon points="35,220 58,238 50,270 20,270 12,238"/>
      <line x1="35" y1="50" x2="35" y2="75" stroke-dasharray="2,4"/>
      <line x1="35" y1="119" x2="35" y2="140" stroke-dasharray="2,4"/>
      <line x1="35" y1="190" x2="35" y2="220" stroke-dasharray="2,4"/>
    </g>
  </svg>

  <div style="position:absolute; right:20px; top:340px;
              width:520px; height:520px;
              background: radial-gradient(circle, rgba(246,230,0,0.75) 0%, rgba(246,230,0,0.28) 45%, transparent 65%);
              border-radius:50%;"></div>

  <svg width="520" height="520" viewBox="0 0 520 520"
       style="position:absolute; right:20px; top:340px;">
    <g stroke="#3A2E20" stroke-width="3" stroke-linejoin="round" fill="#C79A6B">
      <polygon points="130,320 410,320 460,380 90,380"/>
      <polygon points="130,320 200,260 400,260 410,320" fill="#D9B08A"/>
      <polygon points="90,380 460,380 460,470 90,470" fill="#B0885A"/>
      <line x1="200" y1="260" x2="130" y2="320"/>
      <line x1="400" y1="260" x2="410" y2="320"/>
    </g>
    <g stroke="#3A2E20" stroke-width="2" stroke-linejoin="round">
      <polygon points="180,215 210,260 155,260" fill="#F6E600"/>
      <polygon points="240,175 285,260 215,260" fill="#FFF"/>
      <polygon points="310,195 350,260 285,260" fill="#B87333"/>
      <polygon points="370,215 400,260 345,260" fill="#F6E600"/>
    </g>
    <g stroke="#3A2E20" stroke-width="2" fill="#FFF">
      <rect x="80" y="395" width="120" height="80"/>
      <circle cx="140" cy="435" r="26" fill="none" stroke="#3A2E20"/>
      <line x1="140" y1="409" x2="140" y2="461" stroke="#3A2E20" stroke-width="1"/>
      <line x1="114" y1="435" x2="166" y2="435" stroke="#3A2E20" stroke-width="1"/>
    </g>
    <g stroke="#3A2E20" stroke-width="2" fill="#D4A017">
      <line x1="430" y1="380" x2="430" y2="435" stroke-width="2"/>
      <polygon points="430,435 448,462 412,462"/>
    </g>
  </svg>

  <div style="position:absolute; top:80px; left:60px;">
    <div style="display:inline-flex; align-items:center; gap:10px;
                border: 2px solid #111; border-radius: 100px;
                padding: 12px 26px; font-weight: 800; font-size: 22px;
                letter-spacing: 2px; color: #111;">
      LOJA OFICIAL <span style="color:#F6E600;">•</span> KIT COMPLETO
    </div>
  </div>

  <div style="position:absolute; top:200px; left:60px; right:60px;">
    <span class="dash"></span>
    <h1 class="h1 light" style="font-size: 100px;">
      TUDO O QUE<br>
      <span class="hl">A ENERGIA</span><br>
      DA SUA CASA<br>
      PEDE EM UM<br>
      <span class="hl">SÓ KIT</span>.
    </h1>
  </div>

  <p class="sub dark" style="position:absolute; left:170px; top:980px; max-width: 560px;">
    <b>Cristais, gráficos radiônicos e pêndulo</b><br>
    reunidos no kit oficial do Prof. Borrello.<br>
    Praticidade pra começar hoje.
  </p>

  <div class="ig-bar light">
    <div class="avatar"></div>
    <div class="name"><b>Francisco Borrello</b><span>@franciscoborrello</span></div>
    <div class="btn">Seguindo v</div>
    <div class="btn">Enviar mensagem</div>
    <div class="dots">•••</div>
  </div>

  <div class="cta small">CONHEÇA NA LOJA OFICIAL</div>
</div>
</body></html>
"""
render(c3, str(OUT / "03_kit_cameloterapia.png"))


# =============================================================================
# CRIATIVO 4 — Dica solta (espelho refletindo a cama)
# Fix: line-height 1.05 corrige acentos cortados; cama menor pra nao invadir CTA
# =============================================================================
c4 = base_head() + """
<div class="canvas" style="background:
  radial-gradient(ellipse at 65% 55%, #1c1a12 0%, #000 65%);">

  <svg width="1080" height="1350" viewBox="0 0 1080 1350"
       style="position:absolute; inset:0; opacity:0.55;">
    <defs>
      <filter id="blur2"><feGaussianBlur stdDeviation="4"/></filter>
    </defs>
    <path d="M 780 200 Q 900 400 750 550 Q 600 700 800 900 Q 950 1100 720 1250"
          stroke="#F6E600" stroke-width="7" fill="none" filter="url(#blur2)"/>
    <circle cx="820" cy="500" r="180" stroke="#F6E600" stroke-width="2" fill="none" opacity="0.4"/>
  </svg>

  <div style="position:absolute; right:110px; top:380px;
              width:320px; height:460px;
              border: 8px solid #B8956B;
              border-radius: 160px 160px 20px 20px;
              background: linear-gradient(160deg, rgba(246,230,0,0.20) 0%, rgba(30,25,10,0.85) 60%);
              box-shadow: 0 0 80px rgba(246,230,0,0.35);
              overflow: hidden;">
    <svg width="100%" height="100%" viewBox="0 0 320 460" preserveAspectRatio="none">
      <g opacity="0.55">
        <rect x="60" y="330" width="200" height="70" fill="#3a2f22"/>
        <rect x="75" y="315" width="65" height="35" fill="#7a6a55" rx="4"/>
        <rect x="180" y="315" width="65" height="35" fill="#7a6a55" rx="4"/>
      </g>
      <path d="M 40 180 Q 100 240 60 310" stroke="#F6E600" stroke-width="2" fill="none" opacity="0.7"/>
    </svg>
  </div>

  <svg width="420" height="180" viewBox="0 0 420 180"
       style="position:absolute; right:80px; bottom:340px;">
    <rect x="20" y="70" width="380" height="90" fill="#3a2f22" stroke="#5a4a35" stroke-width="2" rx="10"/>
    <rect x="50" y="45" width="140" height="55" fill="#8a7a65" rx="8"/>
    <rect x="230" y="45" width="140" height="55" fill="#8a7a65" rx="8"/>
    <rect x="30" y="120" width="360" height="40" fill="#5a4a35" rx="6"/>
  </svg>

  <div class="dots-grid" style="left:60px; top:80px; width:80px; height:80px;"></div>

  <div style="position:absolute; top:80px; left:180px;">
    <div class="pill dark">FENG SHUI <span style="color:#F6E600">•</span> ENERGIA DO QUARTO</div>
  </div>

  <div style="position:absolute; top:220px; left:60px; right:60px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 108px;">
      O <span class="hl">ESPELHO</span><br>
      QUE VÊ<br>
      SUA CAMA<br>
      NÃO TE<br>
      <span class="hl">DEIXA</span> EM PAZ.
    </h1>

    <p class="sub white" style="max-width: 580px; margin-top: 30px;">
      Espelho refletindo a cama <b>duplica</b><br>
      a energia do casal — e a do que<br>
      tira o seu sono. <b>Vire o espelho.</b>
    </p>
  </div>

  <div class="ig-bar dark">
    <div class="avatar"></div>
    <div class="name"><b>Francisco Borrello</b><span>@franciscoborrello</span></div>
    <div class="btn">Seguindo v</div>
    <div class="btn">Enviar mensagem</div>
    <div class="dots">•••</div>
  </div>

  <div class="cta">SALVE PRA LEMBRAR</div>
</div>
</body></html>
"""
render(c4, str(OUT / "04_dica_feng_shui.png"))


# =============================================================================
# CRIATIVO 5 — Autoridade Borrello
# Fix: numero +40MIL sobe pra bem acima da barra IG, foto ligeiramente menor
# =============================================================================
c5 = base_head() + f"""
<div class="canvas" style="background:
  radial-gradient(ellipse at 20% 40%, #1a1810 0%, #000 60%);">

  <div style="position:absolute; right:-80px; top:180px;
              width:800px; height:800px;
              background: radial-gradient(circle, rgba(246,230,0,0.32) 0%, transparent 55%);
              border-radius:50%;"></div>
  <div style="position:absolute; right:60px; top:320px;
              width:560px; height:560px;
              border: 2px solid rgba(246,230,0,0.35); border-radius:50%;"></div>
  <div style="position:absolute; right:160px; top:410px;
              width:380px; height:380px;
              border: 1px solid rgba(246,230,0,0.55); border-radius:50%;"></div>

  <img src="data:image/png;base64,{BORRELLO_B64}"
       style="position:absolute; right:-10px; bottom:210px;
              width:620px; height:auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));" />

  <div class="dots-grid" style="left:60px; top:80px; width:80px; height:80px;"></div>

  <div style="position:absolute; top:80px; left:220px;">
    <div class="pill dark">O MESTRE <span style="color:#F6E600">•</span> AUTORIDADE</div>
  </div>

  <div style="position:absolute; top:210px; left:60px; width:540px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 88px;">
      <span class="hl">40 ANOS</span><br>
      ENSINANDO<br>
      O QUE A<br>
      <span class="hl">CASA</span><br>
      TEM PRA<br>
      DIZER.
    </h1>
  </div>

  <div style="position:absolute; left:60px; right:60px; bottom:230px; z-index:9;
              display:flex; align-items:center; gap:24px;">
    <div>
      <div style="font-family:'Inter'; font-size:15px; font-weight:700;
                  color:#F6E600; letter-spacing:3px;">
        MAIS DE
      </div>
      <div style="font-family:'Anton'; font-size:78px; color:#FFF; line-height:0.9;">
        40 <span style="color:#F6E600;">MIL</span>
      </div>
    </div>
    <div style="width:2px; height:60px; background:rgba(246,230,0,0.5);"></div>
    <div style="font-family:'Inter'; font-size:16px; font-weight:600;
                color:#EEE; letter-spacing:1px; line-height:1.3;">
      ALUNOS FORMADOS<br>
      <span style="opacity:0.7;">EM TODO O BRASIL</span>
    </div>
  </div>

  <div class="ig-bar dark">
    <div class="avatar"></div>
    <div class="name"><b>Francisco Borrello</b><span>@franciscoborrello</span></div>
    <div class="btn">Seguindo v</div>
    <div class="btn">Enviar mensagem</div>
    <div class="dots">•••</div>
  </div>

  <div class="cta small">ACESSE O LINK NA BIO</div>
</div>
</body></html>
"""
render(c5, str(OUT / "05_autoridade_borrello.png"))

print("\nOK, 5 criativos renderizados em:", OUT)
