#!/usr/bin/env python3
"""
Criativo 05 Cloud PhotoRF 2.0 - Feed 1:1 (1080x1080)
Mensagem: "AQUELE FORMANDO ESQUECIDO? ACHOU."
Angulo: POSITIVO / RESOLUCAO - pill verde "FORMANDO IDENTIFICADO", bracket
verde isolando UM formando no meio do grupo, linha fina verde ligando-o ao
conjunto. "A IA achou ele mesmo quando ninguem tinha visto."
Publico: FRIO - donos de empresa de fotografia escolar/eventos
Autor: Juliana (juliana-ops)
Foto base: gpt-image-2.5-sunburst (grupo de formandos + um "quase esquecido")

Chassi visual mantido dos pilotos 01/02/03/04:
  - preto #0a0a0c + verde neon #A6E22E
  - Barlow Condensed 900 + Montserrat + JetBrains Mono
  - selo PREPARE-SE PARA O ABSURDO!
  - logo wordmark grande (height 48px)
  - CTA verde no rodape + data 07.10.26

COMPOSICAO 05 (varia dos 4 anteriores):
  - 01/02/03 foram split texto esq / foto dir
  - 04 foi split foto esq / texto dir
  - 05 e HERO: foto ocupa quase 100% do stage; overlay dark gradient na ESQ
    permite texto respirar POR CIMA da foto, com destaque pro bracket verde
    isolando o formando "identificado" na direita.
"""

import base64
from pathlib import Path
from playwright.sync_api import sync_playwright

BASE = Path(__file__).resolve().parent
OUT = BASE / "05_formando_esquecido.png"

ASSET_FOTO = BASE / "foto_base_formando_esquecido_raw.png"
ASSET_LOGO = Path("/opt/mia/workspace/clientes/px3lab/landing_lancamento_novo/preview-lp/assets/logo-wordmark.png")


def b64_img(path: Path) -> str:
    data = path.read_bytes()
    ext = path.suffix.lstrip(".").lower()
    if ext == "jpg":
        ext = "jpeg"
    return f"data:image/{ext};base64," + base64.b64encode(data).decode()


FOTO_B64 = b64_img(ASSET_FOTO)
LOGO_B64 = b64_img(ASSET_LOGO)


