"""
Criativo 01 v2 - Chácara Sonho Verde Top
Ajustes do Renato sobre a V1A aprovada:
  1) LOCAL em destaque grande (Valinhos-SP · 80 km de SP) logo abaixo da headline
  2) Sub-headline com "Hospedagem para 65 pessoas"
Mantém: foto aérea, Playfair Display + Inter, paleta (verde-mata + creme + dourado)
"""
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}"

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

HTML_V2 = 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;800&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 aérea no topo */
  .hero {{
    position: absolute; top: 0; left: 0; width: 100%; height: 780px;
    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 */
  .hero-overlay {{
    position: absolute; top: 0; left: 0; width: 100%; height: 780px;
    background:
      linear-gradient(180deg, rgba(13,31,20,0.55) 0%, rgba(13,31,20,0.1) 25%, rgba(13,31,20,0.2) 55%, rgba(13,31,20,0.9) 92%, #0d1f14 100%);
  }}
  /* Selo pequeno no topo (marca contexto) */
  .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 conteúdo */
  .content {{
    position: absolute; bottom: 0; left: 0; width: 100%; height: 720px;
    padding: 0 70px 55px 70px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, #0d1f14 30%, #0d1f14 100%);
    z-index: 2;
  }}

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

  /* HEADLINE principal - Playfair Black */
  .headline {{
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 72px;
    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;
  }}

  /* NOVO: LOCAL DESTACADO - Inter ExtraBold, dourado, ~65% do tamanho da headline */
  .location {{
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(255,193,7,0.25);
  }}
  .location .pin {{
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    background: #ffc107; border-radius: 50%;
    box-shadow: 0 4px 20px rgba(255,193,7,0.35);
  }}
  .location .pin svg {{ width: 22px; height: 22px; }}
  .location .text {{
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: #ffc107;
    letter-spacing: -0.5px;
    text-transform: uppercase;
  }}
  .location .text .sep {{
    color: #f8f6f0; font-weight: 300; margin: 0 12px; opacity: 0.6;
  }}
  .location .text .distance {{
    color: #f8f6f0;
  }}

  /* Sub-headline */
  .sub {{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.45;
    color: #d8e0d3;
    margin-bottom: 38px;
    max-width: 780px;
  }}
  .sub strong {{
    color: #f8f6f0;
    font-weight: 600;
  }}

  /* CTA */
  .cta-row {{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }}
  .cta {{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 34px;
    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">Eventos corporativos</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>

    <div class="location">
      <span class="pin">
        <svg viewBox="0 0 24 24" fill="#0d1f14"><path d="M12 2C7.58 2 4 5.58 4 10c0 5.25 7 12 8 12s8-6.75 8-12c0-4.42-3.58-8-8-8zm0 11a3 3 0 100-6 3 3 0 000 6z"/></svg>
      </span>
      <div class="text">Valinhos-SP<span class="sep">·</span><span class="distance">80 km de SP</span></div>
    </div>

    <p class="sub"><strong>Estrutura completa para eventos corporativos.</strong><br>Hospedagem para 65 pessoas.</p>

    <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(600)
        page.screenshot(path=str(dest), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()
    print(f"OK: {dest}")


render(HTML_V2, OUT / "criativo_01_v2_piloto.png")
