#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Lote 2 (2026-09-21) - 5 estaticos + 1 carrossel (7 slides) Borrello IG.

Padrao v3 aprovado:
- Paleta preto (#0a0a0a) + amarelo neon #F6E600
- Fonte headline: Bebas Neue (NUNCA Anton) - regra atualizada
- Fonte corpo: Inter
- Public 60+: fontes grandes (headline 90-110pt, body 32pt+)
- Foto do Borrello rotaciona entre 4 diferentes (5 estaticos, 1 sem foto)
- Imagens de contexto realistas via gpt-image-1
- Copy em 1a pessoa Borrello, zero auto-elogio, foco em desejo/dor/curiosidade

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

BASE = Path("/opt/mia/workspace/clientes/borrello/criativos_ig_lote2_2026-09-21")
IMG_BASE = BASE / "imagens_base"
ESTAT = BASE / "estaticos"
CARR = BASE / "carrossel_quarto"
ESTAT.mkdir(parents=True, exist_ok=True)
CARR.mkdir(parents=True, exist_ok=True)

FOTOS_BORRELLO = Path("/opt/mia/workspace/clientes/borrello/fotos_banner/FOTOS BORRELLO")

W, H = 1080, 1350


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


# Imagens de contexto (gpt-image-1)
IMG_CASA_BAGUA = b64(IMG_BASE / "01_casa_planta_baixa_bagua.png")
IMG_PORTA = b64(IMG_BASE / "02_porta_entrada_casa.png")
IMG_SALA_PESADA = b64(IMG_BASE / "03_sala_energia_pesada.png")
IMG_LIMPEZA = b64(IMG_BASE / "04_vassoura_sal_grosso_limpeza.png")
IMG_PLANTAS = b64(IMG_BASE / "05_plantas_prosperidade.png")

C_S2 = b64(IMG_BASE / "c_slide2_cama_porta.png")
C_S3 = b64(IMG_BASE / "c_slide3_espelho_quarto.png")
C_S4 = b64(IMG_BASE / "c_slide4_cabeceira_parede.png")
C_S5 = b64(IMG_BASE / "c_slide5_debaixo_cama_vazio.png")
C_S6 = b64(IMG_BASE / "c_slide6_cores_frias_quarto.png")

# Fotos do Borrello (rotacao)
FOTO_9391 = b64(FOTOS_BORRELLO / "sem_fundo" / "_MG_9391.png")  # camisa xadrez, gesto de 3 dedos - SEM FUNDO
FOTO_9299 = b64(FOTOS_BORRELLO / "sem_fundo" / "_MG_9299.png")  # terno cinza, apontando - SEM FUNDO
FOTO_9425 = b64(FOTOS_BORRELLO / "sem_fundo" / "_MG_9425.png")  # camisa preta, mao no ombro - SEM FUNDO
FOTO_9366 = b64(FOTOS_BORRELLO / "sem_fundo" / "_MG_9366.png")  # camisa cinza, oculos, encostado - SEM FUNDO


def 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=Bebas+Neue&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; background: #0a0a0a; }}
  .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; }}

  .h1 {{
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0px;
  }}
  .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: 22px 20px 14px 20px;
    border-radius: 8px;
    display: inline-block;
    line-height: 1.0;
    margin: 4px 0;
    text-shadow: none;
  }}

  .sub {{
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 32px; line-height: 1.3;
    margin-top: 26px;
  }}
  .sub.white {{ color: #F5F5F5; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }}

  .dash {{
    display: block; width: 60px; height: 5px; 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 .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;
  }}

  .darken-top {{
    position: absolute; left: 0; right: 0; top: 0; height: 70%;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.82) 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.92) 0%,
      rgba(0,0,0,0.72) 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%);
  }}

  /* Carrossel */
  .badge-num {{
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px;
    background: #F6E600; color: #111;
    font-family: 'Bebas Neue'; font-size: 44px;
    border-radius: 8px;
  }}
  .step-label {{
    font-family: 'Inter'; font-weight: 800; font-size: 22px;
    color: #F6E600; letter-spacing: 3px; text-transform: uppercase;
  }}
  .body-text {{
    font-family: 'Inter'; font-weight: 500; font-size: 32px;
    color: #EEE; line-height: 1.35;
  }}
  .body-text b {{ color: #F6E600; font-weight: 800; }}
  .arrow {{
    position: absolute; right: 40px; bottom: 60px;
    width: 62px; height: 62px; border-radius: 50%;
    background: #F6E600; color: #111;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bebas Neue'; font-size: 40px;
    z-index: 10;
  }}
  .page-num {{
    position: absolute; left: 40px; bottom: 60px;
    font-family: 'Inter'; font-weight: 700; font-size: 22px;
    color: rgba(255,255,255,0.7); letter-spacing: 2px;
    z-index: 10;
  }}
</style>
{extra_css}
</head><body>"""


def render(html, dest):
    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(1000)
        page.screenshot(path=str(dest), clip={"x": 0, "y": 0, "width": W, "height": H})
        browser.close()
    os.unlink(tmp.name)
    print(f"  OK -> {dest.name}")


# =============================================================================
# ESTATICO 01 - Cores do feng shui por area (bagua)
# Composicao: fundo preto + minimapa do bagua (grid 3x3 com cores)
# Sem foto do Borrello - e um mapa/dica
# =============================================================================
def render_e01():
    html = head() + f"""
<div class="canvas" style="background: #0a0a0a;">

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

  <!-- Pill topo -->
  <div style="position:absolute; top:70px; left:60px; z-index:5;">
    <div class="pill">FENG SHUI <span style="color:#F6E600">•</span> BAGUA DAS CORES</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:170px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 104px;">
      CADA CANTO<br>
      DA SUA<br>
      CASA PEDE<br>
      <span class="hl">UMA COR</span>.
    </h1>
  </div>

  <!-- Grid Bagua 3x3 -->
  <div style="position:absolute; top:720px; left:60px; right:60px; z-index:5;
              display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;">

    <!-- Linha 1 -->
    <div style="background:#6B21A8; color:#FFF; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">FUNDO ESQ.</div>
      <div style="font-size:26px; margin-top:6px;">PROSPERIDADE</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Roxo</div>
    </div>
    <div style="background:#DC2626; color:#FFF; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">FUNDO CENTRO</div>
      <div style="font-size:26px; margin-top:6px;">FAMA</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Vermelho</div>
    </div>
    <div style="background:#EC4899; color:#FFF; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">FUNDO DIR.</div>
      <div style="font-size:26px; margin-top:6px;">AMOR</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Rosa</div>
    </div>

    <!-- Linha 2 -->
    <div style="background:#059669; color:#FFF; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">MEIO ESQ.</div>
      <div style="font-size:26px; margin-top:6px;">FAMÍLIA</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Verde</div>
    </div>
    <div style="background:#F6E600; color:#111; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">CENTRO</div>
      <div style="font-size:26px; margin-top:6px;">SAÚDE</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Amarelo</div>
    </div>
    <div style="background:#F5F5F4; color:#111; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.85;">MEIO DIR.</div>
      <div style="font-size:26px; margin-top:6px;">FILHOS</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.8;">Branco</div>
    </div>

    <!-- Linha 3 -->
    <div style="background:#1E3A8A; color:#FFF; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">FRENTE ESQ.</div>
      <div style="font-size:26px; margin-top:6px;">SABEDORIA</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Azul</div>
    </div>
    <div style="background:#000; border:2px solid #F6E600; color:#FFF; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">FRENTE CENTRO</div>
      <div style="font-size:26px; margin-top:6px;">CARREIRA</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Preto</div>
    </div>
    <div style="background:#9CA3AF; color:#111; padding:18px 12px; border-radius:10px;
                text-align:center; font-family:'Inter'; font-weight:800;">
      <div style="font-size:19px; letter-spacing:2px; opacity:0.9;">FRENTE DIR.</div>
      <div style="font-size:26px; margin-top:6px;">AMIGOS</div>
      <div style="font-size:20px; margin-top:4px; opacity:0.85;">Cinza</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">SALVA PARA CONSULTAR EM CASA</div>
</div>
</body></html>
"""
    render(html, ESTAT / "01_cores_feng_shui_bagua.png")


# =============================================================================
# ESTATICO 02 - 3 erros na entrada da casa
# Foto: _MG_9391 (Borrello com gesto de 3 dedos) - PERFEITO
# Composicao: foto da porta ao fundo escurecida + Borrello sobreposto
# =============================================================================
def render_e02():
    html = head() + f"""
<div class="canvas" style="background: #0a0a0a;">

  <!-- Foto da porta como bg -->
  <img src="data:image/png;base64,{IMG_PORTA}"
       style="position:absolute; inset:0; width:100%; height:100%;
              object-fit: cover; object-position: center; opacity: 0.55;" />

  <div class="darken-top"></div>
  <div class="darken-bottom"></div>
  <div class="vignette"></div>

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

  <!-- Pill topo -->
  <div style="position:absolute; top:70px; left:60px; z-index:5;">
    <div class="pill">ENTRADA <span style="color:#F6E600">•</span> 3 ERROS COMUNS</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:180px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 108px;">
      A ENERGIA<br>
      DA SUA CASA<br>
      COMEÇA<br>
      <span class="hl">NA PORTA</span>.
    </h1>
  </div>

  <!-- Foto Borrello sobreposta a direita -->
  <img src="data:image/png;base64,{FOTO_9391}"
       style="position:absolute; right:-40px; bottom:220px;
              height: 720px; width: auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8));
              z-index: 4;" />

  <!-- Lista de erros a esquerda -->
  <div style="position:absolute; top:770px; left:60px; width:520px; z-index:5;">
    <div style="display:flex; align-items:flex-start; gap:14px; margin-bottom:16px;">
      <div style="width:44px; height:44px; background:#F6E600; color:#111; border-radius:8px;
                  display:flex; align-items:center; justify-content:center;
                  font-family:'Bebas Neue'; font-size:32px; flex-shrink:0;">1</div>
      <div style="font-family:'Inter'; font-weight:600; font-size:32px; color:#FFF;
                  text-shadow: 0 2px 10px rgba(0,0,0,0.8);">
        Sapato bagunçado do lado de fora.
      </div>
    </div>
    <div style="display:flex; align-items:flex-start; gap:14px; margin-bottom:16px;">
      <div style="width:44px; height:44px; background:#F6E600; color:#111; border-radius:8px;
                  display:flex; align-items:center; justify-content:center;
                  font-family:'Bebas Neue'; font-size:32px; flex-shrink:0;">2</div>
      <div style="font-family:'Inter'; font-weight:600; font-size:32px; color:#FFF;
                  text-shadow: 0 2px 10px rgba(0,0,0,0.8);">
        Lâmpada queimada há semanas.
      </div>
    </div>
    <div style="display:flex; align-items:flex-start; gap:14px;">
      <div style="width:44px; height:44px; background:#F6E600; color:#111; border-radius:8px;
                  display:flex; align-items:center; justify-content:center;
                  font-family:'Bebas Neue'; font-size:32px; flex-shrink:0;">3</div>
      <div style="font-family:'Inter'; font-weight:600; font-size:32px; color:#FFF;
                  text-shadow: 0 2px 10px rgba(0,0,0,0.8);">
        Espelho de frente pra porta.
      </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">COMENTA QUAL VOCÊ TEM EM CASA</div>
