#!/usr/bin/env python3
"""Piloto 03 Cloud PhotoRF 2.0 (1080x1080) — Face-Detection estilo referência landing.

Diferencas vs piloto 02:
- Cena com SO 3 pessoas (aluno + pai + mae), fundo preto
- Face-detection no estilo EXATO da landing oferta.px3lab.com.br:
  * 4 cantos luminosos verdes com glow (nao borda inteira)
  * Overlay scan grid vertical sutil dentro de cada rosto
  * Badge MATCH XX.X% em pill verde abaixo-centro de cada caixa
  * Badge "FORMANDO DETECTADO" no canto inferior esquerdo da imagem (pill outline verde)
"""
import base64
import sys
from pathlib import Path
from playwright.sync_api import sync_playwright

BASE = Path("/opt/mia/workspace/clientes/px3lab/lancamento_photorf2/criativos_oferta")
HERO = BASE / "hero_familia_formatura_03.png"
LOGO = Path("/opt/mia/workspace/clientes/px3lab/cloudphotorf2_conafor/logos/cloudphotorf-logo-grande.png")
VERSION = sys.argv[1] if len(sys.argv) > 1 else "v1"
OUT = BASE / f"piloto_03_1x1_{VERSION}.png"

hero_b64 = base64.b64encode(HERO.read_bytes()).decode()
hero_src = f"data:image/png;base64,{hero_b64}"
logo_b64 = base64.b64encode(LOGO.read_bytes()).decode()
logo_src = f"data:image/png;base64,{logo_b64}"

# Hero wrap: 1080x540, object-fit cover, object-position center 30%
# Imagem original 1024x1024 -> escala 1.055 -> 1080x1081
# object-position Y=30%: offset_y = (1081-540)*0.30 = ~162 cortados no topo
# viewport_y = (orig_y * 1.055) - 162
# viewport_x = orig_x * 1.055 + ((1080-1080)/2) = orig_x * 1.055
#
# Rostos observados na hero original (1024x1024):
#   PAI (esq):     orig x 110-310, y 200-430 -> vp x 116-327, y 49-291
#   FORMANDA(ctr): orig x 370-640, y 180-430 -> vp x 390-675, y 28-291
#   MAE (dir):     orig x 670-900, y 210-440 -> vp x 707-949, y 60-302
#
# Ajuste manual pos-visualizacao:
FACES = [
    # (left, top, w, h, match_label, match_x_offset)
    # formanda centro - caixa maior pq inclui capelo
    {"l": 395, "t": 35, "w": 275, "h": 275, "match": "MATCH 98.7%", "primary": True},
    # pai esquerda
    {"l": 108, "t": 65, "w": 220, "h": 240, "match": "MATCH 94.2%", "primary": False},
    # mae direita
    {"l": 705, "t": 75, "w": 230, "h": 240, "match": "MATCH 96.5%", "primary": False},
]

