"""
Reel A v2 - Curiosidade/Fenomeno (pendulo cinematico SVG puro, sem rosto do Borrello)
Estetica: fundo preto profundo, luz dramatica dourada, tipografia serifada elegante
Diferenciacao vs Reels 2: sem ambiente domestico, sem mulher, sem mapa colorido, sem Borrello (esse vai no Reel B)
"""
from playwright.sync_api import sync_playwright
import os

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)

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; }
  .bg {
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 55% 45% at 50% 40%, rgba(212, 155, 65, 0.4), transparent 65%),
      radial-gradient(ellipse 80% 60% at 75% 85%, rgba(30, 20, 50, 0.5), transparent 70%),
      linear-gradient(180deg, #0a0806 0%, #100a08 45%, #05030a 100%);
  }
  .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.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay; opacity: .45;
  }
  .dust {
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 15% 15%, rgba(220,180,110,.55) 0, transparent 2px),
      radial-gradient(circle at 82% 30%, rgba(220,180,110,.4) 0, transparent 1.5px),
      radial-gradient(circle at 40% 75%, rgba(220,180,110,.45) 0, transparent 2px),
      radial-gradient(circle at 65% 88%, rgba(220,180,110,.3) 0, transparent 1.5px),
      radial-gradient(circle at 25% 55%, rgba(220,180,110,.35) 0, transparent 1px),
      radial-gradient(circle at 90% 12%, rgba(220,180,110,.3) 0, transparent 1px),
      radial-gradient(circle at 8% 78%, rgba(220,180,110,.35) 0, transparent 1.5px);
  }
  .vignette {
    position:absolute; inset:0;
    background: radial-gradient(ellipse 95% 95% at 50% 50%, transparent 40%, rgba(0,0,0,.9) 100%);
    pointer-events: none;
  }
  .content {
    position:relative; z-index:5;
    padding: 0 90px; text-align:center; width:100%;
  }
  .kicker {
    font-family:'Inter',sans-serif; font-weight:500;
    font-size: 42px; letter-spacing: 8px;
    text-transform: uppercase;
    color: #d4a04c;
    margin-bottom: 45px;
    opacity: .9;
  }
  h1 {
    font-family:'Cormorant Garamond',serif;
    font-weight: 400;
    font-size: 145px;
    line-height: 1;
    color: #f4e9d0;
    letter-spacing: -2px;
  }
  h1 em { font-style: italic; color: #e8c479; font-weight: 500; }
  h1 .strong { font-weight: 700; color: #f4e9d0; font-style:normal; }
  .sub {
    font-family:'Cormorant Garamond',serif;
    font-weight: 300;
    font-size: 68px;
    line-height: 1.2;
    color: #cfc2a4;
    margin-top: 40px;
  }
  .cta_url {
    font-family: 'Inter',sans-serif;
    font-weight: 500;
    font-size: 44px;
    letter-spacing: 1px;
    color: #f4e9d0;
    background: rgba(212, 155, 65, .18);
    border: 2px solid rgba(212, 155, 65, .55);
    padding: 30px 40px;
    border-radius: 14px;
    margin-top: 65px;
    display: inline-block;
  }
  /* PENDULO SVG - central */
  .pendulo_stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .pendulo_svg {
    width: 500px;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(-25px -10px 30px rgba(240, 200, 120, .25));
  }
  .halo {
    position: absolute;
    width: 700px; height: 700px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(240, 200, 120, .18), transparent 60%);
    z-index: 2;
    pointer-events: none;
  }
</style>
"""

# SVG do pendulo dourado (chain + brass tear-drop bob)
def pendulo_svg(sway=0):
    """sway: angulo em graus, para variacao entre frames"""
    return f"""
    <svg class="pendulo_svg" viewBox="0 0 500 1100" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="chain" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#8a6a35"/>
          <stop offset=".5" stop-color="#e8c479"/>
          <stop offset="1" stop-color="#8a6a35"/>
        </linearGradient>
        <radialGradient id="bob" cx=".35" cy=".3" r=".8">
          <stop offset="0" stop-color="#fff1c8"/>
          <stop offset=".3" stop-color="#e8c479"/>
          <stop offset=".7" stop-color="#a87a2e"/>
          <stop offset="1" stop-color="#3a2610"/>
        </radialGradient>
        <radialGradient id="bobhi" cx=".3" cy=".2" r=".3">
          <stop offset="0" stop-color="#ffffff" stop-opacity=".9"/>
          <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
        </radialGradient>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="4"/>
        </filter>
      </defs>
      <g transform="rotate({sway} 250 30)">
        <!-- fixation point top -->
        <circle cx="250" cy="20" r="8" fill="#5a4020"/>
        <!-- chain (small circles) -->
        <g stroke="url(#chain)" stroke-width="4" fill="none">
          <path d="M 250 30 L 250 800" stroke-width="3.5"/>
        </g>
        <!-- chain link pattern (ellipses) -->
        <g fill="none" stroke="#c19a58" stroke-width="2.2" opacity=".9">
          {"".join(f'<ellipse cx="250" cy="{50 + i*22}" rx="4.5" ry="10"/>' for i in range(34))}
        </g>
        <!-- ring above bob -->
        <ellipse cx="250" cy="810" rx="18" ry="8" fill="none" stroke="#c19a58" stroke-width="3.5"/>
        <!-- brass teardrop pendulum bob -->
        <path d="M 250 820
                 C 220 820 195 855 195 905
                 C 195 970 220 1035 250 1050
                 C 280 1035 305 970 305 905
                 C 305 855 280 820 250 820 Z"
              fill="url(#bob)"/>
        <!-- highlight -->
        <ellipse cx="230" cy="875" rx="22" ry="45" fill="url(#bobhi)"/>
        <!-- tip -->
        <path d="M 240 1045 L 250 1075 L 260 1045 Z" fill="#a87a2e"/>
      </g>
    </svg>
    """

def render(name, body_html):
    html = f"<!DOCTYPE html><html><head>{HEAD}</head><body>{body_html}</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=f"{FRAMES}/{name}.png", clip={"x":0,"y":0,"width":W,"height":H})
        browser.close()

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

# SCENE 1: HOOK - pendulo + pergunta
scene1 = f"""
<div class="bg"></div>
<div class="dust"></div>
<div class="halo"></div>
<div class="pendulo_stage" style="align-items:flex-start; padding-top:280px;">
  {pendulo_svg(sway=-8)}
</div>
<div class="grain"></div>
<div class="vignette"></div>
<div style="position:absolute; bottom:200px; left:0; right:0; text-align:center; z-index:6; padding: 0 80px;">
  <div class="kicker">Já ouviu falar em</div>
  <h1><em>Radiestesia?</em></h1>
</div>
"""

# SCENE 2: WHAT IT IS - pendulo + explicacao curiosidade
scene2 = f"""
<div class="bg"></div>
<div class="dust"></div>
<div class="halo"></div>
<div class="pendulo_stage" style="align-items:flex-start; padding-top:250px;">
  {pendulo_svg(sway=5)}
</div>
<div class="grain"></div>
<div class="vignette"></div>
<div style="position:absolute; bottom:180px; left:0; right:0; text-align:center; z-index:6; padding: 0 70px;">
  <div class="kicker">A arte de sentir</div>
  <h1 style="font-size:110px; line-height:1.05;">O que sua mente<br><em>não vê.</em></h1>
</div>
"""

# SCENE 3: WHAT IT REVEALS - 4 areas
scene3 = """
<div class="bg"></div>
<div class="dust"></div>
<div class="grain"></div>
<div class="vignette"></div>
<div class="content" style="position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);">
  <div class="kicker">O que ela revela</div>
  <h1 style="font-size:118px; line-height:1.08;">Sobre seu <em>corpo</em>.<br>Sobre seu <em>lar</em>.<br>Sobre suas <em>decisões</em>.<br>Sobre suas <em>relações</em>.</h1>
</div>
"""

# SCENE 4: CTA
scene4 = """
<div class="bg"></div>
<div class="dust"></div>
<div class="grain"></div>
<div class="vignette"></div>
<div class="content" style="position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);">
  <div class="kicker">Aprenda do começo</div>
  <h1 style="font-size:130px; line-height:1;">Passo a passo<br>da <em>Radiestesia</em></h1>
  <div class="sub" style="margin-top:55px;">Método completo com<br>Prof. Francisco Borrello</div>
  <div class="cta_url">passoapasso.franciscoborrello.com.br</div>
</div>
"""

scenes = [
    ("scene_01", scene1),
    ("scene_02", scene2),
    ("scene_03", scene3),
    ("scene_04", scene4),
]
for name, body in scenes:
    render(name, body)
    print(f"OK {name}")
print("Reel A v2 - frames prontos")
