"""
Piloto Meta Ads - Angulo 3 (Bonus Fisico)
Cliente: Prof. Francisco Borrello - Mesas Radionicas Quanticas 2.0 Plus
Campanha: Aniversario 7 anos
Formato: 1080x1080 (feed Meta Ads)

Gera 2 variacoes visuais do mesmo conceito para escolha de direcao.
"""

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

BASE_DIR = Path("/opt/mia/workspace/clientes/borrello")
OUT_DIR = BASE_DIR / "criativos_meta_aniversario"
OUT_DIR.mkdir(parents=True, exist_ok=True)

FOTO_MESAS = BASE_DIR / "imagens_referencia" / "mesas-radionicas-1024x1024.png"
foto_b64 = base64.b64encode(FOTO_MESAS.read_bytes()).decode("ascii")
FOTO_DATA_URI = f"data:image/png;base64,{foto_b64}"


# ---------------------------------------------------------------------------
# V1 - Composicao classica centralizada, hierarquia forte no numero "10"
# ---------------------------------------------------------------------------
HTML_V1 = 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=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  html, body {{ margin: 0; overflow: hidden; }}
  body {{
    width: 1080px; height: 1080px;
    background:
      radial-gradient(ellipse at 50% 20%, #1a3358 0%, #0b1a30 55%, #050b18 100%);
    font-family: 'Montserrat', sans-serif;
    color: #f4e6c1;
    position: relative;
    overflow: hidden;
  }}
  body::before {{
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 15% 90%, rgba(212, 175, 92, 0.12) 0%, transparent 42%),
      radial-gradient(circle at 90% 8%, rgba(212, 175, 92, 0.10) 0%, transparent 42%);
    pointer-events: none;
  }}
  .frame {{
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(212, 175, 92, 0.32);
    pointer-events: none;
  }}
  .frame::before, .frame::after {{
    content: '';
    position: absolute;
    width: 60px; height: 60px;
    border: 2px solid #d4af5c;
  }}
  .frame::before {{ top: -6px; left: -6px; border-right: none; border-bottom: none; }}
  .frame::after {{ bottom: -6px; right: -6px; border-left: none; border-top: none; }}

  .selo {{
    position: absolute;
    top: 66px; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 18px;
    color: #d4af5c;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }}
  .selo::before, .selo::after {{
    content: '';
    width: 80px; height: 1px;
    background: linear-gradient(90deg, transparent, #d4af5c, transparent);
  }}

  .produto-wrap {{
    position: absolute;
    top: 125px; left: 50%;
    transform: translateX(-50%);
    width: 560px; height: 400px;
    display: flex; align-items: center; justify-content: center;
  }}
  .produto-wrap::before {{
    content: '';
    position: absolute;
    width: 480px; height: 360px;
    background: radial-gradient(ellipse, rgba(212, 175, 92, 0.35) 0%, transparent 65%);
    filter: blur(30px);
    z-index: 0;
  }}
  .produto {{
    max-width: 100%; max-height: 100%;
    filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.55));
    position: relative; z-index: 1;
  }}

  .badge {{
    position: absolute;
    top: 152px; right: 78px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6c069 0%, #b8892a 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #0b1a30;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 2px 8px rgba(255,255,255,0.35);
    transform: rotate(-8deg);
    border: 3px solid #f4e6c1;
    z-index: 5;
  }}
  .badge .plus {{
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2px;
  }}
  .badge .txt1 {{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1;
  }}
  .badge .txt2 {{
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 5px;
  }}

  /* headline central com destaque no "10" */
  .head {{
    position: absolute;
    left: 50%;
    top: 555px;
    transform: translateX(-50%);
    width: 900px;
    text-align: center;
    z-index: 2;
  }}
  .head .linha1 {{
    display: flex; align-items: baseline; justify-content: center; gap: 24px;
    line-height: 1;
  }}
  .head .num {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 170px;
    font-weight: 700;
    color: #e6c069;
    line-height: 0.85;
  }}
  .head .txt {{
    font-family: 'Montserrat', sans-serif;
    font-size: 46px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    line-height: 1.02;
  }}
  .head .txt small {{
    display: block;
    font-size: 32px;
    font-weight: 600;
    color: #f4e6c1;
    letter-spacing: 3px;
    margin-top: 2px;
  }}
  .head .sub {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    font-weight: 500;
    font-style: italic;
    color: #d9c894;
    margin-top: 18px;
    letter-spacing: 1px;
  }}
  .head .sub b {{
    font-weight: 700;
    color: #ffffff;
    font-style: normal;
  }}

  .divider {{
    position: absolute;
    left: 50%;
    top: 830px;
    transform: translateX(-50%);
    width: 120px; height: 1px;
    background: #d4af5c;
    z-index: 2;
  }}

  .preco-linha {{
    position: absolute;
    left: 50%;
    top: 855px;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 22px;
    color: #f4e6c1;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 500;
    white-space: nowrap;
  }}
  .preco-linha .de {{
    text-decoration: line-through;
    opacity: 0.55;
    font-size: 20px;
  }}
  .preco-linha .por {{
    font-weight: 800;
    font-size: 30px;
    color: #ffffff;
  }}
  .preco-linha .por b {{ color: #e6c069; font-weight: 900; }}
  .preco-linha .sep {{ opacity: 0.4; }}

  .rodape {{
    position: absolute;
    bottom: 60px;
    left: 0; right: 0;
    text-align: center;
    color: #d4af5c;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    letter-spacing: 2px;
    opacity: 0.9;
  }}
</style>
</head>
<body>
  <div class="frame"></div>

  <div class="selo">Aniversário 7 anos</div>

  <div class="produto-wrap">
    <img class="produto" src="{FOTO_DATA_URI}" alt="Kit Mesas Radiônicas Quânticas">
  </div>

  <div class="badge">
    <div class="plus">+1</div>
    <div class="txt1">KIT BÔNUS</div>
    <div class="txt2">SÓ EM AGOSTO</div>
  </div>

  <div class="head">
    <div class="linha1">
      <div class="num">10</div>
      <div class="txt">Mesas Radiônicas<small>QUÂNTICAS</small></div>
    </div>
    <div class="sub">chegando <b>na sua casa</b></div>
  </div>

  <div class="divider"></div>

  <div class="preco-linha">
    <span class="de">R$ 1.397</span>
    <span class="sep">|</span>
    <span class="por">por <b>R$ 890</b></span>
    <span class="sep">|</span>
    <span>12x R$ 92,05</span>
  </div>

  <div class="rodape">Prof. Francisco Borrello&nbsp;&nbsp;·&nbsp;&nbsp;Aproveite este mês</div>
</body>
</html>
"""


# ---------------------------------------------------------------------------
# V2 - Composicao editorial split (foto esq / copy dir)
#      Hierarquia dominante no "10". Copy limpa e escalonada.
# ---------------------------------------------------------------------------
HTML_V2 = 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=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  html, body {{ margin: 0; overflow: hidden; }}
  body {{
    width: 1080px; height: 1080px;
    background: #0a1729;
    font-family: 'Montserrat', sans-serif;
    color: #f4e6c1;
    position: relative;
    overflow: hidden;
  }}

  .esquerda {{
    position: absolute;
    top: 0; left: 0;
    width: 500px; height: 1080px;
    background:
      radial-gradient(ellipse at 40% 55%, #1a3358 0%, #0a1729 72%),
      #0a1729;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }}
  .esquerda::before {{
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 45% 55%, rgba(212, 175, 92, 0.3) 0%, transparent 55%);
    pointer-events: none;
  }}
  .esquerda::after {{
    content: '';
    position: absolute;
    top: 0; right: -1px; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, #d4af5c 25%, #d4af5c 75%, transparent 100%);
  }}
  .produto {{
    width: 440px;
    height: auto;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
    position: relative; z-index: 2;
  }}

  .selo-circle {{
    position: absolute;
    top: 62px; left: 62px;
    width: 128px; height: 128px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e6c069 0%, #b8892a 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #0a1729;
    text-align: center;
    border: 2px solid #f4e6c1;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    z-index: 5;
  }}
  .selo-circle .num {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
  }}
  .selo-circle .lbl {{
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
  }}
  .selo-circle .lbl2 {{
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 0.85;
  }}

  /* faixa dourada com "+1 KIT" na diagonal do bloco esquerdo */
  .faixa-bonus {{
    position: absolute;
    bottom: 92px; left: 0;
    background: linear-gradient(90deg, #e6c069 0%, #b8892a 100%);
    color: #0a1729;
    padding: 12px 30px 12px 62px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    z-index: 4;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }}

  .direita {{
    position: absolute;
    top: 0; right: 0;
    width: 580px; height: 1080px;
    background:
      linear-gradient(180deg, #0f2542 0%, #0a1729 100%);
    padding: 100px 62px 90px;
    display: flex; flex-direction: column; justify-content: center;
  }}
  .direita::before {{
    content: '';
    position: absolute;
    top: 100px; left: 62px;
    width: 60px; height: 3px;
    background: #d4af5c;
  }}
  .kicker {{
    color: #d4af5c;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 24px;
  }}
  .head-num {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 200px;
    font-weight: 700;
    color: #e6c069;
    line-height: 0.85;
    margin-bottom: 4px;
    letter-spacing: -4px;
  }}
  .head-txt {{
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }}
  .head-txt-sub {{
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.15;
    margin-top: 2px;
    letter-spacing: 4px;
  }}
  .destino {{
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    font-style: italic;
    color: #d9c894;
    line-height: 1.2;
    margin-top: 22px;
    margin-bottom: 40px;
  }}
  .destino b {{
    font-weight: 700;
    color: #ffffff;
    font-style: normal;
  }}
  .preco-box {{
    background: rgba(212, 175, 92, 0.09);
    border-left: 3px solid #d4af5c;
    padding: 22px 24px;
    margin-bottom: 22px;
  }}
  .preco-de {{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #a89870;
    text-decoration: line-through;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }}
  .preco-por {{
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
  }}
  .preco-por span {{ color: #e6c069; }}
  .preco-parcela {{
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #d9c894;
    margin-top: 8px;
    letter-spacing: 0.5px;
  }}
  .cta-linha {{
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #d4af5c;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 6px;
  }}
  .assinatura {{
    position: absolute;
    bottom: 42px;
    left: 62px; right: 62px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-style: italic;
    color: #d4af5c;
    letter-spacing: 1.5px;
    text-align: right;
    opacity: 0.9;
  }}
</style>
</head>
<body>
  <div class="esquerda">
    <div class="selo-circle">
      <div class="num">7</div>
      <div class="lbl">Anos</div>
      <div class="lbl2">Aniversário</div>
    </div>
    <img class="produto" src="{FOTO_DATA_URI}" alt="Kit Mesas Radiônicas Quânticas">
    <div class="faixa-bonus">+1 kit bônus · Só em agosto</div>
  </div>

  <div class="direita">
    <div class="kicker">Presente limitado · Agosto</div>
    <div class="head-num">10</div>
    <div class="head-txt">Mesas Radiônicas</div>
    <div class="head-txt-sub">QUÂNTICAS</div>
    <div class="destino">
      chegando <b>na sua casa</b>
    </div>

    <div class="preco-box">
      <div class="preco-de">De R$ 1.397</div>
      <div class="preco-por">por <span>R$ 890</span></div>
      <div class="preco-parcela">ou 12x de R$ 92,05</div>
    </div>
    <div class="cta-linha">Aproveite este mês →</div>

    <div class="assinatura">Prof. Francisco Borrello</div>
  </div>
</body>
</html>
"""


def render(html: str, destino: Path, w: int = 1080, h: int = 1080) -> Path:
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": w, "height": h})
        page.set_content(html, wait_until="networkidle")
        page.evaluate("document.fonts.ready")
        page.wait_for_timeout(500)
        page.screenshot(path=str(destino), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()
    return destino


if __name__ == "__main__":
    v1 = OUT_DIR / "piloto_angulo3_bonusfisico_v1.png"
    v2 = OUT_DIR / "piloto_angulo3_bonusfisico_v2.png"
    print("Renderizando V1...")
    render(HTML_V1, v1)
    print(f"  OK -> {v1}")
    print("Renderizando V2...")
    render(HTML_V2, v2)
    print(f"  OK -> {v2}")
    print("\nConcluido.")