</div>
</body></html>
"""
    render(html, ESTAT / "02_3_erros_entrada_casa.png")


# =============================================================================
# ESTATICO 03 - Sinais de energia parada
# Foto: _MG_9299 (Borrello de terno cinza, apontando)
# Composicao: foto de sala pesada como bg + Borrello + checklist
# =============================================================================
def render_e03():
    html = head() + f"""
<div class="canvas" style="background: #0a0a0a;">

  <img src="data:image/png;base64,{IMG_SALA_PESADA}"
       style="position:absolute; inset:0; width:100%; height:100%;
              object-fit: cover; object-position: center; opacity: 0.5;" />

  <div class="darken-top"></div>
  <div class="darken-bottom"></div>
  <div class="vignette"></div>

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

  <!-- Pill -->
  <div style="position:absolute; top:70px; right:60px; z-index:5;">
    <div class="pill">CHECKLIST <span style="color:#F6E600">•</span> 3 SINAIS</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:180px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 100px;">
      SUA CASA<br>
      ESTÁ<br>
      <span class="hl">PEDINDO</span><br>
      SOCORRO?
    </h1>
  </div>

  <!-- Foto Borrello a direita -->
  <img src="data:image/png;base64,{FOTO_9299}"
       style="position:absolute; right:-140px; top:80px;
              height: 780px; width: auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)) brightness(0.85);
              z-index: 3; mix-blend-mode: normal;" />

  <!-- Checklist -->
  <div style="position:absolute; top:800px; left:60px; right:60px; z-index:5;">
    <div style="background: rgba(0,0,0,0.75); border-left: 5px solid #F6E600;
                padding: 20px 24px; border-radius: 6px; margin-bottom: 12px;
                backdrop-filter: blur(4px);">
      <div style="font-family:'Inter'; font-weight:700; font-size:30px; color:#FFF;">
        <span style="color:#F6E600;">✓</span> Poeira que volta em 2 dias.
      </div>
    </div>
    <div style="background: rgba(0,0,0,0.75); border-left: 5px solid #F6E600;
                padding: 20px 24px; border-radius: 6px; margin-bottom: 12px;
                backdrop-filter: blur(4px);">
      <div style="font-family:'Inter'; font-weight:700; font-size:30px; color:#FFF;">
        <span style="color:#F6E600;">✓</span> Cheiro estranho que não sai.
      </div>
    </div>
    <div style="background: rgba(0,0,0,0.75); border-left: 5px solid #F6E600;
                padding: 20px 24px; border-radius: 6px;
                backdrop-filter: blur(4px);">
      <div style="font-family:'Inter'; font-weight:700; font-size:30px; color:#FFF;">
        <span style="color:#F6E600;">✓</span> Cansaço só de chegar em casa.
      </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">SALVA PARA VERIFICAR HOJE</div>
