#!/usr/bin/env python3
"""
Criativo 09 Cloud PhotoRF 2.0 - Feed 1:1 (1080x1080)
CONCEITO CORRETO v3 (2026-10-01):

A pasta do formando 112 tem muitas fotos onde ele aparece. Mas na maioria
delas ele e so FIGURANTE no fundo de fotos de OUTROS formandos (cabeca
baixa, de costas, borrado, passando). O Cloud PhotoRF 2.0 identifica isso
e sugere descarte em lote.

Visual:
  - 8 fotos da MESMA pessoa (sugerido pela narrativa)
  - 1 tile GRANDE (ocupa 2 slots verticais no canto sup esquerdo) = KEEP, a
    unica foto onde ela e protagonista/focada, com bracket verde "PROTAGONISTA"
  - 7 tiles menores (grid 3x3 sem o slot KEEP) = fotos de evento onde outras
    pessoas sao foco e ela aparece de FUNDO, dessaturadas, X vermelho discreto
  - Pill grande top-right: "DESCARTAR 7 FOTOS DE FUNDO"

Headline: "REVISAO DE / FUNDOS. UM CLIQUE." (2 linhas, UM CLIQUE em verde)
Sub: "Aquele formando que aparece la atras, de costas, cabeca baixa, em
dezenas de fotos de outros alunos. O Cloud PhotoRF 2.0 identifica quando
ele e so fundo, nao protagonista, e remove da pasta dele em lote. Zero
foto fraca entregue."

Autor: Juliana (juliana-ops)
Fotos: gpt-image-2.5-sunburst (gerar_fotos_v2.py)

Backup do conceito-errado em _v_pre_conceito_correto/
Backup v3 headline 3 linhas em _v_pre_headline_2linhas/
"""

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

BASE = Path(__file__).resolve().parent
OUT = BASE / "09_revisao_fundos.png"

