"""
Gera os 6 slides do carrossel da Clinica Lumiere.
Paleta: rose gold (#B76E79, #D4A574) + off-white (#FAF7F2) + nude.
Fontes: Playfair Display (titulos) + Montserrat (corpo).
"""
from playwright.sync_api import sync_playwright
from pathlib import Path

OUTPUT_DIR = Path("/opt/mia/workspace/clientes/clinica-estetica-teste")

# -----------------------------------------------------------------------------
# Base CSS comum a todos os slides
# -----------------------------------------------------------------------------
BASE_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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 1080px; height: 1080px; overflow: hidden; }
  body {
    font-family: 'Montserrat', sans-serif;
    color: #3C2A2E;
    -webkit-font-smoothing: antialiased;
  }
  .slide {
    position: relative;
    width: 1080px;
    height: 1080px;
    overflow: hidden;
  }
  .corner-ornament {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1.5px solid #B76E79;
  }
  .corner-tl { top: 60px; left: 60px; border-right: none; border-bottom: none; }
  .corner-tr { top: 60px; right: 60px; border-left: none; border-bottom: none; }
  .corner-bl { bottom: 60px; left: 60px; border-right: none; border-top: none; }
  .corner-br { bottom: 60px; right: 60px; border-left: none; border-top: none; }
  .brand {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: 8px;
    color: #B76E79;
    font-size: 22px;
    text-transform: uppercase;
  }
  .brand .divider {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: #B76E79;
    vertical-align: middle;
    margin: 0 18px 4px 18px;
  }
  .slide-number {
    position: absolute;
    top: 50px;
    right: 60px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #B76E79;
    font-size: 22px;
    letter-spacing: 2px;
    opacity: 0.85;
  }
</style>
"""


def render(html_body: str, out_name: str):
    full_html = f"""<!DOCTYPE html>
