#!/usr/bin/env python3
"""Carrossel Post 1 - v2 com acentos e fotos de impacto."""
import os, requests, base64
from playwright.sync_api import sync_playwright

PASTA = "/opt/mia/workspace/clientes/climb_digital_instagram/carrossel_post1"

FOTOS = {
    "foto_capa.jpg":   "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=1080&h=1080&fit=crop&q=85",
    "foto_slide4.jpg": "https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1080&h=1080&fit=crop&q=85",
}

print("Baixando imagens...")
for nome, url in FOTOS.items():
    destino = f"{PASTA}/{nome}"
    if not os.path.exists(destino):
        r = requests.get(url, timeout=30)
        with open(destino, "wb") as f:
            f.write(r.content)
        print(f"  OK: {nome}")
    else:
        print(f"  Já existe: {nome}")

def b64(path):
    with open(path, "rb") as f:
        return "data:image/jpeg;base64," + base64.b64encode(f.read()).decode()

FOTO_CAPA = b64(f"{PASTA}/foto_capa.jpg")
FOTO_S4   = b64(f"{PASTA}/foto_slide4.jpg")

CSS_BASE = """
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { width: 1080px; height: 1080px; overflow: hidden;
       font-family: 'Montserrat', sans-serif; background: #0F2A44; }
.slide { width: 1080px; height: 1080px; position: relative; overflow: hidden;
         display: flex; flex-direction: column; justify-content: center;
         align-items: center; padding: 80px; }
.slide::before { content:''; position:absolute; top:-200px; right:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(74,158,255,0.07) 0%, transparent 70%); pointer-events:none; }
.slide::after  { content:''; position:absolute; bottom:-200px; left:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,179,36,0.06) 0%, transparent 70%); pointer-events:none; }
.num-tag { position:absolute; top:48px; right:56px; font-size:13px; font-weight:600;
           color:rgba(255,255,255,0.28); letter-spacing:3px; z-index:10; }
.handle  { position:absolute; bottom:48px; left:56px; font-size:13px; font-weight:600;
           color:rgba(255,255,255,0.22); letter-spacing:1px; z-index:10; }
.borda-esq { position:absolute; top:0; left:0; width:6px; height:130px;
             background:linear-gradient(180deg,#E6B324,transparent); z-index:10; }
.borda-dir { position:absolute; bottom:0; right:0; width:6px; height:130px;
             background:linear-gradient(0deg,#4A9EFF,transparent); z-index:10; }
.linha-ouro { width:60px; height:4px; border-radius:2px; margin-bottom:32px;
              background:linear-gradient(90deg,#E6B324,#F0CA5E); }
.linha-azul { width:60px; height:4px; border-radius:2px; margin-bottom:32px;
              background:linear-gradient(90deg,#4A9EFF,#7DC3FF); }
.tag  { font-size:12px; font-weight:700; letter-spacing:4px; color:#4A9EFF;
        text-transform:uppercase; margin-bottom:24px; }
.titulo { font-size:44px; font-weight:800; line-height:1.15; color:#FFF;
          margin-bottom:36px; max-width:860px; letter-spacing:-0.5px; }
.corpo  { font-size:22px; font-weight:500; line-height:1.75;
          color:rgba(255,255,255,0.78); max-width:860px; }
.corpo strong { color:#FFF; font-weight:700; }
.ouro { color:#E6B324; font-weight:700; }
.inner { width:100%; height:100%; position:relative; z-index:2;
         display:flex; flex-direction:column; justify-content:center; }
.inner-center { align-items:center; text-align:center; }
ul.lista { list-style:none; margin-top:8px; }
ul.lista li { font-size:21px; font-weight:500; line-height:1.5;
  color:rgba(255,255,255,0.78); padding:14px 0 14px 36px; position:relative;
  border-bottom:1px solid rgba(255,255,255,0.07); }
ul.lista li:last-child { border-bottom:none; }
ul.lista li::before { content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:10px; height:10px;
  background:#E6B324; border-radius:50%; }
ol.numerada { list-style:none; margin-top:8px; width:100%; }
ol.numerada li { font-size:21px; font-weight:500; line-height:1.4;
  color:rgba(255,255,255,0.85); padding:16px 0 16px 56px; position:relative;
  border-bottom:1px solid rgba(255,255,255,0.07); }
ol.numerada li:last-child { border-bottom:none; }
ol.numerada li .n { position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:36px; height:36px; background:linear-gradient(135deg,#E6B324,#F0CA5E);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; color:#0F2A44; }
</style>
"""

