"""Gera os 6 slides do C03 como HTML e tira screenshots via Playwright."""
import os
from pathlib import Path
from playwright.sync_api import sync_playwright

OUT = Path("/opt/mia/workspace/clientes/px3lab/carrossel_c03/html_slides")
DEPO = "/opt/mia/workspace/clientes/px3lab/depoimento_militar.jpg"

BG = "#1C1C1E"
YELLOW = "#FFD60A"
WHITE = "#FFFFFF"
GRAY = "#8E8E93"

BASE_CSS = f"""
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  body {{
    width:1080px; height:1350px;
    background:{BG};
    font-family:'Inter',sans-serif;
    color:{WHITE};
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:72px 80px;
  }}
  .badge {{
    font-size:13px; font-weight:700; letter-spacing:2.5px;
    color:{YELLOW}; text-transform:uppercase; margin-bottom:40px;
  }}
  .slide-num {{
    position:absolute; bottom:60px; right:80px;
    font-size:18px; font-weight:900; color:{YELLOW}; letter-spacing:1px;
  }}
  .brand {{
    position:absolute; bottom:60px; left:80px;
    font-size:14px; font-weight:700; color:{GRAY}; letter-spacing:3px;
  }}
  em {{ color:{YELLOW}; font-style:normal; }}
"""

