#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
V2 dos 4 estaticos do Borrello.

Ajustes chave em relacao a v1 (feedback do Renato):
- ZERO autoridade / auto-elogio (nada de "+40 anos", "+40 mil alunos", "referencia em")
- Copy em 1a pessoa dele conversando com o seguidor (pergunta, historia, contraste)
- Variar composicao entre criativos (nao repetir diagramacao)
- Temas menos batidos (evitar espelho, fogao, relogio)
- Fonte GRANDE (publico 60+)
- Renderizacao a 1x (nao 2x) pra ficar abaixo do limite 2000px

Formato: 1080x1350 (feed IG)
"""
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_v2_2026-09-18/estaticos_v2")
OUT.mkdir(parents=True, exist_ok=True)

W, H = 1080, 1350

BORRELLO_PNG = Path("/opt/mia/workspace/clientes/borrello/criativos_ig_teste_v2_2026-09-18/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&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; }}
  .pill.light-border {{ border-color: #111; color: #111; background: transparent; }}

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

  .hl {{
    background: #F6E600;
    color: #111;
    padding: 4px 18px 10px 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.3;
    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: linear-gradient(135deg, #F6E600, #B8860B);
    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 em 1x (garante saida <= 1350px, sem quebrar)."""
    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=1)
        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}")


# =============================================================================
# C1 v2 — Quiz Feng Shui
# Mudanca: sem autoridade, foco na curiosidade da pergunta.
# Nova composicao: fundo com gradiente radial em CIMA (nao lateral), silhueta de
# casa iluminada por dentro no centro, headline em cima, sub embaixo.
# =============================================================================
c1 = base_head() + """
<div class="canvas" style="background:
  radial-gradient(ellipse at 50% 30%, #1a1810 0%, #000 55%);">

  <!-- Textura grid pontos superior -->
  <div class="dots-grid" style="right:60px; top:60px; width:100px; height:100px;"></div>
  <div class="dots-grid" style="left:60px; top:60px; width:80px; height:80px; opacity:0.4;"></div>

  <!-- Silhueta de casa iluminada por dentro -->
  <svg width="720" height="600" viewBox="0 0 720 600"
       style="position:absolute; left:50%; top:640px; transform:translateX(-50%);">
    <defs>
      <radialGradient id="glow1" cx="50%" cy="55%" r="50%">
        <stop offset="0%" stop-color="#F6E600" stop-opacity="0.55"/>
        <stop offset="40%" stop-color="#F6E600" stop-opacity="0.15"/>
        <stop offset="100%" stop-color="#F6E600" stop-opacity="0"/>
      </radialGradient>
    </defs>
    <!-- brilho central -->
    <ellipse cx="360" cy="330" rx="360" ry="260" fill="url(#glow1)"/>
    <!-- casa (contorno) -->
    <g fill="none" stroke="#F6E600" stroke-width="4" stroke-linejoin="round">
      <polygon points="360,60 640,240 640,540 80,540 80,240"/>
      <polyline points="80,240 360,60 640,240"/>
      <!-- porta -->
      <rect x="310" y="380" width="100" height="160" fill="#F6E600" opacity="0.85"/>
      <!-- janelas -->
      <rect x="170" y="300" width="100" height="90" fill="#F6E600" opacity="0.65"/>
      <rect x="450" y="300" width="100" height="90" fill="#F6E600" opacity="0.65"/>
      <!-- linha divisoria porta -->
      <line x1="360" y1="380" x2="360" y2="540" stroke="#000" stroke-width="2"/>
    </g>
    <!-- ondas de energia saindo da casa -->
    <g fill="none" stroke="#F6E600" stroke-width="2" opacity="0.35">
      <path d="M 40 560 Q 360 480 680 560"/>
      <path d="M 20 580 Q 360 500 700 580" opacity="0.5"/>
    </g>
  </svg>

  <!-- Pill topo -->
  <div style="position:absolute; top:80px; left:60px;">
    <div class="pill dark">TESTE GRATUITO <span style="color:#F6E600">•</span> 7 PERGUNTAS</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:220px; left:60px; right:60px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 108px;">
      SUA CASA<br>
      TRABALHA<br>
      <span class="hl">A FAVOR</span><br>
      OU CONTRA<br>
      VOCÊ?
    </h1>
  </div>

  <!-- Subtitulo posicionado embaixo do headline -->
  <p class="sub white" style="position:absolute; top:830px; left:60px; right:60px; max-width: 720px; font-size:28px;">
    Descubra em <b>2 minutos</b> o que o seu<br>
    ambiente vem tentando te dizer.
  </p>

  <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">QUERO FAZER O TESTE</div>
</div>
</body></html>
"""
render(c1, str(OUT / "01_quiz_fengshui_v2.png"))