</div>
</body></html>
"""
    render(html, ESTAT / "03_sinais_energia_parada.png")


# =============================================================================
# ESTATICO 04 - Rotina de limpeza energetica simples
# Foto: _MG_9425 (Borrello camisa preta, mao no ombro)
# Composicao: foto de limpeza (sal, sabao, vela) como bg + Borrello + passos
# =============================================================================
def render_e04():
    html = head() + f"""
<div class="canvas" style="background: #0a0a0a;">

  <img src="data:image/png;base64,{IMG_LIMPEZA}"
       style="position:absolute; inset:0; width:100%; height:100%;
              object-fit: cover; object-position: center; opacity: 0.42;" />

  <div class="darken-top"></div>
  <div class="darken-bottom"></div>
  <div class="vignette"></div>

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

  <!-- Pill -->
  <div style="position:absolute; top:70px; left:60px; z-index:5;">
    <div class="pill">RITUAL SEMANAL <span style="color:#F6E600">•</span> 5 MINUTOS</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:180px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 110px;">
      LIMPA A<br>
      ENERGIA<br>
      DA CASA EM<br>
      <span class="hl">5 MINUTOS</span>.
    </h1>
  </div>

  <!-- Foto Borrello canto direito baixo -->
  <img src="data:image/png;base64,{FOTO_9425}"
       style="position:absolute; right:-80px; bottom:220px;
              height: 620px; width: auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9));
              z-index: 3;" />

  <!-- Passos a esquerda -->
  <div style="position:absolute; top:770px; left:60px; width:560px; z-index:5;">
    <div style="display:flex; align-items:center; gap:16px; margin-bottom:18px;">
      <div style="width:52px; height:52px; background:#F6E600; color:#111; border-radius:50%;
                  display:flex; align-items:center; justify-content:center;
                  font-family:'Bebas Neue'; font-size:36px; flex-shrink:0;">1</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:32px; color:#FFF;
                  text-shadow: 0 2px 10px rgba(0,0,0,0.85);">
        Abra todas as janelas.
      </div>
    </div>
    <div style="display:flex; align-items:center; gap:16px; margin-bottom:18px;">
      <div style="width:52px; height:52px; background:#F6E600; color:#111; border-radius:50%;
                  display:flex; align-items:center; justify-content:center;
                  font-family:'Bebas Neue'; font-size:36px; flex-shrink:0;">2</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:32px; color:#FFF;
                  text-shadow: 0 2px 10px rgba(0,0,0,0.85);">
        Passe pano com sal grosso.
      </div>
    </div>
    <div style="display:flex; align-items:center; gap:16px;">
      <div style="width:52px; height:52px; background:#F6E600; color:#111; border-radius:50%;
                  display:flex; align-items:center; justify-content:center;
                  font-family:'Bebas Neue'; font-size:36px; flex-shrink:0;">3</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:32px; color:#FFF;
                  text-shadow: 0 2px 10px rgba(0,0,0,0.85);">
        Acenda uma vela branca.
      </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">SALVA E FAÇA TODA SEMANA</div>
