#!/usr/bin/env python3
"""Renderiza o Story C4 (Vespera + Promessa Central) 1080x1920 - 100% HTML/CSS/SVG.
Carrega a promessa "PODE SER VOCE A ESCOLHIDA AO VIVO" como eyecatcher.
"""
from playwright.sync_api import sync_playwright
import os

DESTINO = "/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/output/03-story-vespera.png"

WHATSAPP_SVG = """
<svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 3C8.82 3 3 8.82 3 16c0 2.29.6 4.44 1.65 6.31L3 29l6.85-1.62A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm6.85 18.61c-.29.81-1.42 1.49-2.34 1.69-.62.13-1.43.23-4.18-.9-3.51-1.45-5.77-5.02-5.94-5.25-.18-.23-1.42-1.89-1.42-3.6 0-1.71.9-2.55 1.22-2.9.32-.35.7-.44.93-.44.23 0 .47 0 .67.01.21.01.5-.08.78.6.29.7.99 2.41 1.08 2.59.09.18.15.39.03.62-.12.23-.18.37-.35.57-.18.21-.37.46-.53.62-.18.18-.36.37-.16.72.21.35.93 1.54 2 2.49 1.37 1.22 2.53 1.6 2.88 1.78.35.18.55.15.76-.09.21-.23.87-1.02 1.1-1.37.23-.35.46-.29.78-.18.32.12 2.03.96 2.38 1.13.35.18.58.26.67.41.09.15.09.87-.21 1.69z" fill="#E6B324" fill-opacity="0.92"/>
</svg>
"""

WHATSAPP_INLINE_DARK = """
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 3C8.82 3 3 8.82 3 16c0 2.29.6 4.44 1.65 6.31L3 29l6.85-1.62A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3zm6.85 18.61c-.29.81-1.42 1.49-2.34 1.69-.62.13-1.43.23-4.18-.9-3.51-1.45-5.77-5.02-5.94-5.25-.18-.23-1.42-1.89-1.42-3.6 0-1.71.9-2.55 1.22-2.9.32-.35.7-.44.93-.44.23 0 .47 0 .67.01.21.01.5-.08.78.6.29.7.99 2.41 1.08 2.59.09.18.15.39.03.62-.12.23-.18.37-.35.57-.18.21-.37.46-.53.62-.18.18-.36.37-.16.72.21.35.93 1.54 2 2.49 1.37 1.22 2.53 1.6 2.88 1.78.35.18.55.15.76-.09.21-.23.87-1.02 1.1-1.37.23-.35.46-.29.78-.18.32.12 2.03.96 2.38 1.13.35.18.58.26.67.41.09.15.09.87-.21 1.69z" fill="#1A1A2E"/>
</svg>
"""

# Rosa dos ventos sutil pra dar profundidade no rodape
ROSE_SVG = """
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg" class="rose-svg">
  <defs>
    <radialGradient id="rose-halo" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#E6B324" stop-opacity="0.10"/>
      <stop offset="60%" stop-color="#E6B324" stop-opacity="0.04"/>
      <stop offset="100%" stop-color="#E6B324" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <circle cx="300" cy="300" r="300" fill="url(#rose-halo)"/>
  <!-- Estrela de 8 pontas (rosa dos ventos) -->
  <g stroke="#E6B324" stroke-width="1" stroke-opacity="0.30" fill="none">
    <!-- Linhas principais N/S/L/O -->
    <line x1="300" y1="40" x2="300" y2="560"/>
    <line x1="40" y1="300" x2="560" y2="300"/>
    <!-- Diagonais NE/SO/NO/SE -->
    <line x1="115" y1="115" x2="485" y2="485"/>
    <line x1="485" y1="115" x2="115" y2="485"/>
  </g>
  <!-- Losangos pontas principais -->
  <g fill="#E6B324" fill-opacity="0.22">
    <polygon points="300,40 320,300 300,80 280,300"/>
    <polygon points="40,300 300,320 80,300 300,280"/>
    <polygon points="560,300 300,320 520,300 300,280"/>
    <polygon points="300,560 320,300 300,520 280,300"/>
  </g>
  <!-- Circulo central -->
  <circle cx="300" cy="300" r="35" fill="none" stroke="#E6B324" stroke-width="1" stroke-opacity="0.35"/>
  <circle cx="300" cy="300" r="55" fill="none" stroke="#E6B324" stroke-width="0.6" stroke-opacity="0.20"/>
  <circle cx="300" cy="300" r="8" fill="#E6B324" fill-opacity="0.40"/>
</svg>
"""

