#!/usr/bin/env python3
"""
Thumbs YouTube — Borrello vídeo "Câncer, depressão e divórcio na mesma casa"
3 variações A/B/C (1280x720)
"""
import base64, os, pathlib
from playwright.sync_api import sync_playwright

BASE = pathlib.Path("/opt/mia/workspace/clientes/francisco_borrello/youtube_video3")
FOTOS = pathlib.Path("/tmp/borrello_optimized")

def img_to_b64(path):
    with open(path, "rb") as f:
        return "data:image/png;base64," + base64.b64encode(f.read()).decode()

def html_para_png(html, destino, largura=1280, altura=720):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": largura, "height": altura})
        page.set_content(html, wait_until="networkidle")
        page.screenshot(path=str(destino), clip={"x": 0, "y": 0, "width": largura, "height": altura})
        browser.close()
    return destino

# ---------- ESTILO BASE ----------
BASE_CSS = """
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Montserrat:wght@800;900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 1280px; height: 720px; overflow: hidden; }
body {
  font-family: 'Anton', 'Bebas Neue', sans-serif;
  color: #fff;
  position: relative;
  background: #0a0a0a;
}
.wrap {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
}
.bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(180,20,20,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(90,10,10,0.75) 0%, transparent 60%),
    linear-gradient(135deg, #1a0505 0%, #050505 55%, #1a0505 100%);
}
.bg::after {
  content:'';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 6px);
  mix-blend-mode: overlay;
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.foto {
  position: absolute;
  bottom: 0;
  height: 720px;
  filter: drop-shadow(0 0 40px rgba(0,0,0,0.8)) contrast(1.08) saturate(0.9);
  z-index: 3;
}
.txt {
  position: absolute;
  z-index: 4;
  font-family: 'Anton', sans-serif;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-shadow:
    0 4px 0 #000,
    0 6px 20px rgba(0,0,0,0.9),
    0 0 40px rgba(0,0,0,0.9);
}
.selo {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 5;
  background: #ffcc00;
  color: #111;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 4px;
  padding: 10px 18px;
  border-radius: 4px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.5);
  transform: rotate(-3deg);
}
"""

# ---------- VARIAÇÃO A: CÂNCER, DEPRESSÃO, DIVÓRCIO ----------
def render_A():
    foto = img_to_b64(FOTOS / "_MG_9299.png")  # dedo apontando + serio
    html = f"""<!doctype html><html><head><meta charset='utf-8'>
    <style>{BASE_CSS}
    .foto-A {{ right: -100px; height: 820px; bottom: -50px; }}
    .overlay-dark-A {{
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 45%, transparent 65%);
      z-index: 2;
    }}
    .txt-A {{
      left: 44px; top: 60px;
      max-width: 720px;
      font-size: 108px;
      color: #fff;
    }}
    .word1-A {{ color: #ff2a2a; display:block; }}
    .word2-A {{ color: #ffcc00; display:block; }}
    .word3-A {{ color: #ff2a2a; display:block; }}
    .sub-A {{
      position: absolute; left: 44px; top: 480px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 38px;
      color: #fff;
      background: #d40000;
      padding: 12px 26px;
      letter-spacing: 3px;
      z-index: 4;
      box-shadow: 0 8px 0 rgba(0,0,0,0.7);
      transform: rotate(-1.5deg);
    }}
    .sub2-A {{
      position: absolute; left: 46px; top: 590px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 30px;
      color: #ffcc00;
      letter-spacing: 4px;
      z-index: 4;
      text-shadow: 0 3px 0 #000, 0 0 20px rgba(0,0,0,0.9);
      max-width: 640px;
    }}
    .sub2-A .alert {{
      display: inline-block;
      margin-right: 8px;
      color: #ffcc00;
    }}
    </style></head><body>
    <div class='wrap'>
      <div class='bg'></div>
      <img class='foto foto-A' src='{foto}'/>
      <div class='overlay-dark-A'></div>
      <div class='vignette'></div>
      <div class='txt txt-A'>
        <span class='word1-A'>CÂNCER,</span>
        <span class='word2-A'>DEPRESSÃO,</span>
        <span class='word3-A'>DIVÓRCIO</span>
      </div>
      <div class='sub-A'>NA MESMA CASA</div>
      <div class='sub2-A'><span class='alert'>&#9888;</span>NÃO É COINCIDÊNCIA</div>
      <div class='selo'>ALERTA</div>
    </div>
    </body></html>"""
    return html_para_png(html, BASE / "thumb_v1_A.png")