</div>
</body></html>
"""
    render(html, ESTAT / "04_rotina_limpeza_energetica.png")


# =============================================================================
# ESTATICO 05 - Plantas que atraem prosperidade
# Foto: _MG_9366 (Borrello camisa cinza)
# Composicao: foto das plantas como bg + Borrello + lista de plantas
# =============================================================================
def render_e05():
    html = head() + f"""
<div class="canvas" style="background: #0a0a0a;">

  <img src="data:image/png;base64,{IMG_PLANTAS}"
       style="position:absolute; inset:0; width:100%; height:100%;
              object-fit: cover; object-position: center; opacity: 0.55;" />

  <div class="darken-top"></div>
  <div class="darken-bottom"></div>
  <div class="vignette"></div>

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

  <!-- Pill -->
  <div style="position:absolute; top:70px; right:60px; z-index:5;">
    <div class="pill">PLANTAS <span style="color:#F6E600">•</span> PROSPERIDADE</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:180px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 106px;">
      3 PLANTAS<br>
      QUE PUXAM<br>
      <span class="hl">DINHEIRO</span><br>
      PRA CASA.
    </h1>
  </div>

  <!-- Foto Borrello a direita -->
  <img src="data:image/png;base64,{FOTO_9366}"
       style="position:absolute; right:-120px; top:70px;
              height: 760px; width: auto;
              filter: drop-shadow(0 20px 40px rgba(0,0,0,0.9)) brightness(0.9);
              z-index: 3;" />

  <!-- Lista plantas -->
  <div style="position:absolute; top:800px; left:60px; right:60px; z-index:5;
              display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;">

    <div style="background: rgba(0,0,0,0.8); border: 2px solid #F6E600;
                padding: 20px 16px; border-radius: 12px; text-align:center;
                backdrop-filter: blur(4px);">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">
        JADE
      </div>
      <div style="font-family:'Inter'; font-weight:700; font-size:22px; color:#FFF; margin-top:8px;">
        Entrada de dinheiro
      </div>
      <div style="font-family:'Inter'; font-weight:500; font-size:20px; color:#DDD; margin-top:6px; line-height:1.2;">
        Coloque perto da entrada
      </div>
    </div>

    <div style="background: rgba(0,0,0,0.8); border: 2px solid #F6E600;
                padding: 20px 16px; border-radius: 12px; text-align:center;
                backdrop-filter: blur(4px);">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">
        BAMBU
      </div>
      <div style="font-family:'Inter'; font-weight:700; font-size:22px; color:#FFF; margin-top:8px;">
        Sorte e estabilidade
      </div>
      <div style="font-family:'Inter'; font-weight:500; font-size:20px; color:#DDD; margin-top:6px; line-height:1.2;">
        3 hastes na sala
      </div>
    </div>

    <div style="background: rgba(0,0,0,0.8); border: 2px solid #F6E600;
                padding: 20px 16px; border-radius: 12px; text-align:center;
                backdrop-filter: blur(4px);">
      <div style="font-family:'Bebas Neue'; font-size:36px; color:#F6E600; line-height:0.9; padding-top: 5px;">
        PACHIRA
      </div>
      <div style="font-family:'Inter'; font-weight:700; font-size:22px; color:#FFF; margin-top:8px;">
        Fartura financeira
      </div>
      <div style="font-family:'Inter'; font-weight:500; font-size:20px; color:#DDD; margin-top:6px; line-height:1.2;">
        No canto da riqueza
      </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">SALVA PRA COMPRAR NO FIM DE SEMANA</div>
