#!/usr/bin/env python3
"""Renderiza piloto 01 Cloud PhotoRF 2.0 (1080x1080) via Playwright."""
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_fotografo_scan.png"
VERSION = sys.argv[1] if len(sys.argv) > 1 else "v1"
OUT = BASE / f"piloto_01_1x1_{VERSION}.png"

hero_b64 = base64.b64encode(HERO.read_bytes()).decode()
hero_src = f"data:image/png;base64,{hero_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=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;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;
  }}

  /* ================= HERO ================= */
  .hero-wrap {{
    position: absolute;
    top: 0; left: 0;
    width: 1080px;
    height: 560px;
    overflow: hidden;
  }}
  .hero-img {{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    filter: brightness(0.85) contrast(1.12) saturate(1.2);
  }}
  .overlay-top {{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 320px;
    background: linear-gradient(180deg, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0.0) 100%);
  }}
  .overlay-bottom {{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 220px;
    background: linear-gradient(180deg, rgba(13,13,13,0.0) 0%, rgba(13,13,13,1) 92%);
  }}
  .glow {{
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 180px rgba(135, 201, 37, 0.28);
  }}

  /* ================= BLOCO INFERIOR ================= */
  .bottom-block {{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 560px;
    background: #0D0D0D;
    z-index: 2;
  }}
  .divider {{
    position: absolute;
    top: 560px; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
      rgba(135, 201, 37, 0) 0%,
      rgba(135, 201, 37, 0.9) 20%,
      rgba(135, 201, 37, 0.9) 80%,
      rgba(135, 201, 37, 0) 100%);
    box-shadow: 0 0 16px rgba(135, 201, 37, 0.65);
    z-index: 3;
  }}

  /* ================= HEADER ================= */
  .header {{
    position: absolute;
    top: 50px;
    left: 60px;
    right: 60px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    z-index: 10;
  }}
  .eyebrow {{
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #87C925;
    width: fit-content;
    text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  }}
  .eyebrow::before {{
    content: '';
    width: 44px;
    height: 3px;
    background: #87C925;
    display: inline-block;
    box-shadow: 0 0 10px rgba(135, 201, 37, 0.8);
  }}
  .logo-wrap {{
    display: flex;
    align-items: center;
    gap: 22px;
  }}
  .logo-mark {{
    width: 92px;
    height: 92px;
    border-radius: 22px;
    background: linear-gradient(135deg, #87C925 0%, #5A9018 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 0 36px rgba(135, 201, 37, 0.6),
      0 8px 24px rgba(0,0,0,0.65);
    position: relative;
    flex-shrink: 0;
  }}
  .logo-mark::before {{
    content: '';
    position: absolute;
    inset: 13px;
    border: 4px solid #0D0D0D;
    border-radius: 13px;
  }}
  .logo-mark::after {{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0D0D0D;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }}
  .logo-text {{
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  }}
  .logo-text .brand {{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 54px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    text-transform: uppercase;
    line-height: 0.95;
    white-space: nowrap;
  }}
  .logo-text .brand .accent {{ color: #87C925; }}
  .logo-text .version {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.72);
    margin-top: 8px;
  }}

  /* ================= HEADLINE ================= */
  .content {{
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 240px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }}
  .headline {{
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 116px;
    line-height: 0.90;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    color: #FFFFFF;
  }}
  .headline .hl-accent {{
    color: #87C925;
    text-shadow: 0 0 32px rgba(135, 201, 37, 0.55);
  }}
  .sub {{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.35;
    color: rgba(255,255,255,0.88);
    max-width: 920px;
  }}
  .sub strong {{ color: #87C925; font-weight: 700; }}

  /* ================= CTA ================= */
  .cta-wrap {{
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: 70px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }}
  .cta {{
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #9FDB2E 0%, #6EA81D 100%);
    color: #0D0D0D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 24px 36px;
    border-radius: 14px;
    box-shadow:
      0 14px 36px rgba(0,0,0,0.55),
      0 0 48px rgba(135, 201, 37, 0.4);
    border: 2px solid rgba(255,255,255,0.12);
    white-space: nowrap;
  }}
  .cta .arrow {{
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    margin-left: 2px;
  }}

  .url {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.14em;
    color: rgba(135, 201, 37, 0.85);
    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="overlay-top"></div>
    <div class="overlay-bottom"></div>
    <div class="glow"></div>
  </div>

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

  <div class="header">
    <div class="eyebrow">LANÇAMENTO 2.0</div>
    <div class="logo-wrap">
      <div class="logo-mark"></div>
      <div class="logo-text">
        <div class="brand">CLOUD <span class="accent">PHOTORF</span></div>
        <div class="version">VERSÃO 2.0 · AI RECOGNITION</div>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="headline">
      O <span class="hl-accent">ABSURDO</span> QUE<br>
      SEPARA SUAS FOTOS<br>
      <span class="hl-accent">SOZINHO</span>.
    </div>
    <div class="sub">
      Reconhecimento facial que entrega as fotos de <strong>cada pessoa</strong> do seu evento em minutos.
    </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(500)
        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()