# =============================================================================
# C2 v2 — REPENSADO: agora e o Bagua (9 areas da casa) sem citar curso
# Copy em 1a pessoa: "Sua casa tem 9 areas. Cada uma cuida de uma parte da sua vida."
# CTA final discreto: "quer aprender comigo? Link na bio"
# =============================================================================
c2 = base_head() + """
<div class="canvas" style="background:
  radial-gradient(ellipse at 25% 25%, #1a1810 0%, #000 60%);">

  <!-- Pill topo esquerda -->
  <div style="position:absolute; top:80px; left:60px;">
    <div class="pill dark">MAPA DA CASA <span style="color:#F6E600">•</span> BAGUÁ</div>
  </div>

  <!-- Headline esquerda -->
  <div style="position:absolute; top:200px; left:60px; width:600px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 88px;">
      SUA CASA<br>
      TEM <span class="hl">9 ÁREAS</span>.<br>
      CADA UMA<br>
      CUIDA DE<br>
      UM PEDAÇO<br>
      DA SUA VIDA.
    </h1>
  </div>

  <!-- Grade 3x3 do bagua no lado direito -->
  <div style="position:absolute; right:50px; top:290px; width:420px; height:420px;
              display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
              gap:6px;">
    <div style="background:rgba(246,230,0,0.85); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:15px; padding:6px; line-height:1.1;">RIQUEZA</div>
    <div style="background:rgba(246,230,0,0.55); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:15px; padding:6px; line-height:1.1;">FAMA</div>
    <div style="background:rgba(246,230,0,0.85); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:14px; padding:6px; line-height:1.1;">AMOR<br>CASAL</div>

    <div style="background:rgba(246,230,0,0.55); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:14px; padding:6px; line-height:1.1;">FAMÍLIA<br>SAÚDE</div>
    <div style="background:#F6E600; color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Anton'; font-weight:400; font-size:32px; padding:6px; line-height:0.95;">TAI<br>CHI</div>
    <div style="background:rgba(246,230,0,0.55); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:14px; padding:6px; line-height:1.1;">CRIA-<br>TIVIDADE</div>

    <div style="background:rgba(246,230,0,0.85); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:12px; padding:6px; line-height:1.1;">AUTO-<br>CONHEC.</div>
    <div style="background:rgba(246,230,0,0.55); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:15px; padding:6px; line-height:1.1;">CARREIRA</div>
    <div style="background:rgba(246,230,0,0.85); color:#111; display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Inter'; font-weight:800; font-size:14px; padding:6px; line-height:1.1;">VIAGENS<br>AJUDA</div>
  </div>

  <!-- Legenda embaixo do bagua -->
  <div style="position:absolute; right:50px; top:730px; width:420px; text-align:center;
              font-family:'Inter'; font-size:15px; font-weight:600; color:#F6E600;
              letter-spacing:2px;">
    ↑ PORTA PRINCIPAL ↑
  </div>

  <!-- Subtitulo largo embaixo -->
  <p class="sub white" style="position:absolute; top:880px; left:60px; right:60px; max-width: 900px; font-size:28px;">
    Onde a sua porta principal fica<br>
    define <b>qual área é qual</b> — e o que<br>
    está travando na sua vida.
  </p>

  <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">SALVA PRA CONSULTAR DEPOIS</div>
</div>
</body></html>
"""
render(c2, str(OUT / "02_bagua_9_areas_v2.png"))


