#!/usr/bin/env python3
"""
Compor criativo 1:1 (1080x1080) - Piloto 06 Angulo E opcao 1 (handshake).
Full-bleed, hero handshake + headline terceirizacao.
"""
import base64
from pathlib import Path
from playwright.sync_api import sync_playwright

HERO = "/opt/mia/workspace/clientes/px3lab/lancamento_photorf2/criativos_oferta/opcoes_hero_E/opcao_1_handshake.png"
LOGO = "/opt/mia/workspace/clientes/px3lab/cloudphotorf2_conafor/logos/cloudphotorf-logo-grande-CLEAN.png"
OUT  = "/opt/mia/workspace/clientes/px3lab/lancamento_photorf2/criativos_oferta/piloto_06_E_opcao1_handshake_1x1.png"

def b64(path):
    return base64.b64encode(Path(path).read_bytes()).decode()

hero_b64 = b64(HERO)
logo_b64 = b64(LOGO)

# Layout (soma = 1080):
#   TOPO  = 110
#   HERO  = 600
#   DIV   = 3
#   BASE  = 367

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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
<style>
  * {{ margin:0; padding:0; box-sizing:border-box; }}
  html, body {{ margin:0; overflow:hidden; background:#000; }}
  body {{
    width:1080px; height:1080px;
    font-family:'Inter',sans-serif;
    color:#fff;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
  }}
  .canvas {{
    position:relative;
    width:1080px; height:1080px;
    background:#000;
    display:flex;
    flex-direction:column;
  }}

  /* ================= TOPO (faixa preta 110px) ================= */
  .topo {{
    height:110px;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 48px;
    position:relative;
    z-index:5;
  }}
  .eyebrow {{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:22px;
    letter-spacing:4px;
    color:#87C925;
    text-transform:uppercase;
    line-height:1;
  }}
  .eyebrow .dot {{ color:#fff; margin:0 10px; opacity:.7; }}
  .eyebrow .white {{ color:#fff; }}
  .logo-topo {{
    height:44px;
    width:auto;
    display:block;
  }}

  /* ================= HERO (600px full-bleed) ================= */
  .hero {{
    position:relative;
    height:600px;
    width:1080px;
    overflow:hidden;
    background:#000;
  }}
  .hero img {{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 42%;
    display:block;
  }}
  .hero::after {{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 68%, rgba(0,0,0,.55) 100%);
    pointer-events:none;
  }}

  /* Divisor verde luminoso */
  .divisor {{
    height:3px;
    background:linear-gradient(90deg, rgba(135,201,37,0) 0%, #87C925 20%, #B6EE4E 50%, #87C925 80%, rgba(135,201,37,0) 100%);
    box-shadow:0 0 18px rgba(135,201,37,.65), 0 0 32px rgba(135,201,37,.35);
    position:relative;
    z-index:4;
  }}

  /* ================= BASE (367px bloco preto) ================= */
  .base {{
    flex:1;
    background:#000;
    padding:36px 56px 32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
  }}
  .headline {{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:800;
    font-size:78px;
    line-height:0.98;
    letter-spacing:-.3px;
    text-transform:uppercase;
    color:#fff;
  }}
  .headline .green {{ color:#87C925; display:block; margin-bottom:2px; }}
  .headline .l2    {{ display:block; }}
  .headline .l3    {{ display:block; }}

  .sub {{
    font-family:'Inter', sans-serif;
    font-weight:500;
    font-size:21px;
    line-height:1.4;
    color:#E6E6E6;
    max-width:920px;
    margin-top:14px;
  }}

  .footer-row {{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:14px;
  }}
  .cta {{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#fff;
    color:#000;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:20px;
    letter-spacing:.3px;
    text-transform:uppercase;
    padding:17px 30px;
    border-radius:999px;
    box-shadow:0 10px 30px rgba(255,255,255,.08);
  }}
  .cta .arrow {{ font-size:22px; line-height:1; }}

  .url {{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    font-size:18px;
    color:#9FD93A;
    letter-spacing:.5px;
    white-space:nowrap;
  }}
</style>
</head>
<body>
  <div class="canvas">
    <!-- TOPO -->
    <div class="topo">
      <div class="eyebrow">PX3 LAB <span class="dot">·</span> <span class="white">CLOUD PHOTORF 2.0</span></div>
      <img class="logo-topo" src="data:image/png;base64,{logo_b64}" alt="Cloud PhotoRF 2.0">
    </div>

    <!-- HERO -->
    <div class="hero">
      <img src="data:image/png;base64,{hero_b64}" alt="Handshake">
    </div>

    <!-- Divisor -->
    <div class="divisor"></div>

    <!-- BASE -->
    <div class="base">
      <div>
        <div class="headline">
          <span class="green">PARE DE TERCEIRIZAR</span>
          <span class="l2">A SEPARAÇÃO DAS</span>
          <span class="l3">SUAS FOTOS.</span>
        </div>
        <div class="sub">
          Com o Cloud PhotoRF 2.0, sua produção é entregue com rapidez e custo reduzido.
        </div>
      </div>
      <div class="footer-row">
        <div class="cta">QUERO CONHECER O SOFTWARE <span class="arrow">→</span></div>
        <div class="url">oferta.px3lab.com.br</div>
      </div>
    </div>
  </div>
</body>
</html>
"""

def main():
    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=OUT, clip={"x":0,"y":0,"width":1080,"height":1080}, omit_background=False)
        browser.close()
    print(f"OK: {OUT}")

if __name__ == "__main__":
    main()