# ---------- VARIAÇÃO B: 3 TRAGÉDIAS. UMA CASA. ----------
def render_B():
    foto = img_to_b64(FOTOS / "_MG_9391.png")  # 3 dedos
    html = f"""<!doctype html><html><head><meta charset='utf-8'>
    <style>{BASE_CSS}
    .foto-B {{ left: -80px; height: 820px; bottom: -50px; }}
    .overlay-dark-B {{
      position: absolute; inset: 0;
      background: linear-gradient(-90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 45%, transparent 65%);
      z-index: 2;
    }}
    .txt-B {{
      right: 44px; top: 40px;
      max-width: 720px;
      text-align: right;
    }}
    .big3 {{
      display: block;
      font-size: 300px;
      line-height: 0.82;
      color: #ff2a2a;
      text-shadow:
        0 6px 0 #000,
        0 8px 30px rgba(255,20,20,0.5),
        0 0 50px rgba(0,0,0,0.9);
    }}
    .word-B {{
      display: block;
      font-size: 118px;
      color: #fff;
      line-height: 0.92;
      margin-top: -14px;
    }}
    .divider-B {{
      display: block;
      height: 6px;
      width: 320px;
      margin: 14px 0 12px auto;
      background: #ffcc00;
      box-shadow: 0 0 15px rgba(255,204,0,0.7);
    }}
    .word2-B {{
      display: block;
      font-size: 118px;
      color: #ffcc00;
      line-height: 0.92;
    }}
    .casa-icon-B {{
      display: inline-block;
      font-size: 90px;
      margin-right: 10px;
      vertical-align: middle;
      color: #ffcc00;
    }}
    </style></head><body>
    <div class='wrap'>
      <div class='bg'></div>
      <img class='foto foto-B' src='{foto}'/>
      <div class='overlay-dark-B'></div>
      <div class='vignette'></div>
      <div class='txt txt-B'>
        <span class='big3'>3</span>
        <span class='word-B'>TRAGÉDIAS</span>
        <span class='divider-B'></span>
        <span class='word2-B'>&#127968; UMA CASA</span>
      </div>
      <div class='selo'>FENG SHUI</div>
    </div>
    </body></html>"""
    return html_para_png(html, BASE / "thumb_v1_B.png")

# ---------- VARIAÇÃO C: A CASA QUE ADOECE VOCÊ ----------
def render_C():
    foto = img_to_b64(FOTOS / "_MG_9425.png")  # mao no peito, preocupado
    html = f"""<!doctype html><html><head><meta charset='utf-8'>
    <style>{BASE_CSS}
    .foto-C {{ right: -80px; height: 820px; bottom: -50px; }}
    .overlay-dark-C {{
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 70%, transparent 90%);
      z-index: 2;
    }}
    .txt-C {{
      left: 40px; top: 90px;
      max-width: 760px;
      font-size: 128px;
      line-height: 0.90;
    }}
    .word1-C {{ display:block; color:#fff; }}
    .word2-C {{ display:block; color:#fff; }}
    .word3-C {{
      display: inline-block;
      color: #ffcc00;
      background: #d40000;
      padding: 6px 26px;
      margin-top: 10px;
      transform: rotate(-2deg);
      box-shadow: 0 10px 0 rgba(0,0,0,0.7);
      font-size: 148px;
    }}
    .sub-C {{
      position: absolute; left: 44px; top: 620px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      font-size: 32px;
      color: #fff;
      letter-spacing: 3px;
      z-index: 4;
      text-shadow: 0 3px 0 #000, 0 0 20px rgba(0,0,0,0.9);
    }}
    .sub-C .destaque {{ color: #ff2a2a; }}
    </style></head><body>
    <div class='wrap'>
      <div class='bg'></div>
      <img class='foto foto-C' src='{foto}'/>
      <div class='overlay-dark-C'></div>
      <div class='vignette'></div>
      <div class='txt txt-C'>
        <span class='word1-C'>A CASA</span>
        <span class='word2-C'>QUE ADOECE</span>
        <span class='word3-C'>VOCÊ</span>
      </div>
      <div class='sub-C'>O QUE NINGUÉM TE <span class='destaque'>CONTOU</span></div>
      <div class='selo'>REVELAÇÃO</div>
    </div>
    </body></html>"""
    return html_para_png(html, BASE / "thumb_v1_C.png")

if __name__ == "__main__":
    os.makedirs(BASE, exist_ok=True)
    a = render_A(); print("A ok:", a)
    b = render_B(); print("B ok:", b)
    c = render_C(); print("C ok:", c)