FOTOS = BASE / "fotos_v2_raw"
ASSET_KEEP = FOTOS / "keep_formanda_112.png"
ASSET_BG = [
    FOTOS / "bg_1_passando.png",
    FOTOS / "bg_2_cabeca_baixa.png",
    FOTOS / "bg_3_de_costas.png",
    FOTOS / "bg_4_platea_distante.png",
    FOTOS / "bg_5_selfie_fundo_borrado.png",
    FOTOS / "bg_6_olhando_para_o_lado.png",
    FOTOS / "bg_7_multidao_cabeca_baixa.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()


KEEP_B64 = b64_img(ASSET_KEEP)
BG_B64 = [b64_img(p) for p in ASSET_BG]
LOGO_B64 = b64_img(ASSET_LOGO)

# ============================================================================
# LAYOUT v4 HEADLINE 2 LINHAS (em px, canvas 1080x1080)
# ============================================================================
# header:          56 - 104
# scan-tag:        125 - 155 (abaixo do wordmark, canto direito)
# stage headline:  170 - ~310  (2 linhas 76px line-height 0.90 = ~137)
# gap:             ~310 - 420  (>=110px de respiro, bem acima dos 20px exigidos)
# mosaico:         420 - 780
# ============================================================================

MOSAIC_W = 540
MOSAIC_H = 360
MOSAIC_TOP = 420
MOSAIC_LEFT = (1080 - MOSAIC_W) // 2  # 270

KEEP_W = 240
KEEP_H = MOSAIC_H

BG_AREA_W = MOSAIC_W - KEEP_W
BG_COLS = 3
BG_ROWS = 2
BG_TILE_W = BG_AREA_W / BG_COLS
BG_TILE_H = MOSAIC_H / BG_ROWS

PILL_TEXT = "DESCARTAR 6 FOTOS DE FUNDO"
BGS_USED = 6


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:
      radial-gradient(ellipse 100% 70% at 50% 25%, #1a1419 0%, #0a0a0c 60%, #050508 100%);
    overflow: hidden;
  }}

  /* grid tech sutil de fundo */
  .grid-bg {{
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(135,201,37,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(135,201,37,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
    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;
    text-shadow: 0 2px 10px rgba(0,0,0,0.85);
  }}
  .selo-campanha .absurdo {{ color: #A6E22E; }}
  .selo-campanha .bar {{
    display: inline-block;
    width: 4px; height: 22px;
    background: #A6E22E;
    transform: skewX(-18deg);
    margin-right: 4px;
    box-shadow: 0 0 8px rgba(166,226,46,0.6);
  }}
  .wordmark {{
    height: 48px;
    opacity: 0.98;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.8));
  }}

  /* ===================== STAGE (kicker + headline) - top ===================== */
  .stage {{
    position: absolute;
    top: 170px; left: 60px; right: 60px;
    z-index: 9;
  }}
  .kicker {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.22em;
    color: #A6E22E;
    margin-bottom: 14px;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
  }}
  .kicker::before {{
    content: "";
    display: inline-block; width: 28px; height: 2px; background: #A6E22E;
  }}
  .headline {{
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 76px;
    line-height: 0.90;
    letter-spacing: -0.025em;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
    white-space: nowrap;
  }}
  .headline .verde {{
    color: #A6E22E;
    display: inline;
    text-shadow: 0 0 24px rgba(166,226,46,0.35);
  }}

  /* ===================== MOSAICO (KEEP grande esquerda + BG grid direita) ===================== */
  .mosaic-wrap {{
    position: absolute;
    top: {MOSAIC_TOP}px;
    left: {MOSAIC_LEFT}px;
    width: {MOSAIC_W}px;
    height: {MOSAIC_H}px;
    z-index: 6;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(166,226,46,0.15);
    display: flex;
    overflow: visible;
  }}

  /* KEEP tile - foto GRANDE da esquerda, cor viva, bracket verde */
  .keep-tile {{
    position: relative;
    width: {KEEP_W}px;
    height: {KEEP_H}px;
    overflow: hidden;
    border-radius: 12px 0 0 12px;
    z-index: 2;
    box-shadow:
      inset 0 0 0 3px #A6E22E,
      0 0 40px rgba(166,226,46,0.55);
  }}
  .keep-tile img {{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: contrast(1.08) saturate(1.15) brightness(1.05);
  }}
  /* brackets grandes nos cantos */
  .keep-tile .bk {{
    position: absolute;
    width: 28px; height: 28px;
    border: 4px solid #A6E22E;
    filter: drop-shadow(0 0 14px rgba(166,226,46,0.95));
    z-index: 9;
  }}
  .keep-tile .bk.tl {{ top: 8px; left: 8px; border-right: none; border-bottom: none; }}
  .keep-tile .bk.tr {{ top: 8px; right: 8px; border-left: none; border-bottom: none; }}
  .keep-tile .bk.bl {{ bottom: 8px; left: 8px; border-right: none; border-top: none; }}
  .keep-tile .bk.br {{ bottom: 8px; right: 8px; border-left: none; border-top: none; }}
  .keep-tile .keep-pill {{
    position: absolute;
    bottom: 14px; left: 14px; right: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    color: #0a0a0c;
    background: #A6E22E;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 6px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 0 16px rgba(166,226,46,0.65);
    line-height: 1.15;
  }}
  .keep-tile .id-tag {{
    position: absolute;
    top: 14px; left: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    color: #A6E22E;
    background: rgba(10,10,12,0.85);
    letter-spacing: 0.14em;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 10;
    border: 1px solid rgba(166,226,46,0.6);
  }}

  /* BG grid - area direita (300x360) dividida 3 cols x 2 rows */
  .bg-grid {{
    position: relative;
    width: {BG_AREA_W}px;
    height: {MOSAIC_H}px;
    display: grid;
    grid-template-columns: repeat({BG_COLS}, 1fr);
    grid-template-rows: repeat({BG_ROWS}, 1fr);
    gap: 0;
    border-radius: 0 12px 12px 0;
    overflow: hidden;
    z-index: 2;
  }}
  .bg-tile {{
    position: relative;
    overflow: hidden;
    border-left: 1px solid rgba(166,226,46,0.35);
    border-top: 1px solid rgba(166,226,46,0.35);
  }}
  .bg-tile img {{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(0.65) brightness(0.5) contrast(0.95) saturate(0.5);
  }}
  .bg-tile .darken {{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,12,0.35) 0%, rgba(10,10,12,0.55) 100%);
    z-index: 2;
  }}
  /* X vermelho */
  .bg-tile .x {{
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(242,56,90,0.95);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 13px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 10px rgba(242,56,90,0.55);
    z-index: 5;
  }}
  /* label FUNDO no rodape da tile */
  .bg-tile .bg-label {{
    position: absolute;
    bottom: 5px; left: 5px; right: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 8px;
    color: #f2385a;
    background: rgba(10,10,12,0.85);
    letter-spacing: 0.12em;
    text-align: center;
    padding: 3px 2px;
    border-radius: 2px;
    z-index: 6;
    text-transform: uppercase;
    line-height: 1.1;
    border: 1px solid rgba(242,56,90,0.5);
  }}

  /* ===================== PILL VERDE 'DESCARTAR N FOTOS DE FUNDO' ===================== */
  .pill-descartar {{
    position: absolute;
    top: 795px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 12px;
    background: #A6E22E;
    color: #0a0a0c;
    border-radius: 999px;
    padding: 13px 22px 13px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 12px 32px rgba(0,0,0,0.65), 0 0 28px rgba(166,226,46,0.75);
    white-space: nowrap;
    z-index: 11;
  }}
  .pill-descartar .check {{
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #0a0a0c;
    color: #A6E22E;
    font-size: 13px;
    font-weight: 900;
  }}

  /* ===================== TAG 'SCAN - BGS - AUTO' ===================== */
  .scan-tag {{
    position: absolute;
    right: 60px;
    top: 125px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    color: #A6E22E;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(10,10,12,0.85);
    padding: 6px 10px;
    border-radius: 4px;
    z-index: 9;
    border: 1px solid rgba(166,226,46,0.5);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 10px rgba(166,226,46,0.25);
    display: inline-flex; align-items: center; gap: 6px;
  }}
  .scan-tag .dot {{
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #A6E22E;
    box-shadow: 0 0 8px rgba(166,226,46,0.95);
  }}
  .scan-tag .sep {{ color: #4e5a2b; }}

  /* ===================== SUB (abaixo do mosaico) ===================== */
  .sub {{
    position: absolute;
    left: 60px; right: 60px;
    bottom: 150px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.46;
    color: #e8e8ea;
    z-index: 9;
    text-align: center;
  }}
  .sub strong {{ color: #ffffff; font-weight: 800; }}
  .sub .verdebold {{ color: #A6E22E; font-weight: 800; }}

  /* ===================== RODAPE ===================== */
  .footer {{
    position: absolute;
    left: 60px; right: 60px; bottom: 56px;
    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.35);
    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: #d3d3d6;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  }}
  .meta-line .date {{
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 44px;
    color: #ffffff;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  }}
  .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;
    box-shadow: 0 0 8px rgba(166,226,46,0.6);
  }}
</style>
</head>
<body>
<div class="canvas">
  <div class="grid-bg"></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>

  <!-- TAG lateral (DEBAIXO do wordmark) -->
  <div class="scan-tag">
    <span class="dot"></span>SCAN <span class="sep">&middot;</span> BGS <span class="sep">&middot;</span> AUTO
  </div>

  <!-- STAGE (headline em 2 linhas) -->
  <div class="stage">
    <div class="kicker">Pasta do formando limpa automaticamente</div>
    <h1 class="headline">
      REVIS&Atilde;O DE<br>
      FUNDOS. <span class="verde">UM CLIQUE.</span>
    </h1>
  </div>

  <!-- MOSAICO - KEEP grande (esq) + 6 BGs (dir, grid 3x2) -->
  <div class="mosaic-wrap">
    <!-- KEEP TILE (foto grande da formanda em primeiro plano) -->
    <div class="keep-tile">
      <img src="{KEEP_B64}" alt="">
      <div class="bk tl"></div>
      <div class="bk tr"></div>
      <div class="bk bl"></div>
      <div class="bk br"></div>
      <div class="id-tag">ID 112</div>
      <div class="keep-pill">PROTAGONISTA &middot; MANTER</div>
    </div>

    <!-- BG GRID 3x2 (6 fotos onde ela e so fundo, dessaturadas, X vermelho) -->
    <div class="bg-grid">
      <div class="bg-tile"><img src="{BG_B64[0]}" alt=""><div class="darken"></div><div class="x">&times;</div><div class="bg-label">FUNDO</div></div>
      <div class="bg-tile"><img src="{BG_B64[1]}" alt=""><div class="darken"></div><div class="x">&times;</div><div class="bg-label">FUNDO</div></div>
      <div class="bg-tile"><img src="{BG_B64[2]}" alt=""><div class="darken"></div><div class="x">&times;</div><div class="bg-label">FUNDO</div></div>
      <div class="bg-tile"><img src="{BG_B64[3]}" alt=""><div class="darken"></div><div class="x">&times;</div><div class="bg-label">FUNDO</div></div>
      <div class="bg-tile"><img src="{BG_B64[4]}" alt=""><div class="darken"></div><div class="x">&times;</div><div class="bg-label">FUNDO</div></div>
      <div class="bg-tile"><img src="{BG_B64[5]}" alt=""><div class="darken"></div><div class="x">&times;</div><div class="bg-label">FUNDO</div></div>
    </div>
  </div>

  <!-- PILL grande "DESCARTAR 6 FOTOS DE FUNDO" -->
  <div class="pill-descartar">
    <span class="check">&#10003;</span>
    {PILL_TEXT}
  </div>

  <!-- SUB -->
  <p class="sub">
    Aquele formando que aparece l&aacute; atr&aacute;s, de costas, cabe&ccedil;a baixa, em dezenas de fotos de outros alunos.<br>
    O <strong>Cloud PhotoRF 2.0</strong> identifica quando ele &eacute; s&oacute; fundo e <span class="verdebold">remove da pasta dele em lote</span>. Zero foto fraca entregue.
  </p>

  <!-- 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)
    else:
        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()
