#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
V3 dos 3 estaticos refeitos do Borrello (C1, C4, C5).

Regra nova (feedback do Renato em 2026-09-18):
- TODA imagem visual (casa, planta, ambiente) e REALISTA via gpt-image-2.
- Sem vetor SVG, sem silhueta, sem ilustracao chapada.
- Foto do Borrello vem da pasta oficial (FOTOS BORRELLO). Rotacionar.
- Layout/overlay (headline, selo, CTA) continua via HTML+Playwright.

Formato: 1080x1350 (feed IG)
"""
import os
import base64
import tempfile
from pathlib import Path
from playwright.sync_api import sync_playwright

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

IMG_BASE = Path("/opt/mia/workspace/clientes/borrello/criativos_ig_teste_v3_2026-09-18/imagens_base")

W, H = 1080, 1350


def to_b64(path: Path) -> str:
    with open(path, "rb") as f:
        return base64.b64encode(f.read()).decode()


CASA_B64 = to_b64(IMG_BASE / "c1_casa_interior.png")
ESPADA_B64 = to_b64(IMG_BASE / "c4_espada_sao_jorge.png")
BORRELLO_B64 = to_b64(IMG_BASE / "borrello_c5_recorte.png")


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.55);
    backdrop-filter: blur(6px);
  }}
  .pill.dark {{ background: #000; color: #FFF; }}
  .pill.light-border {{ border-color: #111; color: #111; background: rgba(255,255,255,0.85); }}

  .h1 {{
    font-family: 'Anton', 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -0.5px;
  }}
  .h1.dark  {{ color: #FFF; text-shadow: 0 4px 24px rgba(0,0,0,0.75); }}
  .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;
    text-shadow: none;
  }}

  .sub {{
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 30px; line-height: 1.3;
    margin-top: 26px;
  }}
  .sub.white {{ color: #F5F5F5; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }}
  .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.75; 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; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }}
  .ig-bar.dark .btn {{ background: rgba(255,255,255,0.18); color: #FFF; backdrop-filter: blur(4px); }}
  .ig-bar.light .name b {{ color: #111; }}
  .ig-bar.light .name span {{ color: #444; }}
  .ig-bar.light .btn {{ background: rgba(0,0,0,0.08); color: #111; }}
  .ig-bar .dots {{ font-size: 22px; margin-left: auto; opacity: 0.9; }}
  .ig-bar.dark .dots {{ color: #FFF; }}

  .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;
    box-shadow: 0 12px 40px rgba(246,230,0,0.35);
  }}
  .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.55;
  }}

  /* Camadas de escurecimento sobre a foto de base */
  .darken-top {{
    position: absolute; left: 0; right: 0; top: 0; height: 70%;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.55) 40%,
      rgba(0,0,0,0.15) 100%);
  }}
  .darken-bottom {{
    position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(0deg,
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.7) 30%,
      rgba(0,0,0,0.0) 100%);
  }}
  .vignette {{
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
  }}
</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 v3 — Quiz Feng Shui com foto REALISTA de casa
# Composicao: foto de casa como bg (com escurecimento nas 2 pontas),
# headline em cima (branco+destaque amarelo), sub embaixo, CTA
# =============================================================================
c1 = base_head() + f"""
<div class="canvas" style="background: #000;">
  <!-- Foto REAL da casa como base -->
  <img src="data:image/png;base64,{CASA_B64}"
       style="position:absolute; inset:0; width:100%; height:100%;
              object-fit: cover; object-position: center;" />

  <!-- Escurecimento em cima e embaixo pra legibilidade -->
  <div class="darken-top"></div>
  <div class="darken-bottom"></div>
  <div class="vignette"></div>

  <!-- Textura pontos amarelos canto -->
  <div class="dots-grid" style="right:60px; top:60px; width:100px; height:100px;"></div>

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

  <!-- Headline -->
  <div style="position:absolute; top:200px; left:60px; right:60px; z-index:5;">
    <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 -->
  <p class="sub white" style="position:absolute; top:830px; left:60px; right:60px; max-width: 900px; font-size:30px; z-index:5;">
    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_v3.png"))


# =============================================================================
# C4 v3 — Espada-de-Sao-Jorge com foto REALISTA
# Composicao: fundo escuro (#111), foto da planta como imagem grande a direita,
# headline enorme a esquerda em branco com destaques amarelos, sub embaixo
# =============================================================================
c4 = base_head() + f"""
<div class="canvas" style="background: #0F0E0C;">

  <!-- Foto REAL da planta como camada visual a direita, escurecida um pouco -->
  <div style="position:absolute; right:-60px; top:0; bottom:0; width:640px;
              background-image: url('data:image/png;base64,{ESPADA_B64}');
              background-size: cover; background-position: center;
              filter: brightness(0.92) contrast(1.05);">
  </div>
  <!-- Fade escuro na borda esquerda da foto (transicao pra bg preto) -->
  <div style="position:absolute; right:580px; top:0; bottom:0; width:200px;
              background: linear-gradient(90deg, #0F0E0C 0%, rgba(15,14,12,0.0) 100%);"></div>

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

  <!-- Pill topo esquerda -->
  <div style="position:absolute; top:80px; left:60px; z-index:5;">
    <div class="pill">FENG SHUI <span style="color:#F6E600">•</span> CUIDADO NA SALA</div>
  </div>

  <!-- Headline esquerda -->
  <div style="position:absolute; top:220px; left:60px; width:640px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 92px;">
      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 white" style="position:absolute; top:1030px; left:60px; right:60px; max-width: 900px; font-size:28px; z-index:5;">
    Espada-de-são-jorge <b>afasta visita</b>.<br>
    Se você quer receber, tira ela da sala.
  </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 NÃO ESQUECER</div>
</div>
</body></html>
"""
render(c4, str(OUT / "04_dica_espada_sao_jorge_v3.png"))


# =============================================================================
# C5 v3 — Conversa (Foto NOVA do Borrello _MG_9427 - camisa preta)
# Composicao: fundo preto com halo amarelo, foto do Borrello no canto direito,
# headline "MEU QUARTO ESTA PESADO. E AGORA?" em aspas de aluno,
# resposta dele em destaque
# =============================================================================
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.28) 0%, transparent 55%);
              border-radius:50%;"></div>

  <!-- Foto REAL do Borrello (camisa preta) - direita -->
  <img src="data:image/png;base64,{BORRELLO_B64}"
       style="position:absolute; right:-60px; bottom:170px;
              height: 900px; width: auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.7));" />

  <!-- 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; z-index:5;">
    <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.88; z-index:4;">"</div>

  <!-- Headline -->
  <div style="position:absolute; top:310px; left:60px; width:560px; z-index:5;">
    <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:900px; left:60px; width:560px; z-index:5;">
    <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:26px; font-weight:500; color:#EEE; line-height:1.32;
              text-shadow: 0 2px 10px rgba(0,0,0,0.6);">
      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_v3.png"))

print("\nOK, 3 estaticos v3 renderizados em:", OUT)