# =============================================================================
# C4 v2 — TEMA TROCADO: agora e sobre a ESPADA-DE-SAO-JORGE
# "A planta que voce colocou na sala pra proteger... pode estar afastando visitas."
# Composicao: fundo bege claro (variacao B da referencia), planta em silhueta grande,
# copy em 1a pessoa dele
# =============================================================================
c4 = base_head() + """
<div class="canvas" style="background: #F5F1E8;">

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

  <!-- Circulo de "aviso" atras da planta -->
  <div style="position:absolute; right:60px; top:350px;
              width:520px; height:520px;
              border: 3px solid rgba(0,0,0,0.15); border-radius:50%;"></div>
  <div style="position:absolute; right:130px; top:420px;
              width:380px; height:380px;
              border: 2px dashed rgba(0,0,0,0.25); border-radius:50%;"></div>

  <!-- Vaso + espada-de-sao-jorge (SVG) -->
  <svg width="360" height="600" viewBox="0 0 360 600"
       style="position:absolute; right:200px; top:340px;">
    <!-- folhas (espadas) -->
    <g stroke="#0d3b1f" stroke-width="3" stroke-linejoin="round">
      <path d="M 130 470 Q 105 300 90 60 Q 105 55 118 60 Q 135 300 150 470 Z" fill="#1e5f3a"/>
      <path d="M 155 470 Q 140 250 135 30 Q 155 25 168 32 Q 175 260 175 470 Z" fill="#2a7c4a"/>
      <path d="M 180 470 Q 175 230 180 10 Q 200 8 210 15 Q 210 240 200 470 Z" fill="#1e5f3a"/>
      <path d="M 205 470 Q 215 260 235 50 Q 250 50 260 60 Q 240 280 225 470 Z" fill="#2a7c4a"/>
      <path d="M 230 470 Q 250 300 275 100 Q 290 100 295 110 Q 275 320 250 470 Z" fill="#144d2e"/>
      <!-- bordas amarelas caracteristicas -->
      <path d="M 95 60 Q 100 55 108 60 Q 118 300 138 460" fill="none" stroke="#F6E600" stroke-width="2.5"/>
      <path d="M 140 30 Q 150 25 160 32 Q 168 250 165 460" fill="none" stroke="#F6E600" stroke-width="2.5"/>
      <path d="M 185 10 Q 195 8 205 15 Q 205 240 195 460" fill="none" stroke="#F6E600" stroke-width="2.5"/>
      <path d="M 240 50 Q 250 50 260 60 Q 240 280 225 460" fill="none" stroke="#F6E600" stroke-width="2.5"/>
    </g>
    <!-- vaso -->
    <g stroke="#3a2f22" stroke-width="3" stroke-linejoin="round">
      <path d="M 95 470 L 285 470 L 265 590 L 115 590 Z" fill="#8B5A3C"/>
      <ellipse cx="190" cy="470" rx="95" ry="15" fill="#6B4226"/>
    </g>
  </svg>

  <!-- Pill topo -->
  <div style="position:absolute; top:80px; left:180px;">
    <div class="pill light-border">FENG SHUI <span style="color:#B8860B">•</span> CUIDADO NA SALA</div>
  </div>

  <!-- Headline esquerda -->
  <div style="position:absolute; top:220px; left:60px; width:640px;">
    <span class="dash"></span>
    <h1 class="h1 light" style="font-size: 96px;">
      A PLANTA<br>
      QUE VOCÊ<br>
      COLOCOU<br>
      PRA <span class="hl">PROTEGER</span><br>
      PODE ESTAR<br>
      <span class="hl">AFASTANDO</span><br>
      GENTE.
    </h1>
  </div>

  <!-- Subtitulo -->
  <p class="sub dark" style="position:absolute; top:1000px; left:60px; right:60px; max-width: 900px; font-size:28px;">
    Espada-de-são-jorge <b>afasta visita</b>.<br>
    Se você quer receber, tira ela da sala.
  </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">SALVA PRA NÃO ESQUECER</div>
</div>
</body></html>
"""
render(c4, str(OUT / "04_dica_espada_sao_jorge_v2.png"))


# =============================================================================
# C5 v2 — REPENSADO como "historia / conversa" em 1a pessoa
# "Ontem uma aluna me perguntou: 'Prof, meu quarto ta pesado, e agora?'"
# Sem "40 anos", sem "40 mil alunos". Foto do Borrello em pose conversa.
# Composicao NOVA: layout mais aberto, foto menor (nao dominante), headline em cima
# em 2 blocos com destaque, subtitulo com resposta curta.
# =============================================================================
c5 = base_head() + f"""
<div class="canvas" style="background:
  radial-gradient(ellipse at 70% 80%, #1c1a12 0%, #000 60%);">

  <!-- Halo suave direita -->
  <div style="position:absolute; right:-100px; bottom:100px;
              width:700px; height:700px;
              background: radial-gradient(circle, rgba(246,230,0,0.25) 0%, transparent 55%);
              border-radius:50%;"></div>

  <!-- Foto do Borrello - menor e no canto inferior direito -->
  <img src="data:image/png;base64,{BORRELLO_B64}"
       style="position:absolute; right:-40px; bottom:190px;
              width:520px; height:auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));" />

  <!-- Textura pontos superior direita -->
  <div class="dots-grid" style="right:80px; top:80px; width:100px; height:100px;"></div>

  <!-- Pill topo esquerda -->
  <div style="position:absolute; top:80px; left:60px;">
    <div class="pill dark">CONVERSA <span style="color:#F6E600">•</span> UM ALUNO ME PERGUNTOU</div>
  </div>

  <!-- Aspas gigantes decorativas -->
  <div style="position:absolute; top:170px; left:60px;
              font-family:'Anton'; font-size:220px; color:#F6E600;
              line-height:0.7; opacity:0.85;">"</div>

  <!-- Headline - falar do "quarto pesado" que uma aluna trouxe -->
  <div style="position:absolute; top:300px; left:60px; width:560px;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 84px;">
      MEU<br>
      QUARTO<br>
      ESTÁ<br>
      <span class="hl">PESADO</span>.<br>
      E AGORA?
    </h1>
  </div>

  <!-- Sub resposta -->
  <div style="position:absolute; top:870px; left:60px; width:560px;">
    <p style="font-family:'Inter'; font-size:23px; font-weight:600; color:#F6E600;
              letter-spacing:2px; margin-bottom:14px;">
      MINHA RESPOSTA:
    </p>
    <p style="font-family:'Inter'; font-size:27px; font-weight:500; color:#EEE; line-height:1.32;">
      Abre a janela. Tira o que<br>
      não te serve. E olha o que<br>
      tem <b>atrás da cabeceira</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 small">MANDA A SUA PERGUNTA NOS COMENTÁRIOS</div>
</div>
</body></html>
"""
render(c5, str(OUT / "05_conversa_quarto_pesado_v2.png"))

print("\nOK, 4 estaticos v2 renderizados em:", OUT)