</div>
</body></html>
"""
    render(html, ESTAT / "05_plantas_prosperidade.png")


# =============================================================================
# CARROSSEL - Feng Shui no quarto - 5 mudanças
# 7 slides: capa + 5 conteudo + CTA
# =============================================================================

def carr_slide_conteudo(numero_str, label, headline_bebas, texto_body, foto_b64, page_num, dest_name):
    """Slide de conteudo do carrossel (mesmo template para 2-6)."""
    html = head() + f"""
<div class="canvas" style="background: #0a0a0a;">

  <!-- Foto realista de fundo -->
  <img src="data:image/png;base64,{foto_b64}"
       style="position:absolute; inset:0; width:100%; height:100%;
              object-fit: cover; object-position: center; opacity: 0.35;" />

  <div class="darken-top"></div>
  <div class="darken-bottom"></div>
  <div class="vignette"></div>

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

  <!-- Badge numero + label topo -->
  <div style="position:absolute; top:70px; left:60px; z-index:5;
              display:flex; align-items:center; gap:18px;">
    <div class="badge-num">{numero_str}</div>
    <div class="step-label">{label}</div>
  </div>

  <!-- Headline -->
  <div style="position:absolute; top:220px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 100px;">
      {headline_bebas}
    </h1>
  </div>

  <!-- Body text -->
  <div style="position:absolute; top:820px; left:60px; right:60px; z-index:5;">
    <p class="body-text" style="text-shadow: 0 2px 10px rgba(0,0,0,0.75);">
      {texto_body}
    </p>
  </div>

  <div class="page-num">{page_num}</div>
  <div class="arrow">→</div>