HTML = f"""<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{ width: 1080px; height: 1920px; overflow: hidden; }}
body {{
  font-family: 'Montserrat', sans-serif;
  background: #1A1A2E;
  position: relative;
  color: #fff;
}}

/* Grade dourada sutil */
.grid-overlay {{
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(230,179,36,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,179,36,0.06) 1px, transparent 1px);
  background-size: 54px 54px;
}}

/* Halo geral, vinheta nas bordas */
.glow-overlay {{
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(circle at 50% 35%, rgba(230,179,36,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.40) 100%);
  pointer-events: none;
}}

/* Numero "1" gigante watermark */
.numero-watermark {{
  position: absolute;
  top: 380px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 720px;
  line-height: 1;
  color: #E6B324;
  opacity: 0.10;
  z-index: 3;
  letter-spacing: -20px;
  user-select: none;
}}

/* Rosa dos ventos sutil no rodape */
.rose-watermark {{
  position: absolute;
  top: 1280px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 720px;
  z-index: 3;
  opacity: 0.5;
}}

/* Barras douradas topo e base */
.bar-top, .bar-bottom {{
  position: absolute; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #E6B324, #FFBC7D, #E6B324);
  z-index: 30;
}}
.bar-top {{ top: 0; }}
.bar-bottom {{ bottom: 0; }}

/* Eyebrow topo */
.eyebrow {{
  position: absolute;
  top: 290px; left: 0; right: 0;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 6px;
  color: #E6B324;
  text-transform: uppercase;
  z-index: 20;
}}
.eyebrow::before, .eyebrow::after {{
  content: "—";
  margin: 0 18px;
  color: rgba(230,179,36,0.5);
}}

/* Headline promessa central */
.headline {{
  position: absolute;
  top: 430px; left: 40px; right: 40px;
  text-align: center;
  z-index: 20;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 124px;
  line-height: 1.04;
  color: #fff;
  letter-spacing: -2px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}}
.headline .gold {{ color: #E6B324; }}
.headline .small {{ font-size: 105px; }}

/* Divisor */
.divisor {{
  position: absolute;
  top: 920px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 2px;
  background: linear-gradient(90deg, transparent, #E6B324, transparent);
  z-index: 20;
}}

/* Subtexto explicacao */
.subtexto {{
  position: absolute;
  top: 970px; left: 100px; right: 100px;
  text-align: center;
  z-index: 20;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.3px;
}}
.subtexto b {{ color: #fff; font-weight: 600; }}
.subtexto .highlight {{ color: #E6B324; font-weight: 600; }}

/* Bloco countdown sticker placeholder visual (data 02/06) */
.countdown-block {{
  position: absolute;
  top: 1280px; left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  text-align: center;
  padding: 30px 50px;
  border: 1.5px solid rgba(230,179,36,0.35);
  border-radius: 14px;
  background: rgba(26,26,46,0.55);
  backdrop-filter: blur(2px);
}}
.countdown-block .label {{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 4px;
  color: rgba(230,179,36,0.85);
  text-transform: uppercase;
  margin-bottom: 8px;
}}
.countdown-block .data {{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 76px;
  line-height: 1;
  color: #fff;
}}
.countdown-block .data .sep {{ color: #E6B324; margin: 0 8px; }}
.countdown-block .hora {{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 4px;
  margin-top: 6px;
  text-transform: uppercase;
}}

/* CTA box dourado */
.cta-box {{
  position: absolute;
  top: 1560px; left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  background: linear-gradient(180deg, #E6B324 0%, #D4A11E 100%);
  border-radius: 10px;
  padding: 28px 60px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 2px;
  color: #1A1A2E;
  text-transform: uppercase;
  box-shadow: 0 12px 40px rgba(230,179,36,0.30), 0 0 0 3px rgba(230,179,36,0.15);
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}}

/* Rodape */
.bottom-detail {{
  position: absolute;
  bottom: 110px; left: 0; right: 0;
  text-align: center;
  z-index: 20;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 3px;
  text-transform: uppercase;
}}
.bottom-detail .sep {{ margin: 0 14px; color: rgba(230,179,36,0.6); }}
.bottom-detail b {{ color: rgba(255,255,255,0.92); font-weight: 600; }}
.bottom-detail .nome b.gold {{ color: #E6B324; }}

/* Icone WhatsApp canto inferior direito */
.wa-corner {{
  position: absolute;
  bottom: 105px; right: 50px;
  z-index: 25;
  width: 36px; height: 36px;
}}

/* Diamante topo */
.diamond {{
  position: absolute;
  top: 250px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  border: 1px solid rgba(230,179,36,0.65);
  z-index: 15;
}}

</style>
</head>
<body>
  <div class="grid-overlay"></div>
  <div class="numero-watermark">1</div>
  <div class="rose-watermark">{ROSE_SVG}</div>
  <div class="glow-overlay"></div>
  <div class="bar-top"></div>
  <div class="bar-bottom"></div>

  <div class="diamond"></div>
  <div class="eyebrow">VÉSPERA — AMANHÃ</div>

  <div class="headline">
    Pode ser você<br>
    <span class="gold">a escolhida</span><br>
    ao vivo.
  </div>

  <div class="divisor"></div>

  <div class="subtexto">
    Amanhã, <b>19h</b>.<br>
    Quem está no grupo do WhatsApp <span class="highlight">concorre</span> a ter<br>
    o Número Kua calculado ao vivo.
  </div>

  <div class="countdown-block">
    <div class="label">É AMANHÃ</div>
    <div class="data">02<span class="sep">/</span>06</div>
    <div class="hora">19H · YOUTUBE</div>
  </div>

  <div class="cta-box">
    <span style="display:flex;align-items:center;">{WHATSAPP_INLINE_DARK}</span>
    <span>ENTRA NO GRUPO DO WHATSAPP</span>
  </div>

  <div class="bottom-detail">
    <span>02/06 · 19H</span>
    <span class="sep">·</span>
    <span class="nome">Prof. Francisco <b class="gold">Borrello</b></span>
  </div>

  <div class="wa-corner">{WHATSAPP_SVG}</div>
</body>
</html>"""

with open("/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/temp/story_c4.html", "w") as f:
    f.write(HTML)

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1080, "height": 1920}, device_scale_factor=1)
    page.set_content(HTML, wait_until="networkidle")
    page.wait_for_timeout(1500)
    page.screenshot(path=DESTINO, clip={"x": 0, "y": 0, "width": 1080, "height": 1920}, omit_background=False)
    browser.close()

print(f"OK: {DESTINO}")
print(f"Tamanho: {os.path.getsize(DESTINO)/1024:.1f} KB")
