#!/usr/bin/env python3
"""Banners de checkout Hotmart — Francisco Borrello (v4)
- checkout_1x1.jpg      1080x1080  (mobile/quadrado)
- checkout_desktop.jpg  1290x500   (banner desktop)

Alteracoes v4:
- Nova foto do professor: _MG_9262_cutout_v2.png (camisa violeta escura, gerada via OpenAI)
- Removido o bloco de preco (R$297 / 3x R$99) em ambos os banners
- Textos realinhados na mesma margem esquerda (LEFT_X constante)
- Hierarquia: CROMOTERAPIA (dourado, maior) -> RADIESTESIA (violeta, segundo)
  -> subtitulo/descricao (branco, menor) -> nome do professor (rodape)
"""
from playwright.sync_api import sync_playwright
from pathlib import Path
import base64

BASE = Path("/opt/mia/workspace/clientes/francisco_borrello")
BG = BASE / "_bg_cromoterapia.png"
FOTO = BASE / "_recortes" / "_MG_9262_cutout_v2.png"

FONTS = Path("/home/mia/.fonts/px3lab")
BEBAS = FONTS / "BebasNeue-Regular.ttf"
INTER_BOLD = FONTS / "Inter-Bold.ttf"
INTER_REG = FONTS / "Inter-Regular.ttf"
INTER_SEMI = FONTS / "Inter-SemiBold.ttf"


def b64(p: Path) -> str:
    return base64.b64encode(p.read_bytes()).decode()


bg_b64 = b64(BG)
foto_b64 = b64(FOTO)
bebas_b64 = b64(BEBAS)
inter_bold_b64 = b64(INTER_BOLD)
inter_reg_b64 = b64(INTER_REG)
inter_semi_b64 = b64(INTER_SEMI)


COMMON_FONTS = f"""
@font-face {{ font-family: 'Bebas Neue'; src: url(data:font/ttf;base64,{bebas_b64}) format('truetype'); font-weight: 400; }}
@font-face {{ font-family: 'Inter'; src: url(data:font/ttf;base64,{inter_bold_b64}) format('truetype'); font-weight: 700; }}
@font-face {{ font-family: 'Inter'; src: url(data:font/ttf;base64,{inter_semi_b64}) format('truetype'); font-weight: 600; }}
@font-face {{ font-family: 'Inter'; src: url(data:font/ttf;base64,{inter_reg_b64}) format('truetype'); font-weight: 400; }}
"""


# ---------------------------------------------------------------------------
# BANNER 1 - 1080x1080 (quadrado / mobile)
# Layout: coluna esquerda com todos os textos alinhados; foto do prof a direita
# Margem esquerda unica = 70px para TODOS os blocos de texto
# ---------------------------------------------------------------------------

