"""
Criativo 01 - Chácara Sonho Verde Top
Público: Empresarial | Formato: 1080x1350 (feed vertical Meta)
Piloto para validação do Renato
"""
import base64
from pathlib import Path
from playwright.sync_api import sync_playwright

BASE = Path('/opt/mia/workspace/clientes/chacara-sonho-verde')
OUT = BASE

def img_to_data_uri(path):
    b64 = base64.b64encode(Path(path).read_bytes()).decode()
    return f"data:image/jpeg;base64,{b64}"


# =========================================================
# V1A - Foto aérea (mostra o CONTEXTO "no alto da montanha")
# Composição: foto no topo com overlay verde escuro degradê,
# tipografia elegante em serif sobre o overlay, selo dourado CTA
# =========================================================

FOTO_100 = img_to_data_uri(BASE / 'fotos_originais/foto_100_treated.jpg')

HTML_V1A = 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;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  body {{ margin: 0; overflow: hidden; background: #0d1f14; font-family: 'Inter', sans-serif; }}
  .canvas {{
    width: 1080px; height: 1350px; position: relative; overflow: hidden;
    background: #0d1f14;
  }}
  /* Foto ocupa 70% superior */
  .hero {{
    position: absolute; top: 0; left: 0; width: 100%; height: 900px;
    background-image: url('{FOTO_100}');
    background-size: cover; background-position: center;
    filter: brightness(0.85) contrast(1.05) saturate(1.1);
  }}
  /* Gradiente sobre a foto (topo para transparente, base para verde escuro) */
  .hero-overlay {{
    position: absolute; top: 0; left: 0; width: 100%; height: 900px;
    background:
      linear-gradient(180deg, rgba(13,31,20,0.55) 0%, rgba(13,31,20,0.1) 30%, rgba(13,31,20,0.15) 60%, rgba(13,31,20,0.85) 90%, #0d1f14 100%);
  }}
  /* Selo pequeno no topo */
  .top-badge {{
    position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 22px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    color: #f8f6f0;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
    z-index: 3;
  }}
  .top-badge::before {{
    content: ''; width: 6px; height: 6px; background: #ffc107; border-radius: 50%;
    box-shadow: 0 0 8px #ffc107;
  }}

  /* Bloco de texto (posicionado embaixo da foto, sobre o gradiente verde) */
  .content {{
    position: absolute; bottom: 0; left: 0; width: 100%; height: 600px;
    padding: 0 70px 60px 70px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, #0d1f14 40%, #0d1f14 100%);
    z-index: 2;
  }}

  .ornament {{
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
  }}
  .ornament .line {{
    height: 1px; width: 60px; background: #ffc107;
  }}
  .ornament .dot {{
    width: 5px; height: 5px; background: #ffc107; transform: rotate(45deg);
  }}

  .headline {{
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 74px;
    line-height: 0.98;
    color: #f8f6f0;
    letter-spacing: -1.5px;
    margin-bottom: 26px;
    text-shadow: 0 6px 30px rgba(0,0,0,0.5);
  }}
  .headline em {{
    font-style: italic; font-weight: 400;
    color: #ffc107;
  }}

  .sub {{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.45;
    color: #d8e0d3;
    margin-bottom: 42px;
    max-width: 720px;
  }}
  .sub strong {{
    color: #f8f6f0;
    font-weight: 600;
  }}

  /* Info row: pontos-chave */
  .info-row {{
    display: flex; gap: 30px; margin-bottom: 42px;
  }}
  .info-item {{
    display: flex; flex-direction: column; gap: 4px;
  }}
  .info-item .label {{
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 500;
    color: #a8d5b5; letter-spacing: 2px; text-transform: uppercase;
  }}
  .info-item .value {{
    font-family: 'Playfair Display', serif;
    font-size: 26px; font-weight: 700; color: #f8f6f0;
  }}

  /* CTA */
  .cta-row {{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }}
  .cta {{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 36px;
    background: #ffc107;
    color: #0d1f14;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 16px;
    letter-spacing: 1.2px; text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(255,193,7,0.25);
  }}
  .cta .arrow {{
    display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
    background: #0d1f14; color: #ffc107; align-items: center; justify-content: center;
    font-size: 14px;
  }}
  .brand {{
    text-align: right;
  }}
  .brand .logo {{
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 700; color: #f8f6f0;
    line-height: 1.1;
  }}
  .brand .logo em {{
    color: #ffc107; font-style: italic; font-weight: 400;
  }}
  .brand .phone {{
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 500; color: #a8d5b5;
    margin-top: 4px; letter-spacing: 0.5px;
  }}
</style>
</head>
<body>
<div class="canvas">
  <div class="hero"></div>
  <div class="hero-overlay"></div>

  <div class="top-badge">Valinhos-SP · A 80 km de SP</div>

  <div class="content">
    <div class="ornament">
      <div class="line"></div>
      <div class="dot"></div>
      <div class="line"></div>
    </div>

    <h1 class="headline">Reunião de equipe<br><em>no alto da montanha</em></h1>

    <p class="sub">Um espaço para sua liderança <strong>respirar, alinhar visão e planejar o próximo ciclo</strong> longe do escritório. Estrutura completa para eventos corporativos.</p>

    <div class="info-row">
      <div class="info-item">
        <div class="label">Capacidade</div>
        <div class="value">Até 150</div>
      </div>
      <div class="info-item">
        <div class="label">Distância</div>
        <div class="value">80 km de SP</div>
      </div>
      <div class="info-item">
        <div class="label">Local</div>
        <div class="value">Valinhos</div>
      </div>
    </div>

    <div class="cta-row">
      <div class="cta">
        Consulte disponibilidade
        <span class="arrow">&rarr;</span>
      </div>
      <div class="brand">
        <div class="logo">Chácara <em>Sonho Verde Top</em></div>
        <div class="phone">(11) 94192-3232</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
"""


# =========================================================
# V1B - Foto do salão (foco na ESTRUTURA de reunião)
# Composição: split diagonal — foto do salão com overlay verde,
# painel textual lateral em verde-mata sólido
# =========================================================

FOTO_28 = img_to_data_uri(BASE / 'fotos_originais/foto_28_treated.jpg')

HTML_V1B = 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;0,900;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  * {{ margin: 0; padding: 0; box-sizing: border-box; }}
  body {{ margin: 0; overflow: hidden; background: #0d1f14; font-family: 'Inter', sans-serif; }}
  .canvas {{
    width: 1080px; height: 1350px; position: relative; overflow: hidden;
    background: #0d1f14;
  }}
  /* Foto ocupa a metade superior (60%) */
  .hero {{
    position: absolute; top: 0; left: 0; width: 100%; height: 810px;
    background-image: url('{FOTO_28}');
    background-size: cover; background-position: center;
    filter: brightness(0.72) contrast(1.15) saturate(1.05);
  }}
  /* Gradiente verde-mata sobre a foto */
  .hero-overlay {{
    position: absolute; top: 0; left: 0; width: 100%; height: 810px;
    background:
      linear-gradient(180deg,
        rgba(13,31,20,0.7) 0%,
        rgba(13,31,20,0.35) 30%,
        rgba(13,31,20,0.35) 60%,
        rgba(13,31,20,0.95) 100%);
  }}
  /* Tint verde-mata pra unificar visualmente com a paleta */
  .hero-tint {{
    position: absolute; top: 0; left: 0; width: 100%; height: 810px;
    background: rgba(21, 64, 36, 0.25);
    mix-blend-mode: multiply;
  }}

  /* Selo pequeno */
  .top-badge {{
    position: absolute; top: 44px; left: 60px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    color: #f8f6f0;
    font-size: 13px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
    z-index: 3;
  }}
  .top-badge::before {{
    content: ''; width: 6px; height: 6px; background: #ffc107; border-radius: 50%;
    box-shadow: 0 0 8px #ffc107;
  }}

  /* HEADLINE sobre a foto (metade superior) */
  .hero-text {{
    position: absolute; top: 320px; left: 60px; width: 960px;
    z-index: 2;
  }}
  .headline {{
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 82px;
    line-height: 0.96;
    color: #f8f6f0;
    letter-spacing: -2px;
    text-shadow: 0 8px 40px rgba(0,0,0,0.65);
  }}
  .headline em {{
    font-style: italic; font-weight: 400; color: #ffc107;
  }}

  /* Bloco inferior em verde-mata sólido */
  .content {{
    position: absolute; bottom: 0; left: 0; width: 100%; height: 540px;
    padding: 60px 60px 50px 60px;
    background: linear-gradient(180deg, #0d1f14 0%, #154024 100%);
    display: flex; flex-direction: column; justify-content: space-between;
  }}

  .sub-block {{ }}
  .sub {{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5;
    color: #d8e0d3;
    max-width: 780px;
  }}
  .sub strong {{ color: #f8f6f0; font-weight: 600; }}

  .feature-grid {{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 30px;
  }}
  .feature {{
    padding: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    text-align: center;
  }}
  .feature .num {{
    font-family: 'Playfair Display', serif;
    font-size: 32px; font-weight: 700; color: #ffc107;
    line-height: 1;
  }}
  .feature .label {{
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 500;
    color: #a8d5b5; letter-spacing: 2px; text-transform: uppercase;
    margin-top: 8px;
  }}

  .cta-row {{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }}
  .cta {{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 36px;
    background: #ffc107;
    color: #0d1f14;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 16px;
    letter-spacing: 1.2px; text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(255,193,7,0.25);
  }}
  .cta .arrow {{
    display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
    background: #0d1f14; color: #ffc107; align-items: center; justify-content: center;
    font-size: 14px;
  }}
  .brand {{ text-align: right; }}
  .brand .logo {{
    font-family: 'Playfair Display', serif;
    font-size: 19px; font-weight: 700; color: #f8f6f0; line-height: 1.1;
  }}
  .brand .logo em {{ color: #ffc107; font-style: italic; font-weight: 400; }}
  .brand .phone {{
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 500; color: #a8d5b5;
    margin-top: 4px; letter-spacing: 0.5px;
  }}
</style>
</head>
<body>
<div class="canvas">
  <div class="hero"></div>
  <div class="hero-tint"></div>
  <div class="hero-overlay"></div>

  <div class="top-badge">Valinhos-SP · A 80 km de SP</div>

  <div class="hero-text">
    <h1 class="headline">Reunião de equipe<br><em>no alto da montanha</em></h1>
  </div>

  <div class="content">
    <div class="sub-block">
      <p class="sub"><strong>Tira sua liderança do escritório</strong> e cria o espaço perfeito pra alinhar visão, planejar o ciclo e conectar o time.</p>

      <div class="feature-grid">
        <div class="feature">
          <div class="num">150</div>
          <div class="label">Pessoas</div>
        </div>
        <div class="feature">
          <div class="num">80 km</div>
          <div class="label">De SP</div>
        </div>
        <div class="feature">
          <div class="num">100%</div>
          <div class="label">Estrutura</div>
        </div>
      </div>
    </div>

    <div class="cta-row">
      <div class="cta">Consulte disponibilidade <span class="arrow">&rarr;</span></div>
      <div class="brand">
        <div class="logo">Chácara <em>Sonho Verde Top</em></div>
        <div class="phone">(11) 94192-3232</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
"""


def render(html, dest, w=1080, h=1350):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": w, "height": h}, device_scale_factor=1)
        page.set_content(html, wait_until="networkidle")
        page.wait_for_timeout(500)  # Espera fontes renderizarem
        page.screenshot(path=str(dest), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()
    print(f"OK: {dest}")


render(HTML_V1A, OUT / "criativo_01_v1a_piloto.png")
render(HTML_V1B, OUT / "criativo_01_v1b_piloto.png")
