"""
Reel A - Curiosidade/Fenomeno (pendulo cinematico)
Estetica: fundo preto profundo, luz dramatica, tipografia serifada elegante
Diferenciacao vs Reels 2: sem ambiente domestico, sem mulher, sem mapa colorido
"""
from playwright.sync_api import sync_playwright
import os, subprocess, shutil, base64

W, H = 1080, 1920
OUT = "/opt/mia/workspace/clientes/borrello/criativos_meta_aniversario/pipeline_v4"
FRAMES = f"{OUT}/frames_a"
os.makedirs(FRAMES, exist_ok=True)

# Load pendulo photo as base64 (Borrello com pendulo, fundo transparente)
PENDULO_IMG = "/opt/mia/workspace/clientes/francisco_borrello/_recortes/_MG_9366_cutout.png"
with open(PENDULO_IMG, "rb") as f:
    pendulo_b64 = base64.b64encode(f.read()).decode()

# Common styles - cinematic dark background
COMMON_HEAD = """
<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:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    margin:0; overflow:hidden;
    width: 1080px; height: 1920px;
    font-family: 'Inter', sans-serif;
    color: #f4e9d0;
    background: #050505;
    position: relative;
  }
  .stage {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: hidden;
  }
  /* deep cinematic background: dark navy with warm gold light coming from left */
  .bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 25% 35%, rgba(212, 155, 65, 0.35), transparent 70%),
      radial-gradient(ellipse 80% 60% at 75% 75%, rgba(30, 20, 50, 0.6), transparent 70%),
      linear-gradient(180deg, #08060a 0%, #100a08 40%, #05030a 100%);
  }
  /* subtle grain texture via svg noise */
  .grain {
    position: absolute; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.5  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.4;
  }
  /* floating dust particles */
  .dust {
    position: absolute; inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(220,180,110,.6) 0, transparent 2px),
      radial-gradient(circle at 82% 35%, rgba(220,180,110,.4) 0, transparent 1.5px),
      radial-gradient(circle at 40% 70%, rgba(220,180,110,.5) 0, transparent 2px),
      radial-gradient(circle at 65% 85%, rgba(220,180,110,.35) 0, transparent 1.5px),
      radial-gradient(circle at 25% 55%, rgba(220,180,110,.4) 0, transparent 1px),
      radial-gradient(circle at 90% 15%, rgba(220,180,110,.3) 0, transparent 1px);
  }
  .vignette {
    position: absolute; inset:0;
    background: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
  }
  .content {
    position: relative;
    z-index: 3;
    padding: 0 90px;
    text-align: center;
    width: 100%;
  }
  .kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 40px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #d4a04c;
    margin-bottom: 40px;
    opacity: .85;
  }
  h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 140px;
    line-height: 1.02;
    color: #f4e9d0;
    letter-spacing: -1px;
  }
  h1 em {
    font-style: italic;
    color: #e8c479;
    font-weight: 500;
  }
  h1 .strong {
    font-weight: 700;
    font-style: normal;
    color: #f4e9d0;
  }
  .sub {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 72px;
    line-height: 1.15;
    color: #cfc2a4;
    margin-top: 30px;
  }
  .cta_url {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 44px;
    letter-spacing: 1px;
    color: #f4e9d0;
    background: rgba(212, 155, 65, .15);
    border: 2px solid rgba(212, 155, 65, .5);
    padding: 28px 44px;
    border-radius: 12px;
    margin-top: 60px;
    display: inline-block;
  }
  .pendulo_wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .pendulo_wrap img {
    height: 105%;
    max-width: none;
    object-fit: contain;
    filter: brightness(1.02) contrast(1.05);
  }
  /* dramatic side light on pendulo */
  .pendulo_light {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 45% 55% at 30% 40%, rgba(240, 200, 120, .28), transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
  }
</style>
"""

def render_frame(html_body, out_path):
    html = f"""<!DOCTYPE html><html><head>{COMMON_HEAD}</head><body>{html_body}</body></html>"""
    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.wait_for_timeout(400)
        page.screenshot(path=out_path, clip={"x":0,"y":0,"width":W,"height":H})
        browser.close()

# ==================== SCENES ====================

# SCENE 1: Hook - "Isto nao e magia."
scene1 = """
<div class="stage">
  <div class="bg"></div>
  <div class="dust"></div>
  <div class="grain"></div>
  <div class="content">
    <div class="kicker">Uma verdade antiga</div>
    <h1>Isto não é<br><em>magia.</em></h1>
  </div>
  <div class="vignette"></div>
</div>
"""

# SCENE 2: Reveal - pendulo photo with subtle text
scene2_body = f"""
<div class="stage">
  <div class="bg"></div>
  <div class="pendulo_wrap">
    <img src="data:image/png;base64,{pendulo_b64}" />
  </div>
  <div class="pendulo_light"></div>
  <div class="dust"></div>
  <div class="grain"></div>
  <div class="vignette"></div>
  <div style="position:absolute; bottom:180px; left:0; right:0; z-index:5; text-align:center; padding: 0 60px;">
    <div class="kicker" style="margin-bottom:20px;">É uma ciência sutil.</div>
    <h1 style="font-size:120px;"><em>Radiestesia.</em></h1>
  </div>
</div>
"""

# SCENE 3: Promise - what it reveals
scene3 = """
<div class="stage">
  <div class="bg"></div>
  <div class="dust"></div>
  <div class="grain"></div>
  <div class="content">
    <div class="kicker">A arte de sentir</div>
    <h1>O que sua<br><em>mente</em><br><span class="strong">não vê.</span></h1>
    <div class="sub">Corpo. Ambiente.<br>Decisões. Relações.</div>
  </div>
  <div class="vignette"></div>
</div>
"""

# SCENE 4: CTA
scene4 = """
<div class="stage">
  <div class="bg"></div>
  <div class="dust"></div>
  <div class="grain"></div>
  <div class="content">
    <div class="kicker">Aprenda do começo</div>
    <h1 style="font-size:118px;">Passo a passo<br>da <em>Radiestesia.</em></h1>
    <div class="sub" style="margin-top:50px;">Método completo com<br>Prof. Francisco Borrello</div>
    <div class="cta_url">passoapasso.franciscoborrello.com.br</div>
  </div>
  <div class="vignette"></div>
</div>
"""

scenes = [
    ("scene_01", scene1),
    ("scene_02", scene2_body),
    ("scene_03", scene3),
    ("scene_04", scene4),
]

print("Renderizando frames Reel A...")
for name, body in scenes:
    out = f"{FRAMES}/{name}.png"
    render_frame(body, out)
    print(f"  {out}")

print("Frames prontos. Rode gerar_reel_a_video.py em seguida.")