<html><head><meta charset="utf-8">{BASE_HEAD}</head>
<body>{html_body}</body></html>"""
    dest = OUTPUT_DIR / out_name
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": 1080, "height": 1080}, device_scale_factor=2)
        page.set_content(full_html, wait_until="networkidle")
        # extra para garantir que webfonts foram pintadas
        page.wait_for_timeout(800)
        page.screenshot(
            path=str(dest),
            clip={"x": 0, "y": 0, "width": 1080, "height": 1080},
            omit_background=False,
        )
        browser.close()
    print(f"OK -> {dest}")


# -----------------------------------------------------------------------------
# SLIDE 1 — CAPA
# -----------------------------------------------------------------------------
SLIDE_1 = """
<div class="slide" style="
  background:
    radial-gradient(circle at 30% 20%, rgba(212,165,116,0.18) 0%, transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(183,110,121,0.16) 0%, transparent 50%),
    linear-gradient(135deg, #FAF7F2 0%, #F3E9DE 100%);
">
  <div class="corner-ornament corner-tl" style="border-color:#B76E79;"></div>
  <div class="corner-ornament corner-tr" style="border-color:#B76E79;"></div>
  <div class="corner-ornament corner-bl" style="border-color:#B76E79;"></div>
  <div class="corner-ornament corner-br" style="border-color:#B76E79;"></div>

  <div style="
    position:absolute; top:0; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding: 0 130px; text-align:center;">

    <div style="
      font-family:'Cormorant Garamond', serif;
      color:#B76E79; font-size:26px; letter-spacing:14px;
      text-transform:uppercase; margin-bottom:50px; font-weight:500;">
      Harmonização Facial
    </div>

    <div style="
      width:100px; height:1px;
      background:linear-gradient(90deg, transparent, #B76E79, transparent);
      margin-bottom:50px;"></div>

    <h1 style="
      font-family:'Playfair Display', serif;
      font-weight:500;
      font-size:108px;
      line-height:1.05;
      color:#3C2A2E;
      letter-spacing:-2px;
      margin-bottom:14px;">
      Você, <em style="
        font-style:italic;
        background: linear-gradient(135deg, #B76E79 0%, #D4A574 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;">só que mais</em>
    </h1>
    <h1 style="
      font-family:'Playfair Display', serif;
      font-weight:500;
      font-size:108px;
      line-height:1.05;
      color:#3C2A2E;
      letter-spacing:-2px;
      margin-bottom:55px;
      font-style:italic;
      background: linear-gradient(135deg, #B76E79 0%, #D4A574 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;">
      você.
    </h1>

    <div style="
      font-family:'Cormorant Garamond', serif;
      font-style:italic;
      color:#7A5A5F;
      font-size:32px;
      line-height:1.5;
      max-width:760px;
      font-weight:400;">
      A harmonização que ninguém percebe,<br>
      mas todo mundo nota.
    </div>
  </div>

  <div class="brand">
    <span class="divider"></span>Clínica Lumière<span class="divider"></span>
  </div>
</div>
"""

# -----------------------------------------------------------------------------
# Funcao auxiliar para slides de conteudo (2 a 5)
# -----------------------------------------------------------------------------
def slide_conteudo(numero: int, tag: str, titulo_html: str, corpo_html: str) -> str:
    return f"""
<div class="slide" style="
  background:
    radial-gradient(circle at 80% 10%, rgba(212,165,116,0.14) 0%, transparent 45%),
    radial-gradient(circle at 10% 95%, rgba(183,110,121,0.12) 0%, transparent 45%),
    linear-gradient(160deg, #FAF7F2 0%, #F5ECE0 100%);
">
  <div class="corner-ornament corner-tl"></div>
  <div class="corner-ornament corner-br"></div>

  <div class="slide-number">{numero} / 06</div>

  <div style="
    position:absolute; top:0; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; justify-content:center;
    padding: 130px 130px 160px 130px;">

    <div style="
      font-family:'Montserrat', sans-serif;
      font-weight:500;
      font-size:20px;
      letter-spacing:6px;
      text-transform:uppercase;
      color:#B76E79;
      margin-bottom:32px;">
      {tag}
    </div>

    <h2 style="
      font-family:'Playfair Display', serif;
      font-weight:500;
      font-size:78px;
      line-height:1.08;
      color:#3C2A2E;
      letter-spacing:-1.5px;
      margin-bottom:40px;">
      {titulo_html}
    </h2>

    <div style="
      width:80px; height:2px;
      background:linear-gradient(90deg, #B76E79 0%, #D4A574 100%);
      margin-bottom:40px;"></div>

    <div style="
      font-family:'Montserrat', sans-serif;
      font-weight:400;
      font-size:30px;
      line-height:1.55;
      color:#5A4347;
      max-width:820px;">
      {corpo_html}
    </div>
  </div>

  <div class="brand">
    <span class="divider"></span>Clínica Lumière<span class="divider"></span>
  </div>
</div>
"""


# -----------------------------------------------------------------------------
# SLIDES 2 a 5
# -----------------------------------------------------------------------------
SLIDE_2 = slide_conteudo(
    numero="02",
    tag="Naturalidade Real",
    titulo_html="O fim do<br>rosto <em style='font-style:italic; background:linear-gradient(135deg,#B76E79,#D4A574); -webkit-background-clip:text; -webkit-text-fill-color:transparent;'>artificial</em>",
    corpo_html=(
        "Harmonização bem feita não muda quem você é.<br>"
        "Ela devolve o equilíbrio que o tempo levou.<br><br>"
        "<span style='font-family:Cormorant Garamond,serif; font-style:italic; font-size:34px; color:#B76E79;'>"
        "Sutil. Elegante. Inconfundivelmente seu.</span>"
    ),
)

SLIDE_3 = slide_conteudo(
    numero="03",
    tag="Rejuvenescimento Sem Cirurgia",
    titulo_html="Anos a menos,<br><em style='font-style:italic; background:linear-gradient(135deg,#B76E79,#D4A574); -webkit-background-clip:text; -webkit-text-fill-color:transparent;'>zero bisturi</em>",
    corpo_html=(
        "Técnicas avançadas com bioestimuladores e ácido hialurônico "
        "devolvem firmeza e viço.<br><br>"
        "Resultado progressivo, recuperação rápida, vida normal no mesmo dia."
    ),
)

SLIDE_4 = slide_conteudo(
    numero="04",
    tag="Proporção e Equilíbrio",
    titulo_html="A <em style='font-style:italic; background:linear-gradient(135deg,#B76E79,#D4A574); -webkit-background-clip:text; -webkit-text-fill-color:transparent;'>matemática</em><br>da beleza",
    corpo_html=(
        "Cada rosto tem proporções únicas.<br>"
        "Nosso protocolo mapeia traços, ângulos e volumes "
        "para realçar o que já é belo em você.<br><br>"
        "<span style='font-family:Cormorant Garamond,serif; font-style:italic; font-size:34px; color:#B76E79;'>"
        "Sem padrão. Sem exagero.</span>"
    ),
)

SLIDE_5 = slide_conteudo(
    numero="05",
    tag="Autoestima Que Se Sente",
    titulo_html="Espelho<br>como <em style='font-style:italic; background:linear-gradient(135deg,#B76E79,#D4A574); -webkit-background-clip:text; -webkit-text-fill-color:transparent;'>aliado</em>",
    corpo_html=(
        "A maior mudança não está no rosto, está no olhar.<br>"
        "Pacientes relatam mais segurança, mais leveza, mais presença.<br><br>"
        "<span style='font-family:Cormorant Garamond,serif; font-style:italic; font-size:34px; color:#B76E79;'>"
        "Beleza que começa por dentro.</span>"
    ),
)

# -----------------------------------------------------------------------------
# SLIDE 6 — CTA (cores invertidas: fundo rose gold escuro)
# -----------------------------------------------------------------------------
SLIDE_6 = """
<div class="slide" style="
  background:
    radial-gradient(circle at 25% 15%, rgba(212,165,116,0.30) 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(250,247,242,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #6B3A42 0%, #8B4F5A 50%, #B76E79 100%);
">
  <div class="corner-ornament corner-tl" style="border-color:#E8C7A8;"></div>
  <div class="corner-ornament corner-tr" style="border-color:#E8C7A8;"></div>
  <div class="corner-ornament corner-bl" style="border-color:#E8C7A8;"></div>
  <div class="corner-ornament corner-br" style="border-color:#E8C7A8;"></div>

  <div style="
    position:absolute; top:0; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding: 0 110px; text-align:center;">

    <div style="
      font-family:'Cormorant Garamond', serif;
      color:#E8C7A8; font-size:22px; letter-spacing:10px;
      text-transform:uppercase; margin-bottom:40px; font-weight:500;">
      Sua avaliação personalizada
    </div>

    <div style="
      width:80px; height:1px;
      background:linear-gradient(90deg, transparent, #E8C7A8, transparent);
      margin-bottom:45px;"></div>

    <h2 style="
      font-family:'Playfair Display', serif;
      font-weight:500;
      font-size:64px;
      line-height:1.15;
      color:#FAF7F2;
      letter-spacing:-1px;
      margin-bottom:55px;
      max-width:860px;">
      Sua melhor versão<br>
      <em style="font-style:italic; color:#E8C7A8;">merece as melhores mãos.</em>
    </h2>

    <div style="
      font-family:'Montserrat', sans-serif;
      font-weight:400;
      font-size:24px;
      line-height:1.55;
      color:#F3E0D0;
      max-width:760px;
      margin-bottom:55px;">
      Agende sua avaliação personalizada.<br>
      Nossa equipe retorna em até 2 horas.
    </div>

    <div style="
      background: linear-gradient(135deg, #FAF7F2 0%, #F3E0D0 100%);
      color: #6B3A42;
      padding: 28px 70px;
      border-radius: 6px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 26px;
      letter-spacing: 4px;
      text-transform: uppercase;
      box-shadow: 0 10px 40px rgba(0,0,0,0.25);
      margin-bottom: 45px;">
      Mande &quot;LUMIÈRE&quot; no direct
    </div>

    <div style="
      font-family:'Cormorant Garamond', serif;
      font-style:italic;
      font-size:30px;
      color:#FAF7F2;
      letter-spacing:1px;">
      @clinicalumiere
    </div>
  </div>

  <div class="brand" style="color:#E8C7A8;">
    <span class="divider" style="background:#E8C7A8;"></span>Clínica Lumière<span class="divider" style="background:#E8C7A8;"></span>
  </div>
</div>
"""

# -----------------------------------------------------------------------------
# Pipeline
# -----------------------------------------------------------------------------
if __name__ == "__main__":
    render(SLIDE_1, "slide_1.png")
    render(SLIDE_2, "slide_2.png")
    render(SLIDE_3, "slide_3.png")
    render(SLIDE_4, "slide_4.png")
    render(SLIDE_5, "slide_5.png")
    render(SLIDE_6, "slide_6.png")
    print("\nTodos os slides gerados.")
