#!/usr/bin/env python3
"""Piloto 06 angulo E — OPCAO 1 handshake — LAYOUT A (crop no peito).

Problema do layout original: faixa preta superior (0-100px) com logo CORTAVA
as cabecas dos dois profissionais do hero handshake.

Solucao A: pre-cropar o hero no PIL, cortando o TOPO (acima do peito) e
mantendo apenas BRACOS/MAOS/HANDSHAKE/LAPTOP visiveis. O "corte" vira
intencional — close na negociacao acontecendo.

Composicao 1:1 full-bleed:
  - Topo (0-100): faixa preta chapada com eyebrow + logo CLEAN (sem cabecas por tras)
  - Hero cropado (100-720): opcao_1_handshake_v3 com crop de topo
  - Divisor verde fino luminoso (720)
  - Base (720-1080): headline Barlow Condensed 800 + sub + CTA + URL
"""
import base64
import io
from pathlib import Path
from PIL import Image
from playwright.sync_api import sync_playwright

BASE = Path("/opt/mia/workspace/clientes/px3lab/lancamento_photorf2/criativos_oferta")
HERO = BASE / "opcoes_hero_E/opcao_1_handshake_v3.png"
LOGO = Path("/opt/mia/workspace/clientes/px3lab/cloudphotorf2_conafor/logos/cloudphotorf-logo-grande-CLEAN.png")
OUT = BASE / "piloto_06_E_opcao1_layoutA_crop.png"

# ============== PRE-CROP DO HERO ==============
# Hero original 1024x1024. Cabecas estao em ~0-42% da altura.
# Handshake centralizado em ~50-70%. Laptop com grid em ~65-100%.
# Vamos cortar o topo em 44% (y=450) pra remover cabecas e manter
# ombros/bracos/handshake/laptop. A faixa aparente mostra "corpo descendo".
hero_pil = Image.open(HERO).convert("RGB")
W, H = hero_pil.size  # 1024, 1024
crop_top = int(H * 0.44)  # pula as cabecas
hero_crop = hero_pil.crop((0, crop_top, W, H))  # 1024 x ~573

# Reescala pra 1080x620 (zona hero do criativo) com object-fit cover natural
# via PIL — forcar hero_crop na proporcao 1080:620 (= 1.742)
target_w, target_h = 1080, 620
src_w, src_h = hero_crop.size
src_ratio = src_w / src_h
target_ratio = target_w / target_h

if src_ratio > target_ratio:
    # fonte mais larga: cortar laterais
    new_w = int(src_h * target_ratio)
    off_x = (src_w - new_w) // 2
    hero_final = hero_crop.crop((off_x, 0, off_x + new_w, src_h))
else:
    # fonte mais alta: cortar topo/base
    new_h = int(src_w / target_ratio)
    off_y = (src_h - new_h) // 2
    hero_final = hero_crop.crop((0, off_y, src_w, off_y + new_h))

hero_final = hero_final.resize((target_w, target_h), Image.LANCZOS)

buf = io.BytesIO()
hero_final.save(buf, format="PNG", optimize=True)
hero_b64 = base64.b64encode(buf.getvalue()).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=Barlow+Condensed:wght@600;700;800;900&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: 1080px;
    font-family: 'Montserrat', sans-serif;
    background: #0D0D0D;
    position: relative;
    color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "kern" 1;
    font-variant-ligatures: none;
  }}

  /* ================= HEADER PRETO CHAPADO (0 -> 100) ================= */
  .header-bar {{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100px;
    background: #0D0D0D;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    z-index: 20;
    border-bottom: 1px solid rgba(135, 201, 37, 0.18);
  }}
  .eyebrow {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #87C925;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
  }}
  .eyebrow::before {{
    content: '';
    width: 24px;
    height: 2px;
    background: #87C925;
    display: inline-block;
    box-shadow: 0 0 8px rgba(135, 201, 37, 0.6);
  }}
  .logo-official {{
    height: 56px;
    width: auto;
    display: block;
  }}

  /* ================= ZONA HERO (100 -> 720) ================= */
  .hero-wrap {{
    position: absolute;
    top: 100px; left: 0;
    width: 1080px;
    height: 620px;
    overflow: hidden;
    background: #0A0A0A;
  }}
  .hero-img {{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(1.03) contrast(1.07) saturate(1.05);
  }}
  .hero-fade {{
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(13,13,13,0.0) 0%,
        rgba(13,13,13,0.0) 72%,
        rgba(13,13,13,0.72) 94%,
        rgba(13,13,13,1.0) 100%);
    z-index: 3;
    pointer-events: none;
  }}

  /* ================= DIVISOR VERDE LUMINOSO ================= */
  .divider {{
    position: absolute;
    top: 719px; 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 18px rgba(135, 201, 37, 0.7);
    z-index: 6;
  }}

  /* ================= ZONA BASE (720 -> 1080) ================= */
  .bottom-block {{
    position: absolute;
    top: 720px; left: 0; right: 0;
    height: 360px;
    background: #0D0D0D;
    z-index: 4;
  }}

  .content {{
    position: absolute;
    left: 54px;
    right: 54px;
    top: 748px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }}
  .headline {{
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 68px;
    line-height: 0.95;
    letter-spacing: 0.008em;
    text-transform: uppercase;
    color: #FFFFFF;
    font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "kern" 1;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }}
  .headline .hl-accent {{
    color: #87C925;
    text-shadow: 0 0 28px rgba(135, 201, 37, 0.45);
  }}
  .sub {{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.32;
    color: #FFFFFF;
    letter-spacing: 0.005em;
    max-width: 980px;
  }}

  .cta-wrap {{
    position: absolute;
    left: 54px;
    right: 54px;
    bottom: 30px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }}
  .cta {{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    color: #0D0D0D;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 16px 26px;
    border-radius: 14px;
    box-shadow:
      0 12px 28px rgba(0,0,0,0.55),
      0 0 36px rgba(255,255,255,0.08);
    border: 2px solid rgba(135, 201, 37, 0.4);
    white-space: nowrap;
  }}
  .cta .arrow {{
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: #0D0D0D;
  }}
  .url {{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 15px;
    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="header-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="hero-wrap">
    <img class="hero-img" src="{hero_src}" alt="">
    <div class="hero-fade"></div>
  </div>

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

  <div class="content">
    <div class="headline">
      <span class="hl-accent">PARE DE TERCEIRIZAR</span><br>
      A SEPARA&Ccedil;&Atilde;O DAS<br>
      SUAS FOTOS.
    </div>
    <div class="sub">
      Com o Cloud PhotoRF 2.0, sua produ&ccedil;&atilde;o &eacute; entregue com rapidez e custo reduzido.
    </div>
  </div>

  <div class="cta-wrap">
    <div class="cta">
      QUERO CONHECER O SOFTWARE
      <span class="arrow">&rarr;</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()
