#!/usr/bin/env python3
"""Renderiza o Post B1 (Lancamento) 1080x1080 - 100% HTML/CSS/SVG.
Peca tipografica: Bagua grande watermark + headline + CTA WhatsApp dourado.
"""
from playwright.sync_api import sync_playwright
import os

DESTINO = "/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/output/02-post-lancamento.png"

# Bagua grande pra watermark central. Mesmo do anterior mas maior (720px) e mais sutil (opacity 0.15-0.18)
BAGUA_BIG = """
<svg viewBox="0 0 720 720" xmlns="http://www.w3.org/2000/svg" class="bagua-big">
  <defs>
    <radialGradient id="halo-b1" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#E6B324" stop-opacity="0.15"/>
      <stop offset="55%" stop-color="#E6B324" stop-opacity="0.06"/>
      <stop offset="100%" stop-color="#E6B324" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <circle cx="360" cy="360" r="360" fill="url(#halo-b1)"/>
  <!-- Octogono externo -->
  <polygon points="360,40 580,140 660,360 580,580 360,680 140,580 60,360 140,140"
           fill="none" stroke="#E6B324" stroke-width="1.5" stroke-opacity="0.40"/>
  <!-- Octogono medio -->
  <polygon points="360,130 510,200 570,360 510,520 360,590 210,520 150,360 210,200"
           fill="none" stroke="#E6B324" stroke-width="1" stroke-opacity="0.22"/>
  <!-- Octogono interno -->
  <polygon points="360,220 450,260 490,360 450,460 360,500 270,460 230,360 270,260"
           fill="none" stroke="#E6B324" stroke-width="0.8" stroke-opacity="0.18"/>
  <!-- 8 linhas radiais finas -->
  <g stroke="#E6B324" stroke-width="0.8" stroke-opacity="0.20">
    <line x1="360" y1="360" x2="360" y2="60"/>
    <line x1="360" y1="360" x2="565" y2="155"/>
    <line x1="360" y1="360" x2="640" y2="360"/>
    <line x1="360" y1="360" x2="565" y2="565"/>
    <line x1="360" y1="360" x2="360" y2="660"/>
    <line x1="360" y1="360" x2="155" y2="565"/>
    <line x1="360" y1="360" x2="80" y2="360"/>
    <line x1="360" y1="360" x2="155" y2="155"/>
  </g>
  <!-- 8 pontos vertices -->
  <g fill="#E6B324" fill-opacity="0.55">
    <circle cx="360" cy="40" r="6"/>
    <circle cx="580" cy="140" r="6"/>
    <circle cx="660" cy="360" r="6"/>
    <circle cx="580" cy="580" r="6"/>
    <circle cx="360" cy="680" r="6"/>
    <circle cx="140" cy="580" r="6"/>
    <circle cx="60" cy="360" r="6"/>
    <circle cx="140" cy="140" r="6"/>
  </g>
  <circle cx="360" cy="360" r="5" fill="#E6B324" fill-opacity="0.5"/>
</svg>
"""

# Icone WhatsApp dourado monocromatico
WHATSAPP_SVG = """
<svg width="40" height="40" 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>
"""

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: 1080px; overflow: hidden; }}
body {{
  font-family: 'Montserrat', sans-serif;
  background: #1A1A2E;
  position: relative;
  color: #fff;
}}

/* Grade dourada sutil 54x54px */
.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 radial geral - dar profundidade */
.glow-overlay {{
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(circle at center, rgba(230,179,36,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}}

/* Bagua watermark grande centralizado */
.bagua-watermark {{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  z-index: 3;
}}

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

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

/* Headline central */
.headline {{
  position: absolute;
  top: 240px; left: 60px; right: 60px;
  text-align: center;
  z-index: 20;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 78px;
  line-height: 1.12;
  color: #fff;
  letter-spacing: -1px;
}}
.headline .gold {{ color: #E6B324; }}
.headline .italic {{ font-style: italic; font-weight: 400; }}

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

/* Subheadline */
.subheadline {{
  position: absolute;
  top: 640px; left: 110px; right: 110px;
  text-align: center;
  z-index: 20;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.2px;
}}
.subheadline b {{ color: #fff; font-weight: 600; }}

/* CTA box dourado centralizado */
.cta-box {{
  position: absolute;
  top: 800px; left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: linear-gradient(180deg, #E6B324 0%, #D4A11E 100%);
  border-radius: 8px;
  padding: 22px 56px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1.8px;
  color: #1A1A2E;
  text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(230,179,36,0.25), 0 0 0 2px rgba(230,179,36,0.15);
  display: flex;
  align-items: center;
  gap: 14px;
}}
.cta-box .wa-icon {{
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}}
.cta-box .wa-icon svg path {{ fill: #1A1A2E; fill-opacity: 1; }}

/* Detalhe inferior centralizado */
.bottom-detail {{
  position: absolute;
  bottom: 70px; left: 0; right: 0;
  text-align: center;
  z-index: 20;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 2.5px;
  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.85); font-weight: 600; }}
.bottom-detail .nome b.gold {{ color: #E6B324; }}

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

/* Diamante decorativo proximo ao eyebrow */
.diamond {{
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  border: 1px solid rgba(230,179,36,0.6);
  z-index: 15;
}}

</style>
</head>
<body>
  <div class="grid-overlay"></div>
  <div class="bagua-watermark">{BAGUA_BIG}</div>
  <div class="glow-overlay"></div>
  <div class="bar-top"></div>
  <div class="bar-bottom"></div>

  <div class="diamond"></div>
  <div class="eyebrow">AULA GRATUITA, AO VIVO</div>

  <div class="headline">
    Feng Shui:<br>
    <span class="gold">direções e posições</span><br>
    que te levantam
  </div>

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

  <div class="subheadline">
    Aprenda <b>Pa Chai</b> e seu <b>Número Kua</b> ao vivo e descubra<br>
    como se posicionar pra crescer na vida.
  </div>

  <div class="cta-box">
    <span class="wa-icon">{WHATSAPP_SVG}</span>
    <span>ENTRA NO GRUPO DO WHATSAPP</span>
  </div>

  <div class="bottom-detail">
    <span>TER 02/06 · 19H</span>
    <span class="sep">·</span>
    <span>YouTube</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/post_b1.html", "w") as f:
    f.write(HTML)

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1080, "height": 1080}, 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": 1080}, omit_background=False)
    browser.close()

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