HTML = 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=Barlow+Condensed:wght@700;800;900&family=Montserrat:wght@600;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<style>
  * {{ box-sizing: border-box; margin: 0; padding: 0; }}
  html, body {{ width: 1080px; height: 1080px; overflow: hidden; background: #0a0a0c; font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; }}

  .canvas {{
    position: relative;
    width: 1080px;
    height: 1080px;
    background: #0a0a0c;
    overflow: hidden;
  }}

  /* ===================== HERO FOTO ===================== */
  .hero-photo {{
    position: absolute;
    top: 170px; bottom: 220px; left: 60px; right: 60px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(166,226,46,0.35);
  }}
  .hero-photo img.foto {{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 55% 42%;
    filter: contrast(1.05) saturate(1.05) brightness(0.92);
  }}
  /* overlay dark gradient na ESQUERDA pro texto respirar */
  .hero-photo::before {{
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg,
        rgba(10,10,12,0.95) 0%,
        rgba(10,10,12,0.90) 38%,
        rgba(10,10,12,0.55) 58%,
        rgba(10,10,12,0.0) 76%),
      radial-gradient(circle at 30% 50%, rgba(166,226,46,0.08) 0%, rgba(10,10,12,0) 55%);
    z-index: 2;
  }}
  /* gradiente inferior leve pra base nao ficar lavada */
  .hero-photo::after {{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,12,0) 55%, rgba(10,10,12,0.75) 100%);
    z-index: 2;
  }}

  /* grid tech sutil POR CIMA da foto, apenas no lado esquerdo */
  .grid-overlay {{
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(166,226,46,0.065) 1px, transparent 1px),
      linear-gradient(90deg, rgba(166,226,46,0.065) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 70%);
    z-index: 3;
    pointer-events: none;
  }}

  /* ===================== HEADER ===================== */
  .header {{
    position: absolute;
    top: 56px; left: 60px; right: 60px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 10;
  }}
  .selo-campanha {{
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.14em;
    color: #ffffff;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
  }}
  .selo-campanha .absurdo {{ color: #A6E22E; }}
  .selo-campanha .bar {{
    display: inline-block;
    width: 4px; height: 22px;
    background: #A6E22E;
    transform: skewX(-18deg);
    margin-right: 4px;
  }}
  .wordmark {{ height: 48px; opacity: 0.95; }}

  /* ===================== TAG canto superior esquerdo da foto ===================== */
  .scan-tag {{
    position: absolute;
    top: 24px; left: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    color: #A6E22E;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.72);
    padding: 6px 10px;
    border-radius: 4px;
    z-index: 8;
    border: 1px solid rgba(166,226,46,0.3);
  }}

  /* ===================== BRACKET isolando o formando identificado ===================== */
  /* bracket flutuante sobre a direita da foto - ancora o olhar no "achado" */
  .target {{
    position: absolute;
    top: 34%; right: 14%;
    width: 210px; height: 260px;
    z-index: 7;
    pointer-events: none;
    filter: drop-shadow(0 0 24px rgba(166,226,46,0.35));
  }}
  .target .b {{
    position: absolute;
    width: 46px; height: 46px;
    border: 5px solid #A6E22E;
    filter: drop-shadow(0 0 10px rgba(166,226,46,0.75));
  }}
  .target .b.tl {{ top: 0; left: 0; border-right: none; border-bottom: none; }}
  .target .b.tr {{ top: 0; right: 0; border-left: none; border-bottom: none; }}
  .target .b.bl {{ bottom: 0; left: 0; border-right: none; border-top: none; }}
  .target .b.br {{ bottom: 0; right: 0; border-left: none; border-top: none; }}

  /* pulso de scan dentro do bracket */
  .target .pulse {{
    position: absolute;
    left: 12px; right: 12px;
    top: 52%;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(166,226,46,0) 0%,
      rgba(166,226,46,0.95) 50%,
      rgba(166,226,46,0) 100%);
    box-shadow: 0 0 12px rgba(166,226,46,0.8);
  }}

  /* ticks nos cantos do bracket (mais tech) */
  .target .b::after {{
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #A6E22E;
    box-shadow: 0 0 10px rgba(166,226,46,0.85);
  }}
  .target .b.tl::after {{ top: -6px; left: -6px; }}
  .target .b.tr::after {{ top: -6px; right: -6px; }}
  .target .b.bl::after {{ bottom: -6px; left: -6px; }}
  .target .b.br::after {{ bottom: -6px; right: -6px; }}

  /* linha fina ligando o alvo ao resto do grupo (gráfico tech) */
  .connector {{
    position: absolute;
    top: 46%; right: 32%;
    width: 150px; height: 2px;
    background: linear-gradient(90deg, rgba(166,226,46,0.95), rgba(166,226,46,0));
    box-shadow: 0 0 10px rgba(166,226,46,0.6);
    z-index: 6;
    transform: rotate(-4deg);
    transform-origin: right center;
  }}
  .connector::before {{
    content: "";
    position: absolute;
    left: -5px; top: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #A6E22E;
    box-shadow: 0 0 14px rgba(166,226,46,0.95);
  }}

  /* pill FORMANDO 047 - IDENTIFICADO ancorada abaixo do bracket */
  .pill-id {{
    position: absolute;
    top: calc(34% + 272px);
    right: 10%;
    z-index: 8;
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(10,10,12,0.92);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(166,226,46,0.65);
    border-radius: 999px;
    padding: 10px 18px 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    color: #A6E22E;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 16px rgba(166,226,46,0.28);
    white-space: nowrap;
  }}
  .pill-id .dot {{
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #A6E22E;
    box-shadow: 0 0 10px rgba(166,226,46,0.85);
  }}
  .pill-id .sep {{ color: #4e5a2b; }}

  /* ===================== COPY (sobreposto ao hero, lado ESQUERDO) ===================== */
  .copy {{
    position: absolute;
    top: 215px; left: 100px;
    width: 560px;
    z-index: 9;
    display: flex; flex-direction: column;
  }}
  .kicker {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.18em;
    color: #A6E22E;
    margin-bottom: 20px;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
  }}
  .kicker::before {{
    content: "";
    display: inline-block; width: 36px; height: 2px; background: #A6E22E;
  }}

  .headline {{
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 108px;
    line-height: 0.86;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 32px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.95);
  }}
  .headline .achou {{
    color: #A6E22E;
    display: inline-block;
    position: relative;
  }}
  .headline .q {{ color: #A6E22E; }}
  .headline .p {{ color: #A6E22E; }}

  .sub {{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.45;
    color: #ededed;
    max-width: 520px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.95);
  }}
  .sub strong {{ color: #ffffff; font-weight: 800; }}
  .sub .verde {{ color: #A6E22E; font-weight: 800; }}

  /* ===================== RODAPE ===================== */
  .footer {{
    position: absolute;
    left: 60px; right: 60px; bottom: 60px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 10;
  }}
  .cta {{
    background: #A6E22E;
    color: #0a0a0c;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 21px;
    letter-spacing: 0.04em;
    padding: 20px 32px;
    border-radius: 10px;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 12px;
    box-shadow: 0 10px 30px rgba(166,226,46,0.3);
    white-space: nowrap;
  }}
  .cta .arrow {{ font-size: 24px; line-height: 1; }}

  .meta-line {{
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  }}
  .meta-line .label {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 12px;
    color: #8a8a90;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }}
  .meta-line .date {{
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 44px;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1;
  }}
  .meta-line .date .accent {{ color: #A6E22E; }}
  .meta-line .bar2 {{
    display: inline-block;
    width: 3px; height: 36px; background: #A6E22E;
    transform: skewX(-14deg);
    margin-right: 10px;
    vertical-align: middle;
  }}
</style>
</head>
<body>
<div class="canvas">

  <!-- HERO FOTO (ocupa todo o stage, overlay dark gradient na esq) -->
  <div class="hero-photo">
    <img class="foto" src="{FOTO_B64}" alt="">
    <div class="grid-overlay"></div>
    <div class="scan-tag">SCAN &middot; DEEP &middot; OK</div>

    <!-- conector tech ligando grupo -> alvo -->
    <div class="connector"></div>

    <!-- bracket isolando o formando identificado -->
    <div class="target">
      <div class="b tl"></div>
      <div class="b tr"></div>
      <div class="b bl"></div>
      <div class="b br"></div>
      <div class="pulse"></div>
    </div>

    <!-- pill com ID -->
    <div class="pill-id">
      <span class="dot"></span>FORMANDO 047 <span class="sep">&middot;</span> IDENTIFICADO
    </div>
  </div>

  <!-- HEADER -->
  <div class="header">
    <div class="selo-campanha">
      <span class="bar"></span>
      PREPARE-SE PARA O <span class="absurdo">ABSURDO!</span>
    </div>
    <img class="wordmark" src="{LOGO_B64}" alt="Cloud PhotoRF 2.0">
  </div>

  <!-- COPY sobreposto (esquerda) -->
  <div class="copy">
    <div class="kicker">Reconhecimento autom&aacute;tico</div>
    <h1 class="headline">
      AQUELE FORMANDO<br>
      ESQUECIDO<span class="q">?</span><br>
      <span class="achou">ACHOU<span class="p">.</span></span>
    </h1>
    <p class="sub">
      O <strong>Cloud PhotoRF 2.0</strong> busca sozinho poss&iacute;veis formandos
      <strong>n&atilde;o identificados</strong> e devolve pra voc&ecirc; revisar.<br>
      <span class="verde">Zero cliente ficando pra tr&aacute;s. Zero venda perdida.</span>
    </p>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <div class="cta">
      QUERO CONHECER O SOFTWARE
      <span class="arrow">&rarr;</span>
    </div>
    <div class="meta-line">
      <span class="label">Lan&ccedil;amento</span>
      <span class="date"><span class="bar2"></span>07<span class="accent">.</span>10<span class="accent">.</span>26</span>
    </div>
  </div>
</div>
</body>
</html>
"""


def render():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": 1080, "height": 1080}, device_scale_factor=2)
        page.set_content(HTML, wait_until="networkidle")
        page.wait_for_timeout(400)
        page.screenshot(path=str(OUT), clip={"x": 0, "y": 0, "width": 1080, "height": 1080}, omit_background=False)
        browser.close()
    from PIL import Image
    img = Image.open(OUT)
    if img.size != (1080, 1080):
        img = img.resize((1080, 1080), Image.LANCZOS)
        img.save(OUT, "PNG", optimize=True)
    print(f"[OK] Gerado: {OUT} ({OUT.stat().st_size // 1024} KB, {img.size})")
    return OUT


if __name__ == "__main__":
    render()
