#!/usr/bin/env python3
"""Piloto 05 Cloud PhotoRF 2.0 - ANGULO D - ECONOMIA DE TEMPO - formato 9:16 (1080x1920).

v4 (correcao Renato 2026-10-08): hero regerado em 3/4 olhando pro laptop
(mesmo angulo do 4:5 aprovado), cafe na mao direita, laptop a esquerda com
grid de formandos. Hero: hero_tempo_D_vertical_v3.png (1024x1536).

Full-bleed: hero edge-to-edge dominando 0..1150 com topbar sobreposto;
bloco preto 1150..1720 com headline + sub + CTA + URL empilhados;
rodape 1720..1920 em preto (zona de UI do Meta).

ZONAS SEGURAS META STORY:
  - Top 0-280px: UI do Meta -> topbar sobreposto (eyebrow + logo) acima de 280
  - Essenciais entre y=280 e y=1670
  - Bot 1670-1920px: UI do Meta -> preto puro
"""
import base64
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_tempo_D_vertical_v3.png"
LOGO = Path("/opt/mia/workspace/clientes/px3lab/cloudphotorf2_conafor/logos/cloudphotorf-logo-grande.png")
OUT = BASE / "piloto_05_D_tempo_9x16.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}"

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=Oswald:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono: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: 1920px;
    font-family: 'Montserrat', sans-serif;
    background: #0D0D0D;
    position: relative;
    color: #FFFFFF;
  }}

  /* ================= ZONA 1: HERO FULL-BLEED (0 -> 1150) ================= */
  .hero-wrap {{
    position: absolute;
    top: 0; left: 0;
    width: 1080px;
    height: 1150px;
    overflow: hidden;
    background: #0A0A0A;
  }}
  .hero-img {{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: brightness(1.02) contrast(1.06) saturate(1.05);
  }}
  /* Gradiente forte no topo (barra de UI do Meta + topbar), suave no meio,
     forte no bottom pra fundir com o bloco preto */
  .hero-fade {{
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(13,13,13,0.95) 0%,
        rgba(13,13,13,0.78) 10%,
        rgba(13,13,13,0.0) 24%,
        rgba(13,13,13,0.0) 75%,
        rgba(13,13,13,0.75) 92%,
        rgba(13,13,13,1.0) 100%);
    z-index: 3;
    pointer-events: none;
  }}

  /* ================= TOP BAR SOBREPOSTO (170 -> 270) ================= */
  .top-bar {{
    position: absolute;
    top: 170px; left: 0; right: 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    z-index: 10;
  }}
  .eyebrow {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #87C925;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 14px rgba(0,0,0,1);
  }}
  .eyebrow::before {{
    content: '';
    width: 28px;
    height: 2px;
    background: #87C925;
    display: inline-block;
    box-shadow: 0 0 8px rgba(135, 201, 37, 0.7);
  }}
  .logo-official {{
    height: 64px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,1)) drop-shadow(0 0 18px rgba(135, 201, 37, 0.35));
  }}

  /* ================= DIVISOR VERDE LUMINOSO ================= */
  .divider {{
    position: absolute;
    top: 1148px; left: 0; right: 0;
    height: 2px;
    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 22px rgba(135, 201, 37, 0.8);
    z-index: 6;
  }}

  /* ================= ZONA 2: BLOCO BASE (1150 -> 1720) ================= */
  .bottom-block {{
    position: absolute;
    top: 1150px; left: 0; right: 0;
    height: 570px;
    background: #0D0D0D;
    z-index: 4;
  }}

  /* ================= ZONA 3: FADE RODAPE (1720 -> 1920) ================= */
  .footer-fade {{
    position: absolute;
    top: 1720px; left: 0; right: 0;
    height: 200px;
    background: #0D0D0D;
    z-index: 4;
  }}

  /* ---------- STACK: headline + sub + CTA empilhados sem colisao ---------- */
  .base-stack {{
    position: absolute;
    left: 60px;
    right: 60px;
    top: 1195px;
    bottom: 220px;    /* reserva 1700..1920 pro UI Meta */
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
  }}
  .headline {{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 70px;
    line-height: 0.96;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: #FFFFFF;
  }}
  .headline .hl-accent {{
    color: #87C925;
    text-shadow: 0 0 32px rgba(135, 201, 37, 0.5);
  }}
  .sub {{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.3;
    color: #FFFFFF;
    letter-spacing: 0.005em;
    max-width: 980px;
  }}
  .cta-row {{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 8px;
  }}
  .cta {{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    color: #0D0D0D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 22px 32px;
    border-radius: 16px;
    box-shadow:
      0 16px 36px rgba(0,0,0,0.62),
      0 0 42px rgba(255,255,255,0.1);
    border: 2px solid rgba(135, 201, 37, 0.46);
    white-space: nowrap;
  }}
  .cta .arrow {{
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: #0D0D0D;
  }}
  .url {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 17px;
    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="hero-wrap">
    <img class="hero-img" src="{hero_src}" alt="">
    <div class="hero-fade"></div>
  </div>

  <div class="top-bar">
    <div class="eyebrow">PX3 LAB &middot; CLOUD PHOTORF 2.0</div>
    <img class="logo-official" src="{logo_src}" alt="Cloud PhotoRF 2.0">
  </div>

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

  <div class="base-stack">
    <div class="headline">
      O QUE DEMORAVA UMA SEMANA,<br>
      <span class="hl-accent">AGORA DEMORA<br>UMA TARDE.</span>
    </div>
    <div class="sub">
      O Cloud PhotoRF 2.0 virou o jogo.<br>E n&atilde;o envolve contratar mais gente.
    </div>
    <div class="cta-row">
      <div class="cta">
        QUERO CONHECER O SOFTWARE
        <span class="arrow">&rarr;</span>
      </div>
      <div class="url">oferta.<strong>px3lab</strong>.com.br</div>
    </div>
  </div>

</body>
</html>
"""

def render():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": 1080, "height": 1920}, 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": 1920}, omit_background=False)
        browser.close()
    print(f"OK -> {OUT}")

if __name__ == "__main__":
    render()