HTML_SQUARE = f"""<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8">
<style>
{COMMON_FONTS}

* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{ width: 1080px; height: 1080px; overflow: hidden; }}
body {{
  position: relative;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6,4,14,0.88) 0%, rgba(6,4,14,0.75) 45%, rgba(6,4,14,0.38) 75%, rgba(6,4,14,0.18) 100%),
    url(data:image/png;base64,{bg_b64}) center/cover no-repeat;
}}

/* Glows atras dos textos (coluna esquerda) */
.glow-gold {{
  position: absolute;
  top: 200px; left: 40px;
  width: 620px; height: 260px;
  background: radial-gradient(ellipse at center, rgba(230,178,90,0.4) 0%, rgba(230,178,90,0.16) 40%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}}
.glow-violet {{
  position: absolute;
  top: 500px; left: 40px;
  width: 620px; height: 230px;
  background: radial-gradient(ellipse at center, rgba(178,150,255,0.42) 0%, rgba(178,150,255,0.16) 42%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}}

/* Halo ambar sob a figura do professor */
.halo-figure {{
  position: absolute;
  right: -140px; bottom: -60px;
  width: 780px; height: 780px;
  background: radial-gradient(circle at center, rgba(230,178,90,0.28) 0%, rgba(178,150,255,0.16) 40%, transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}}

.corner {{
  position: absolute; width: 44px; height: 44px;
  border-color: rgba(230,178,90,0.55);
  border-style: solid; border-width: 0;
}}
.corner.tl {{ top: 32px; left: 32px; border-top-width: 2px; border-left-width: 2px; }}
.corner.tr {{ top: 32px; right: 32px; border-top-width: 2px; border-right-width: 2px; }}
.corner.bl {{ bottom: 32px; left: 32px; border-bottom-width: 2px; border-left-width: 2px; }}
.corner.br {{ bottom: 32px; right: 32px; border-bottom-width: 2px; border-right-width: 2px; }}

/* Bloco textual esquerda - TODOS os itens alinhados a esquerda no mesmo left */
.left {{
  position: absolute;
  top: 130px; left: 70px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  width: 620px;
  z-index: 3;
}}

.tag {{
  border: 1px solid rgba(230,178,90,0.55);
  border-radius: 999px;
  padding: 9px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 4.5px;
  color: #f4d9a4;
  text-transform: uppercase;
}}

.cromo {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 130px;
  line-height: 0.92;
  letter-spacing: 2px;
  margin-top: 26px;
  background: linear-gradient(180deg, #f6dfa8 0%, #e2ae5a 45%, #b6832f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 45px rgba(230,178,90,0.35);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}}

.bridge {{
  display: flex; align-items: center;
  gap: 14px;
  margin-top: 22px;
}}
.bridge .line {{
  flex: 0 0 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(230,178,90,0.7), transparent);
}}
.bridge .txt {{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 4px;
  color: #ffffff;
  text-transform: uppercase;
}}

.radi {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 100px;
  line-height: 0.92;
  letter-spacing: 3px;
  margin-top: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #d8c9ff 55%, #a894f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 45px rgba(178,150,255,0.4);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}}

.pap {{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 9px;
  color: #f4d9a4;
  margin-top: 24px;
  text-transform: uppercase;
}}

.desc {{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  margin-top: 20px;
  max-width: 480px;
  letter-spacing: 0.3px;
}}

/* Foto do professor - lado direito */
.figure-wrap {{
  position: absolute;
  right: -120px; bottom: 0;
  width: 700px; height: 1000px;
  z-index: 5;
}}
.figure-wrap img {{
  position: absolute;
  right: 0; bottom: 0;
  height: 1000px;
  width: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(178,150,255,0.18));
}}
.figure-fade {{
  position: absolute;
  right: 0; bottom: 0;
  width: 700px; height: 160px;
  background: linear-gradient(180deg, transparent 0%, rgba(6,4,14,0.85) 100%);
  z-index: 6;
  pointer-events: none;
}}

/* Nome do professor - RODAPE alinhado a esquerda (mesma margem 70px) */
.signature {{
  position: absolute;
  left: 70px; bottom: 70px;
  z-index: 7;
  display: flex; flex-direction: column;
  align-items: flex-start;
}}
.signature .role {{
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 4px; color: #f4d9a4;
  text-transform: uppercase;
}}
.signature .name {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px; letter-spacing: 2px;
  color: #ffffff;
  line-height: 1;
  margin-top: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}}
.signature .line {{
  width: 90px; height: 1px;
  background: linear-gradient(90deg, rgba(230,178,90,0.9), transparent);
  margin-top: 10px;
}}
</style></head>
<body>
  <div class="glow-gold"></div>
  <div class="glow-violet"></div>
  <div class="halo-figure"></div>

  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>

  <div class="figure-wrap">
    <img src="data:image/png;base64,{foto_b64}" alt="Prof. Francisco Borrello" />
  </div>
  <div class="figure-fade"></div>

  <div class="left">
    <div class="tag">Acesso Oficial Hotmart</div>
    <div class="cromo">CROMOTERAPIA</div>
    <div class="bridge">
      <span class="line"></span>
      <span class="txt">Estelar das Luzes Angelicais com</span>
    </div>
    <div class="radi">RADIESTESIA</div>
    <div class="pap">Passo a Passo</div>
    <div class="desc">A jornada oficial do Prof. Francisco Borrello para dominar as cores, os pendulos e as energias sutis das Luzes Angelicais.</div>
  </div>

  <div class="signature">
    <div class="role">Prof.</div>
    <div class="name">FRANCISCO BORRELLO</div>
    <div class="line"></div>
  </div>
</body></html>
"""


# ---------------------------------------------------------------------------
# BANNER 2 - 1290x500 (desktop horizontal)
# Layout: textos alinhados a esquerda (mesma margem 60px), foto a direita
# Sem bloco de preco. Nome do prof no rodape esquerdo alinhado com textos.
# ---------------------------------------------------------------------------