SLIDES = [
    ("s1", f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
{BASE_CSS}
.quote-mark {{ font-family:'Playfair Display',serif; font-size:140px; color:{YELLOW}; line-height:0.6; margin-bottom:16px; opacity:0.3; }}
.headline {{ font-family:'Playfair Display',serif; font-size:58px; font-weight:700; font-style:italic; color:{YELLOW}; line-height:1.15; margin-bottom:48px; }}
.sub {{ font-size:26px; font-weight:500; color:{WHITE}; line-height:1.5; }}
.accent-line {{ width:60px; height:4px; background:{YELLOW}; margin-bottom:48px; }}
</style></head>
<body>
  <div class="badge">Cloud PhotoRF &nbsp;·&nbsp; Prova Real</div>
  <div class="accent-line"></div>
  <div class="quote-mark">"</div>
  <div class="headline">Reconhecimento facial<br>falha em militar,<br>criança com chapéu<br>e foto de costas."</div>
  <div class="sub">A gente ouve isso.<br>Então testamos os casos<br>mais difíceis do mundo real.</div>
  <div class="brand">PX3LAB</div>
  <div class="slide-num">01 / 06</div>
</body></html>"""),

    ("s2", f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
{BASE_CSS}
.intro {{ font-size:22px; color:{GRAY}; font-weight:500; margin-bottom:32px; line-height:1.5; }}
.quote-box {{
  border-left:5px solid {YELLOW}; padding:32px 40px;
  margin:0 0 48px; background:rgba(255,208,10,0.06);
  border-radius:0 12px 12px 0;
}}
.quote-box p {{ font-size:36px; font-weight:700; font-style:italic; line-height:1.3; }}
.body-text {{ font-size:22px; line-height:1.65; color:{WHITE}; }}
.body-text + .body-text {{ margin-top:24px; }}
</style></head>
<body>
  <div class="badge">Cloud PhotoRF &nbsp;·&nbsp; A Dúvida</div>
  <div class="intro">A maior dúvida de quem ainda não testou:</div>
  <div class="quote-box">
    <p>"E se o sistema errar e mandar<br>a foto pro aluno errado?"</p>
  </div>
  <div class="body-text">Faz sentido ter essa dúvida.<br>Acontece muito em soluções baratas.</div>
  <div class="body-text" style="margin-top:24px">E no mercado de formatura,<br>erro é retrabalho — e <em>retrabalho é prejuízo</em>.</div>
  <div class="brand">PX3LAB</div>
  <div class="slide-num">02 / 06</div>
</body></html>"""),

    ("s3", f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
{BASE_CSS}
.intro {{ font-size:28px; font-weight:700; line-height:1.35; margin-bottom:40px; }}
.list {{ list-style:none; margin-bottom:40px; }}
.list li {{
  font-size:21px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:16px;
}}
.list li::before {{ content:"→"; color:{YELLOW}; font-weight:900; font-size:20px; flex-shrink:0; }}
.stat {{ background:rgba(255,208,10,0.1); border:1px solid rgba(255,208,10,0.3); border-radius:12px; padding:28px 36px; }}
.stat-num {{ font-size:52px; font-weight:900; color:{YELLOW}; line-height:1; }}
.stat-label {{ font-size:16px; color:{GRAY}; margin-top:6px; }}
</style></head>
<body>
  <div class="badge">Cloud PhotoRF &nbsp;·&nbsp; Casos Difíceis</div>
  <div class="intro">Construído justamente<br>para os casos mais difíceis.</div>
  <ul class="list">
    <li>Militar com quepe e farda</li>
    <li>Criança pequena em movimento</li>
    <li>Foto de costas ou de perfil</li>
    <li>Óculos, máscara, má iluminação</li>
  </ul>
  <div class="stat">
    <div class="stat-num">99%+</div>
    <div class="stat-label">de assertividade em eventos reais — não em laboratório.</div>
  </div>
  <div class="brand">PX3LAB</div>
  <div class="slide-num">03 / 06</div>
</body></html>"""),

    ("s4", f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
{BASE_CSS}
.depo-wrap {{
  display:flex; gap:24px; align-items:flex-start; margin-bottom:36px;
}}
.depo-img {{
  width:160px; height:200px; object-fit:cover; border-radius:12px;
  border:2px solid rgba(255,208,10,0.3); flex-shrink:0;
}}
.bubble {{
  background:#1e3a2f; border-radius:0 16px 16px 16px;
  padding:20px 24px; flex:1;
}}
.bubble p {{ font-size:19px; line-height:1.5; font-style:italic; }}
.bubble-from {{ font-size:13px; color:{YELLOW}; margin-top:10px; font-weight:600; letter-spacing:1px; }}
.body-text {{ font-size:22px; line-height:1.6; color:{WHITE}; margin-bottom:24px; }}
.highlight {{ background:{YELLOW}; color:{BG}; font-weight:900; font-size:22px; padding:16px 24px; border-radius:10px; display:inline-block; }}
</style></head>
<body>
  <div class="badge">Cloud PhotoRF &nbsp;·&nbsp; Caso Real</div>
  <div class="depo-wrap">
    <img class="depo-img" src="{DEPO}">
    <div class="bubble">
      <p>"Acredite se quiser, o programa acertou essa foto kkkkkkk"</p>
      <div class="bubble-from">Vinícius · Bekas Formaturas</div>
    </div>
  </div>
  <div class="body-text">O Vinícius fotografava colações militares há anos.<br>O gargalo da empresa: separar fotos de soldados<br>com quepe, farda, máscara e tudo mais.</div>
  <div class="body-text">Com o Cloud PhotoRF, <em>esse problema acabou.</em></div>
  <div class="highlight">Assertividade acima de 99% mesmo nos casos extremos.</div>
  <div class="brand">PX3LAB</div>
  <div class="slide-num">04 / 06</div>
</body></html>"""),

    ("s5", f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
{BASE_CSS}
.question {{ font-family:'Playfair Display',serif; font-size:64px; font-weight:700; font-style:italic; color:{WHITE}; line-height:1.1; margin-bottom:48px; }}
.question em {{ color:{YELLOW}; }}
.body-text {{ font-size:24px; line-height:1.65; margin-bottom:28px; }}
.accent-box {{
  border-left:4px solid {YELLOW}; padding:24px 32px;
  background:rgba(255,208,10,0.06); border-radius:0 10px 10px 0;
  font-size:24px; font-weight:700; line-height:1.4;
}}
</style></head>
<body>
  <div class="badge">Cloud PhotoRF &nbsp;·&nbsp; Transparência</div>
  <div class="question">E quando o <em>1%</em><br>acontece?</div>
  <div class="body-text">O sistema sinaliza as fotos de<br>baixa confiança <em>separadamente</em>.</div>
  <div class="body-text">Você revisa só o que precisa —<br>não o arquivo inteiro.</div>
  <div class="accent-box">É a revisão mais rápida<br>que você já fez.</div>
  <div class="brand">PX3LAB</div>
  <div class="slide-num">05 / 06</div>
</body></html>"""),

    ("s6", f"""<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
{BASE_CSS}
body {{ justify-content:center; text-align:center; align-items:center; }}
.headline {{ font-family:'Playfair Display',serif; font-size:66px; font-weight:700; line-height:1.1; margin-bottom:32px; }}
.sub {{ font-size:26px; line-height:1.6; color:{GRAY}; margin-bottom:48px; }}
.url-box {{
  background:{YELLOW}; color:{BG}; font-weight:900; font-size:26px;
  padding:22px 48px; border-radius:50px; margin-bottom:28px; display:inline-block;
}}
.cta-sub {{ font-size:20px; color:{GRAY}; line-height:1.6; }}
</style></head>
<body>
  <div class="badge" style="margin-bottom:48px">Cloud PhotoRF &nbsp;·&nbsp; Teste Grátis</div>
  <div class="headline">Não acredite<br>na palavra da gente.</div>
  <div class="sub">Teste com suas próprias fotos<br>— é grátis.</div>
  <div class="url-box">px3lab.com.br/cloud-photorf</div>
  <div class="cta-sub">Link na bio.<br>Sobe um lote e veja o acerto<br>com seus olhos.</div>
  <div class="brand">PX3LAB</div>
  <div class="slide-num">06 / 06</div>
</body></html>"""),
]

def generate_html_slides():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        for name, html in SLIDES:
            page = browser.new_page(viewport={"width": 1080, "height": 1350})
            page.set_content(html)
            page.wait_for_timeout(1500)
            path = str(OUT / f"{name}.png")
            page.screenshot(path=path)
            size = os.path.getsize(path) // 1024
            print(f"✓ {name}: {size}KB")
        browser.close()

if __name__ == "__main__":
    generate_html_slides()