# Gerar HTML das faces
faces_html = ""
for i, f in enumerate(FACES):
    l, t, w, h = f["l"], f["t"], f["w"], f["h"]
    match = f["match"]
    # badge match: centrado horizontalmente, 10px abaixo da caixa
    badge_top = t + h + 8
    badge_left_center = l + w // 2
    faces_html += f"""
    <div class="face-box" style="left:{l}px;top:{t}px;width:{w}px;height:{h}px;">
      <span class="corner tl"></span>
      <span class="corner tr"></span>
      <span class="corner bl"></span>
      <span class="corner br"></span>
      <div class="scan-grid"></div>
    </div>
    <div class="match-badge" style="left:{badge_left_center}px;top:{badge_top}px;">{match}</div>
    """

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=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  html, body {{ margin: 0; padding: 0; overflow: hidden; }}
  body {{
    width: 1080px;
    height: 1080px;
    font-family: 'Montserrat', sans-serif;
    background: #0D0D0D;
    position: relative;
    color: #FFFFFF;
  }}

  /* ================= TOPO ================= */
  .top-bar {{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 170px;
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    z-index: 5;
  }}
  .eyebrow {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #87C925;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }}
  .eyebrow::before, .eyebrow::after {{
    content: '';
    width: 32px;
    height: 2px;
    background: #87C925;
    display: inline-block;
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(135, 201, 37, 0.6);
  }}
  .logo-official {{
    height: 86px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 28px rgba(135, 201, 37, 0.35));
  }}

  /* ================= HERO ================= */
  .hero-wrap {{
    position: absolute;
    top: 170px; left: 0;
    width: 1080px;
    height: 540px;
    overflow: hidden;
    background: #000;
  }}
  .hero-img {{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.96) contrast(1.12) saturate(1.05);
  }}
  .overlay-bottom {{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(13,13,13,0.0) 0%, rgba(13,13,13,0.9) 75%, #0D0D0D 100%);
    z-index: 3;
  }}

  /* ================= FACE-DETECTION (estilo landing) ================= */
  .face-box {{
    position: absolute;
    z-index: 6;
    pointer-events: none;
  }}
  /* Cada canto: 2 segmentos em L, grossos, com glow forte */
  .face-box .corner {{
    position: absolute;
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 10px rgba(135, 201, 37, 1.0))
            drop-shadow(0 0 18px rgba(135, 201, 37, 0.6));
  }}
  .corner.tl {{
    top: -2px; left: -2px;
    border-top: 5px solid #B4F03A;
    border-left: 5px solid #B4F03A;
  }}
  .corner.tr {{
    top: -2px; right: -2px;
    border-top: 5px solid #B4F03A;
    border-right: 5px solid #B4F03A;
  }}
  .corner.bl {{
    bottom: -2px; left: -2px;
    border-bottom: 5px solid #B4F03A;
    border-left: 5px solid #B4F03A;
  }}
  .corner.br {{
    bottom: -2px; right: -2px;
    border-bottom: 5px solid #B4F03A;
    border-right: 5px solid #B4F03A;
  }}

  /* Scan grid dentro da caixa — linhas verticais verde translucido */
  .face-box .scan-grid {{
    position: absolute;
    inset: 4px;
    background-image:
      linear-gradient(90deg,
        rgba(135, 201, 37, 0.14) 0px,
        rgba(135, 201, 37, 0.14) 1px,
        transparent 1px,
        transparent 10px),
      linear-gradient(180deg,
        rgba(135, 201, 37, 0.08) 0px,
        rgba(135, 201, 37, 0.08) 1px,
        transparent 1px,
        transparent 14px);
    mix-blend-mode: screen;
    opacity: 0.75;
  }}

  /* Match badge — pill verde brilhante */
  .match-badge {{
    position: absolute;
    transform: translateX(-50%);
    z-index: 7;
    background: #87C925;
    color: #0D0D0D;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(135, 201, 37, 0.85),
                0 2px 8px rgba(0,0,0,0.6);
    white-space: nowrap;
  }}

  /* Badge "FORMANDO DETECTADO" - canto inferior esquerdo da hero */
  .detected-badge {{
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 8;
    background: rgba(13,13,13,0.65);
    border: 1.5px solid #87C925;
    color: #B4F03A;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 3px;
    box-shadow: 0 0 18px rgba(135, 201, 37, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }}
  .detected-badge::before {{
    content: '';
    width: 7px;
    height: 7px;
    background: #87C925;
    border-radius: 50%;
    box-shadow: 0 0 8px #87C925;
    animation: none;
  }}

  /* ================= DIVIDER ================= */
  .divider {{
    position: absolute;
    top: 710px; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
      rgba(135, 201, 37, 0) 0%,
      rgba(135, 201, 37, 0.95) 18%,
      rgba(135, 201, 37, 0.95) 82%,
      rgba(135, 201, 37, 0) 100%);
    box-shadow: 0 0 18px rgba(135, 201, 37, 0.7);
    z-index: 6;
  }}

  /* ================= BLOCO INFERIOR ================= */
  .bottom-block {{
    position: absolute;
    top: 710px; left: 0; right: 0;
    height: 370px;
    background: #0D0D0D;
    z-index: 5;
  }}

  /* ================= HEADLINE ================= */
  .content {{
    position: absolute;
    left: 54px;
    right: 54px;
    top: 744px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }}
  .headline {{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 76px;
    line-height: 0.92;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    color: #FFFFFF;
  }}
  .headline .hl-accent {{
    color: #87C925;
    text-shadow: 0 0 28px rgba(135, 201, 37, 0.5);
  }}
  .sub {{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.32;
    color: rgba(255,255,255,0.9);
    max-width: 960px;
  }}
  .sub strong {{ color: #87C925; font-weight: 700; }}

  /* ================= CTA ================= */
  .cta-wrap {{
    position: absolute;
    left: 54px;
    right: 54px;
    bottom: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }}
  .cta {{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #9FDB2E 0%, #6EA81D 100%);
    color: #0D0D0D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 21px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 20px 30px;
    border-radius: 14px;
    box-shadow:
      0 12px 32px rgba(0,0,0,0.55),
      0 0 44px rgba(135, 201, 37, 0.4);
    border: 2px solid rgba(255,255,255,0.14);
    white-space: nowrap;
  }}
  .cta .arrow {{
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
  }}
  .url {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.14em;
    color: rgba(135, 201, 37, 0.9);
    text-transform: lowercase;
    text-align: right;
    white-space: nowrap;
  }}
  .url strong {{
    color: #87C925;
    font-weight: 700;
  }}
</style>
</head>
<body>

  <div class="top-bar">
    <div class="eyebrow">NOVA FUNÇÃO · IA 2.0</div>
    <img class="logo-official" src="{logo_src}" alt="Cloud PhotoRF 2.0">
  </div>

  <div class="hero-wrap">
    <img class="hero-img" src="{hero_src}" alt="">
    {faces_html}
    <div class="detected-badge">FORMANDO DETECTADO</div>
    <div class="overlay-bottom"></div>
  </div>

  <div class="bottom-block"></div>
  <div class="divider"></div>

  <div class="content">
    <div class="headline">
      O <span class="hl-accent">ABSURDO</span>: ELA<br>
      RECONHECE <span class="hl-accent">ATÉ A FAMÍLIA</span>.
    </div>
    <div class="sub">
      A IA do <strong>Cloud PhotoRF 2.0</strong> encontra as fotos de cada parente do formando e entrega direto pra ele.
    </div>
  </div>

  <div class="cta-wrap">
    <div class="cta">
      QUERO CONHECER O SOFTWARE
      <span class="arrow">→</span>
    </div>
    <div class="url">oferta.<strong>px3lab</strong>.com.br</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=1)
        page.set_content(HTML, wait_until="networkidle")
        page.wait_for_timeout(600)
        page.screenshot(path=str(OUT), clip={"x": 0, "y": 0, "width": 1080, "height": 1080}, omit_background=False)
        browser.close()
    print(f"OK -> {OUT}")

if __name__ == "__main__":
    render()