HTML_DESKTOP = f"""<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8">
<style>
{COMMON_FONTS}

* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{ width: 1290px; height: 500px; overflow: hidden; }}
body {{
  position: relative;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6,4,14,0.9) 0%, rgba(6,4,14,0.75) 45%, rgba(6,4,14,0.45) 70%, rgba(6,4,14,0.22) 100%),
    url(data:image/png;base64,{bg_b64}) center/cover no-repeat;
}}

.glow-gold {{
  position: absolute;
  top: 40px; left: 40px;
  width: 720px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(230,178,90,0.38) 0%, rgba(230,178,90,0.15) 40%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}}
.glow-violet {{
  position: absolute;
  top: 220px; left: 40px;
  width: 720px; height: 190px;
  background: radial-gradient(ellipse at center, rgba(178,150,255,0.36) 0%, rgba(178,150,255,0.14) 42%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}}
.halo-figure {{
  position: absolute;
  right: -80px; top: 50%;
  transform: translateY(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle at center, rgba(230,178,90,0.26) 0%, rgba(178,150,255,0.14) 40%, transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}}

.corner {{
  position: absolute; width: 38px; height: 38px;
  border-color: rgba(230,178,90,0.55);
  border-style: solid; border-width: 0;
}}
.corner.tl {{ top: 24px; left: 24px; border-top-width: 2px; border-left-width: 2px; }}
.corner.tr {{ top: 24px; right: 24px; border-top-width: 2px; border-right-width: 2px; }}
.corner.bl {{ bottom: 24px; left: 24px; border-bottom-width: 2px; border-left-width: 2px; }}
.corner.br {{ bottom: 24px; right: 24px; border-bottom-width: 2px; border-right-width: 2px; }}

/* Bloco textual: TODOS os itens (tag, titulos, subtitulo, nome) alinhados a esquerda em left=60 */
.left {{
  position: absolute;
  top: 60px; left: 60px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  max-width: 780px;
  z-index: 3;
}}

.tag {{
  border: 1px solid rgba(230,178,90,0.55);
  border-radius: 999px;
  padding: 6px 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 4px;
  color: #f4d9a4;
  text-transform: uppercase;
}}

.cromo {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 108px;
  line-height: 0.92;
  letter-spacing: 2px;
  margin-top: 14px;
  background: linear-gradient(180deg, #f6dfa8 0%, #e2ae5a 45%, #b6832f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 45px rgba(230,178,90,0.35);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}}

.bridge {{
  display: flex; align-items: center;
  gap: 12px;
  margin-top: 12px;
}}
.bridge .line {{
  flex: 0 0 38px;
  height: 1px;
  background: linear-gradient(90deg, rgba(230,178,90,0.7), transparent);
}}
.bridge .txt {{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3.2px;
  color: #ffffff;
  text-transform: uppercase;
}}

.radi {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 90px;
  line-height: 0.92;
  letter-spacing: 3px;
  margin-top: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #d8c9ff 55%, #a894f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(178,150,255,0.4);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
}}

.pap {{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 6px;
  color: #f4d9a4;
  margin-top: 12px;
  text-transform: uppercase;
}}

/* Foto do professor centro-direita */
.figure-wrap {{
  position: absolute;
  right: 40px; bottom: 0;
  height: 500px;
  z-index: 2;
}}
.figure-wrap img {{
  height: 500px;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(178,150,255,0.18));
}}
.figure-fade {{
  position: absolute;
  right: 40px; bottom: 0;
  width: 340px; height: 90px;
  background: linear-gradient(180deg, transparent 0%, rgba(6,4,14,0.9) 100%);
  z-index: 3;
  pointer-events: none;
}}

/* Nome do professor no rodape - mesma margem esquerda (60px) */
.signature {{
  position: absolute;
  left: 60px; bottom: 26px;
  z-index: 4;
  display: flex; align-items: center; gap: 12px;
}}
.signature .role {{
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 3px; color: #f4d9a4;
  text-transform: uppercase;
}}
.signature .line {{
  width: 22px; height: 1px;
  background: rgba(230,178,90,0.7);
}}
.signature .name {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 2px;
  color: #ffffff;
  line-height: 1;
}}
</style></head>
<body>
  <div class="glow-gold"></div>
  <div class="glow-violet"></div>
  <div class="halo-figure"></div>

  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>

  <div class="figure-wrap">
    <img src="data:image/png;base64,{foto_b64}" alt="Prof. Francisco Borrello" />
  </div>
  <div class="figure-fade"></div>

  <div class="left">
    <div class="tag">Acesso Oficial Hotmart</div>
    <div class="cromo">CROMOTERAPIA</div>
    <div class="bridge">
      <span class="line"></span>
      <span class="txt">Estelar das Luzes Angelicais com</span>
    </div>
    <div class="radi">RADIESTESIA</div>
    <div class="pap">Passo a Passo</div>
  </div>

  <div class="signature">
    <span class="role">Prof.</span>
    <span class="line"></span>
    <span class="name">FRANCISCO BORRELLO</span>
  </div>
</body></html>
"""


def render_html(html: str, out_png: Path, out_jpg: Path, w: int, h: int):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": w, "height": h}, device_scale_factor=2)
        page.set_content(html, wait_until="networkidle")
        page.screenshot(path=str(out_png), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()

    from PIL import Image
    img = Image.open(out_png).convert("RGB")
    # o screenshot vem em 2x por causa do device_scale_factor
    if img.size != (w, h):
        img = img.resize((w, h), Image.LANCZOS)
    img.save(out_jpg, "JPEG", quality=92, optimize=True)
    print(f"OK -> {out_jpg}  ({img.size[0]}x{img.size[1]})")


if __name__ == "__main__":
    render_html(
        HTML_SQUARE,
        BASE / "checkout_1x1.png",
        BASE / "checkout_1x1.jpg",
        1080, 1080,
    )
    render_html(
        HTML_DESKTOP,
        BASE / "checkout_desktop.png",
        BASE / "checkout_desktop.jpg",
        1290, 500,
    )