</div>
</body></html>
"""
    render(html, CARR / dest_name)


def render_carrossel():
    # SLIDE 1 - CAPA
    capa = head() + f"""
<div class="canvas" style="background: radial-gradient(ellipse at 70% 70%, #1a1810 0%, #000 60%);">

  <div class="dots-grid" style="right:60px; top:60px; width:120px; height:120px;"></div>
  <div class="dots-grid" style="left:60px; bottom:180px; width:100px; height:100px; opacity:0.35;"></div>

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

  <!-- Headline gigante -->
  <div style="position:absolute; top:220px; left:60px; right:60px; z-index:5;">
    <span class="dash"></span>
    <h1 class="h1 dark" style="font-size: 128px;">
      5 MUDANÇAS<br>
      NO SEU<br>
      QUARTO QUE<br>
      <span class="hl">MUDAM TUDO</span>.
    </h1>
  </div>

  <!-- Sub -->
  <p class="sub white" style="position:absolute; top:900px; left:60px; right:60px;
                              font-size:34px; z-index:5;">
    Qualquer um faz. Você começa <b>hoje à noite</b>.
  </p>

  <!-- Arrasta indicador -->
  <div style="position:absolute; bottom:170px; right:60px; z-index:5;
              display:flex; align-items:center; gap:14px;">
    <div style="font-family:'Inter'; font-weight:800; font-size:24px;
                color:#F6E600; letter-spacing:3px;">ARRASTA</div>
    <div style="width:56px; height:56px; border-radius:50%; background:#F6E600;
                display:flex; align-items:center; justify-content:center;
                color:#111; font-family:'Bebas Neue'; font-size:38px;">→</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>
</body></html>
"""
    render(capa, CARR / "slide_01_capa.png")

    # SLIDE 2 - Posição da cama
    carr_slide_conteudo(
        "01",
        "POSIÇÃO DA CAMA",
        "NUNCA DE<br>FRENTE<br>PRA <span class='hl'>PORTA</span>.",
        "Cama de frente pra porta é chamada <b>posição do caixão</b>. "
        "Rouba seu sono. Vira a cabeceira pra uma <b>parede sólida</b> "
        "e mantém a porta visível de lado.",
        C_S2,
        "01/07",
        "slide_02_posicao_cama.png",
    )

    # SLIDE 3 - Espelho refletindo cama
    carr_slide_conteudo(
        "02",
        "ESPELHO NO QUARTO",
        "NADA DE<br>ESPELHO<br><span class='hl'>REFLETINDO</span><br>A CAMA.",
        "Espelho de frente pra cama espalha sua energia a noite inteira. "
        "Você acorda cansado sem saber por quê. Se não dá pra tirar, "
        "<b>cobre com um pano</b> na hora de dormir.",
        C_S3,
        "02/07",
        "slide_03_espelho.png",
    )

    # SLIDE 4 - Cabeceira parede solida
    carr_slide_conteudo(
        "03",
        "CABECEIRA FIRME",
        "CABECEIRA<br>ENCOSTADA<br>EM PAREDE<br><span class='hl'>SÓLIDA</span>.",
        "Cabeceira em janela ou parede vazada = sono agitado. "
        "Você precisa sentir <b>apoio nas costas</b> pra descansar de verdade. "
        "Parede firme atrás da cabeça é regra.",
        C_S4,
        "03/07",
        "slide_04_cabeceira.png",
    )

    # SLIDE 5 - Debaixo da cama vazio
    carr_slide_conteudo(
        "04",
        "DEBAIXO DA CAMA",
        "DEBAIXO<br>DA CAMA<br>SEMPRE<br><span class='hl'>VAZIO</span>.",
        "Caixa, mala, sapato velho embaixo da cama trava a sua vida. "
        "O que fica ali <b>não deixa energia circular</b>. "
        "Tira tudo e sente a diferença em uma semana.",
        C_S5,
        "04/07",
        "slide_05_debaixo_cama.png",
    )

    # SLIDE 6 - Cores frias
    carr_slide_conteudo(
        "05",
        "CORES DO QUARTO",
        "CORES<br>SUAVES<br><span class='hl'>ACALMAM</span><br>O SONO.",
        "Vermelho demais no quarto agita. Azul, verde claro, bege e cinza "
        "trazem <b>paz</b>. Se você quer descansar de verdade, "
        "quarto é lugar de <b>tom suave</b>.",
        C_S6,
        "05/07",
        "slide_06_cores.png",
    )

    # SLIDE 7 - CTA
    cta = head() + f"""