SLIDES = {
    "slide_01.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
<style>
.bg-foto {{ position:absolute; inset:0; background:url('{FOTO_CAPA}') center/cover no-repeat; z-index:0; }}
.overlay {{ position:absolute; inset:0; background:linear-gradient(160deg,rgba(10,25,50,0.88) 40%,rgba(15,42,68,0.70) 100%); z-index:1; }}
.eyebrow {{ font-size:13px; font-weight:700; letter-spacing:4px; color:#E6B324;
           text-transform:uppercase; margin-bottom:40px; }}
.main-title {{ font-size:64px; font-weight:900; line-height:1.1; color:#FFF;
              letter-spacing:-1px; max-width:880px; }}
.main-title .destaque {{ color:#E6B324; }}
.sub {{ font-size:20px; font-weight:500; color:rgba(255,255,255,0.5);
        margin-top:48px; letter-spacing:1px; }}
.seta {{ margin-top:52px; width:2px; height:48px;
         background:linear-gradient(180deg,#E6B324,transparent); border-radius:2px; }}
</style>
</head><body>
<div class="slide" style="background:#0a1932;">
  <div class="bg-foto"></div>
  <div class="overlay"></div>
  <span class="borda-esq" style="z-index:10"></span>
  <span class="borda-dir" style="z-index:10"></span>
  <span class="num-tag" style="z-index:10">01 / 07</span>
  <span class="handle" style="z-index:10">@oremoraes.ia</span>
  <div class="inner inner-center" style="z-index:2">
    <p class="eyebrow">Renato Moraes · Estratégia de Negócio</p>
    <h1 class="main-title">
      Por que você trabalha<br>
      <span class="destaque">12h por dia</span><br>
      e o negócio não cresce?
    </h1>
    <p class="sub">Continue lendo →</p>
    <div class="seta"></div>
  </div>
</div>
</body></html>""",

    "slide_02.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
</head><body>
<div class="slide">
  <span class="borda-esq"></span><span class="borda-dir"></span>
  <span class="num-tag">02 / 07</span><span class="handle">@oremoraes.ia</span>
  <div class="inner">
    <p class="tag">O diagnóstico</p>
    <div class="linha-ouro"></div>
    <h2 class="titulo">O problema não é esforço.</h2>
    <p class="corpo">
      Você já provou que sabe trabalhar duro.<br><br>
      O problema é que <strong>esforço sem estrutura</strong> gera movimento —
      não crescimento.
    </p>
  </div>
</div>
</body></html>""",

    "slide_03.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
</head><body>
<div class="slide">
  <span class="borda-esq"></span><span class="borda-dir"></span>
  <span class="num-tag">03 / 07</span><span class="handle">@oremoraes.ia</span>
  <div class="inner">
    <p class="tag">O ciclo invisível</p>
    <div class="linha-ouro"></div>
    <h2 class="titulo">Você está preso<br>num ciclo invisível:</h2>
    <ul class="lista">
      <li>Mais horas não resolvem gargalos estruturais</li>
      <li>Mais tráfego não resolve processo de vendas quebrado</li>
      <li>Mais postagens não resolvem falta de posicionamento</li>
    </ul>
    <p class="corpo" style="margin-top:28px;font-size:19px;color:rgba(255,255,255,0.5);">
      Trabalhar mais nesse cenário é como <span class="ouro">acelerar na marcha errada.</span>
    </p>
  </div>
</div>
</body></html>""",

    "slide_04.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
<style>
.foto-lateral {{ position:absolute; right:0; top:0; width:420px; height:1080px;
                background:url('{FOTO_S4}') center/cover no-repeat; z-index:0; }}
.foto-overlay {{ position:absolute; right:0; top:0; width:500px; height:1080px;
                background:linear-gradient(90deg,#0F2A44 0%,rgba(15,42,68,0.5) 60%,rgba(15,42,68,0) 100%);
                z-index:1; }}
.conteudo {{ position:relative; z-index:2; max-width:600px; }}
</style>
</head><body>
<div class="slide" style="align-items:flex-start;">
  <div class="foto-lateral"></div>
  <div class="foto-overlay"></div>
  <span class="borda-esq" style="z-index:10"></span>
  <span class="borda-dir" style="z-index:10"></span>
  <span class="num-tag" style="z-index:10">04 / 07</span>
  <span class="handle" style="z-index:10">@oremoraes.ia</span>
  <div class="inner" style="z-index:3">
    <div class="conteudo">
      <p class="tag">A raiz do problema</p>
      <div class="linha-ouro"></div>
      <h2 class="titulo">O que o negócio precisa<br>não é de mais você.</h2>
      <p class="corpo">
        Precisa de um <strong>sistema que funcione</strong> sem depender
        exclusivamente da sua presença.<br><br>
        Quando você é o centro de tudo, o negócio tem o tamanho do seu tempo.<br><br>
        E tempo é o recurso que você <span class="ouro">menos tem.</span>
      </p>
    </div>
  </div>
</div>
</body></html>""",

    "slide_05.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
</head><body>
<div class="slide">
  <span class="borda-esq"></span><span class="borda-dir"></span>
  <span class="num-tag">05 / 07</span><span class="handle">@oremoraes.ia</span>
  <div class="inner">
    <p class="tag">A fórmula</p>
    <div class="linha-ouro"></div>
    <h2 class="titulo">A empresa que cresce<br>tem 3 coisas claras:</h2>
    <ol class="numerada">
      <li><span class="n">1</span>Processo de aquisição previsível</li>
      <li><span class="n">2</span>Atendimento e qualificação automatizados</li>
      <li><span class="n">3</span>Gestão com dados, não com intuição</li>
    </ol>
    <p class="corpo" style="margin-top:28px;font-size:18px;color:rgba(255,255,255,0.5);">
      Sem isso, crescimento é acidente.
      <span class="ouro">Com isso, crescimento é consequência.</span>
    </p>
  </div>
</div>
</body></html>""",

    "slide_06.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
<style>
.blockquote {{ font-size:27px; font-weight:700; line-height:1.55; color:#FFF;
              background:rgba(74,158,255,0.1); border-left:5px solid #4A9EFF;
              padding:28px 36px; border-radius:0 12px 12px 0;
              margin-top:8px; max-width:860px; }}
</style>
</head><body>
<div class="slide">
  <span class="borda-esq"></span><span class="borda-dir"></span>
  <span class="num-tag">06 / 07</span><span class="handle">@oremoraes.ia</span>
  <div class="inner">
    <p class="tag">A virada de chave</p>
    <div class="linha-azul"></div>
    <h2 class="titulo">A pergunta certa não é<br>"como trabalho mais?"</h2>
    <div class="blockquote">
      "O que precisa ser estruturado para o negócio
      <span class="ouro">crescer sem mim?</span>"
    </div>
    <p class="corpo" style="margin-top:36px;font-size:20px;">
      Essa pergunta muda tudo.
    </p>
  </div>
</div>
</body></html>""",

    "slide_07.png": f"""<!DOCTYPE html><html><head><meta charset="UTF-8">{CSS_BASE}
<style>
.cta-tag {{ font-size:12px; font-weight:700; letter-spacing:4px; color:#4A9EFF;
           text-transform:uppercase; margin-bottom:32px; }}
.cta-l1 {{ font-size:50px; font-weight:800; line-height:1.1; color:#FFF; }}
.cta-l2 {{ font-size:50px; font-weight:800; line-height:1.1; color:#E6B324; margin-bottom:44px; }}
.divisor {{ width:80px; height:2px; background:rgba(255,255,255,0.13);
           margin:0 auto 44px; }}
.cta-body {{ font-size:20px; font-weight:500; line-height:1.75;
            color:rgba(255,255,255,0.75); max-width:760px; margin-bottom:16px; }}
.pill {{ display:inline-block; background:linear-gradient(135deg,#E6B324,#F0CA5E);
        color:#0F2A44; font-size:15px; font-weight:800; letter-spacing:1px;
        padding:14px 40px; border-radius:50px; margin:28px 0 16px; }}
.perfil {{ font-size:36px; font-weight:900; color:#4A9EFF;
          letter-spacing:-0.5px; margin-top:36px; }}
.tagline {{ font-size:14px; font-weight:600; color:rgba(255,255,255,0.38);
           letter-spacing:2px; text-transform:uppercase; margin-top:20px; }}
</style>
</head><body>
<div class="slide">
  <span class="borda-esq"></span><span class="borda-dir"></span>
  <span class="num-tag">07 / 07</span>
  <div class="inner inner-center">
    <p class="cta-tag">Próximo passo</p>
    <h2 class="cta-l1">Você sabe trabalhar.</h2>
    <h2 class="cta-l2">Agora precisa de estrutura.</h2>
    <div class="divisor"></div>
    <p class="cta-body">
      Se você quer entender onde está o gargalo real do seu negócio,
      me chama no direct. Faço uma análise gratuita de 30 minutos.<br><br>
      <strong style="color:#FFF;">Sem enrolação. Sem pitch de venda. Só clareza.</strong>
    </p>
    <div class="pill">ANÁLISE GRATUITA — 30 MIN</div>
    <p class="perfil">@oremoraes.ia</p>
    <p class="tagline">Crescimento não é sorte. É estrutura.</p>
  </div>
</div>
</body></html>""",
}


def renderizar(html: str, destino: str):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": 1080, "height": 1080})
        page.set_content(html, wait_until="networkidle")
        page.screenshot(path=destino, clip={"x": 0, "y": 0, "width": 1080, "height": 1080})
        browser.close()


print("Renderizando slides...")
for nome, html in SLIDES.items():
    destino = f"{PASTA}/{nome}"
    renderizar(html, destino)
    print(f"  OK: {nome}")

print("\nTodos os slides gerados!")