<div class="canvas" style="background: radial-gradient(ellipse at 30% 40%, #1a1810 0%, #000 65%);">

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

  <!-- Pill -->
  <div style="position:absolute; top:80px; left:60px; z-index:5;">
    <div class="pill">RESUMO <span style="color:#F6E600">•</span> AGORA É COM VOCÊ</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;">
      HOJE À NOITE,<br>
      OLHA SEU<br>
      QUARTO E<br>
      <span class="hl">DECIDE</span>.
    </h1>
  </div>

  <!-- 5 numeros em linha -->
  <div style="position:absolute; top:780px; left:60px; right:60px; z-index:5;
              display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;">
    <div style="background: rgba(246,230,0,0.12); border: 2px solid #F6E600;
                padding: 16px 8px; border-radius: 10px; text-align:center;">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">01</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:16px; color:#FFF;
                  margin-top:8px; line-height:1.2;">Cama<br>bem posta</div>
    </div>
    <div style="background: rgba(246,230,0,0.12); border: 2px solid #F6E600;
                padding: 16px 8px; border-radius: 10px; text-align:center;">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">02</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:16px; color:#FFF;
                  margin-top:8px; line-height:1.2;">Espelho<br>coberto</div>
    </div>
    <div style="background: rgba(246,230,0,0.12); border: 2px solid #F6E600;
                padding: 16px 8px; border-radius: 10px; text-align:center;">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">03</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:16px; color:#FFF;
                  margin-top:8px; line-height:1.2;">Cabeceira<br>firme</div>
    </div>
    <div style="background: rgba(246,230,0,0.12); border: 2px solid #F6E600;
                padding: 16px 8px; border-radius: 10px; text-align:center;">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">04</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:16px; color:#FFF;
                  margin-top:8px; line-height:1.2;">Debaixo<br>vazio</div>
    </div>
    <div style="background: rgba(246,230,0,0.12); border: 2px solid #F6E600;
                padding: 16px 8px; border-radius: 10px; text-align:center;">
      <div style="font-family:'Bebas Neue'; font-size:44px; color:#F6E600; line-height:0.9;">05</div>
      <div style="font-family:'Inter'; font-weight:700; font-size:16px; color:#FFF;
                  margin-top:8px; line-height:1.2;">Cor<br>suave</div>
    </div>
  </div>

  <!-- Call to comment -->
  <div style="position:absolute; top:1010px; left:60px; right:60px; z-index:5;
              text-align:center;">
    <p style="font-family:'Inter'; font-weight:600; font-size:26px; color:#EEE;
              text-shadow: 0 2px 10px rgba(0,0,0,0.7);">
      Salva pra lembrar. Comenta <b>qual você vai mudar primeiro</b>.
    </p>
  </div>

  <div class="page-num">07/07</div>

  <div class="cta small">SEGUE @FRANCISCOBORRELLO</div>
</div>
</body></html>
"""
    render(cta, CARR / "slide_07_cta.png")


if __name__ == "__main__":
    print("\n=== ESTATICOS ===")
    render_e01()
    render_e02()
    render_e03()
    render_e04()
    render_e05()

    print("\n=== CARROSSEL ===")
    render_carrossel()

    print("\nTudo pronto.")
