"""
Batch v3 dos 9 criativos restantes (01, 03, 04, 05, 06, 07, 08, 09, 10).
Aplica as regras globais aprovadas no piloto (criativo 02 v3):
  1) Nome CHACARA SONHO VERDE TOP grande no rodape (Playfair Black, italico dourado)
  2) Localizacao em 2 linhas (VALINHOS-SP / NO ALTO DA MONTANHA) - com variacao no 04
  3) Foto real tratada (ja pre-tratada em fotos_originais/*_treated.jpg)
  4) Paleta verde-mata + creme + dourado + Playfair/Inter
  5) 1080x1350 vertical

Criativos 09 e 10 usam layout MIX (3 fotos compostas).
Criativo 10 tem BRAND grandao acima da headline.
"""
import base64
from pathlib import Path
from playwright.sync_api import sync_playwright

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


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


# ============================================================
# LAYOUT PADRAO (uma foto grande em cima + conteudo embaixo)
# ============================================================
def build_html_padrao(
    foto_path: Path,
    badge: str,
    headline_html: str,
    sub_html: str,
    cta: str,
    loc_l1: str = "Valinhos-SP",
    loc_l2: str = "No alto da montanha",
    sub_size: int = 22,
) -> str:
    foto_uri = img_to_data_uri(foto_path)
    return 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;1,900&family=Inter:wght@300;400;500;600;700;800;900&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;
  }}
  .hero {{
    position: absolute; top: 0; left: 0; width: 100%; height: 720px;
    background-image: url('{foto_uri}');
    background-size: cover; background-position: center;
    filter: brightness(0.82) contrast(1.05) saturate(1.05);
  }}
  .hero-overlay {{
    position: absolute; top: 0; left: 0; width: 100%; height: 720px;
    background:
      linear-gradient(180deg, rgba(13,31,20,0.55) 0%, rgba(13,31,20,0.1) 25%, rgba(13,31,20,0.25) 55%, rgba(13,31,20,0.92) 92%, #0d1f14 100%);
  }}
  .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;
    white-space: nowrap;
  }}
  .top-badge::before {{
    content: ''; width: 6px; height: 6px; background: #ffc107; border-radius: 50%;
    box-shadow: 0 0 8px #ffc107;
  }}
  .content {{
    position: absolute; bottom: 0; left: 0; width: 100%; height: 780px;
    padding: 0 70px 40px 70px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, #0d1f14 28%, #0d1f14 100%);
    z-index: 2;
  }}
  .ornament {{
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
  }}
  .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: 68px;
    line-height: 1.02;
    color: #f8f6f0;
    letter-spacing: -1.8px;
    margin-bottom: 30px;
    text-shadow: 0 6px 30px rgba(0,0,0,0.5);
  }}
  .headline em {{
    font-style: italic; font-weight: 400;
    color: #ffc107;
  }}

  .location {{
    display: flex; align-items: center; gap: 20px;
    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: 46px; height: 46px; flex-shrink: 0;
    background: #ffc107; border-radius: 50%;
    box-shadow: 0 4px 20px rgba(255,193,7,0.35);
  }}
  .location .pin svg {{ width: 24px; height: 24px; }}
  .location .text {{
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
  }}
  .location .text .l1 {{ color: #ffc107; display: block; }}
  .location .text .l2 {{ color: #f8f6f0; display: block; font-weight: 700; font-size: 34px; }}

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

  .cta-row {{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.15);
    gap: 20px;
  }}
  .cta {{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 30px;
    background: #ffc107;
    color: #0d1f14;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 15px;
    letter-spacing: 1.2px; text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(255,193,7,0.25);
    white-space: nowrap;
  }}
  .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: 34px; font-weight: 900; color: #f8f6f0;
    line-height: 1.05; letter-spacing: -0.5px;
  }}
  .brand .logo em {{ color: #ffc107; font-style: italic; font-weight: 900; }}
  .brand .phone {{
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 500; color: #a8d5b5;
    margin-top: 6px; letter-spacing: 0.8px;
  }}
</style>
</head>
<body>
<div class="canvas">
  <div class="hero"></div>
  <div class="hero-overlay"></div>

  <div class="top-badge">{badge}</div>

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

    <h1 class="headline">{headline_html}</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">
        <span class="l1">{loc_l1}</span>
        <span class="l2">{loc_l2}</span>
      </div>
    </div>

    <p class="sub">{sub_html}</p>

    <div class="cta-row">
      <div class="cta">
        {cta}
        <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>
"""


# ============================================================
# LAYOUT MIX (usado no 09 e 10 - 3 fotos compostas em grid)
# Layout: 1 foto grande esquerda + 2 empilhadas direita
# ============================================================
def build_html_mix(
    foto_main: Path,
    foto_top: Path,
    foto_bottom: Path,
    badge: str,
    headline_html: str,
    sub_html: str,
    cta: str,
    brand_topo: bool = False,
    sub_size: int = 22,
    loc_l1: str = "Valinhos-SP",
    loc_l2: str = "No alto da montanha",
) -> str:
    uri_main = img_to_data_uri(foto_main)
    uri_top = img_to_data_uri(foto_top)
    uri_bottom = img_to_data_uri(foto_bottom)

    brand_topo_html = ""
    if brand_topo:
        brand_topo_html = """
        <div class="brand-topo">
          <div class="brand-topo-logo">Chácara <em>Sonho Verde Top</em></div>
        </div>
        """

    return 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;1,900&family=Inter:wght@300;400;500;600;700;800;900&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;
  }}

  /* MIX de 3 fotos - grid no topo */
  .mix {{
    position: absolute; top: 0; left: 0; width: 100%; height: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    background: #0d1f14;
  }}
  .mix-main {{
    grid-row: 1 / 3; grid-column: 1 / 2;
    background-image: url('{uri_main}');
    background-size: cover; background-position: center;
    filter: brightness(0.88) contrast(1.05) saturate(1.05);
  }}
  .mix-top {{
    grid-row: 1 / 2; grid-column: 2 / 3;
    background-image: url('{uri_top}');
    background-size: cover; background-position: center;
    filter: brightness(0.88) contrast(1.05) saturate(1.05);
  }}
  .mix-bottom {{
    grid-row: 2 / 3; grid-column: 2 / 3;
    background-image: url('{uri_bottom}');
    background-size: cover; background-position: center;
    filter: brightness(0.88) contrast(1.05) saturate(1.05);
  }}
  .mix-overlay {{
    position: absolute; top: 0; left: 0; width: 100%; height: 720px;
    background:
      linear-gradient(180deg, rgba(13,31,20,0.45) 0%, rgba(13,31,20,0.05) 25%, rgba(13,31,20,0.15) 55%, rgba(13,31,20,0.92) 92%, #0d1f14 100%);
    pointer-events: none;
  }}

  .top-badge {{
    position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 22px;
    background: rgba(13,31,20,0.7);
    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;
    white-space: nowrap;
  }}
  .top-badge::before {{
    content: ''; width: 6px; height: 6px; background: #ffc107; border-radius: 50%;
    box-shadow: 0 0 8px #ffc107;
  }}

  .content {{
    position: absolute; bottom: 0; left: 0; width: 100%; height: 780px;
    padding: 0 70px 40px 70px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(180deg, transparent 0%, #0d1f14 28%, #0d1f14 100%);
    z-index: 2;
  }}

  /* BRAND GRANDAO topo (so no criativo 10) */
  .brand-topo {{
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,193,7,0.3);
  }}
  .brand-topo-logo {{
    font-family: 'Playfair Display', serif;
    font-size: 48px; font-weight: 900; color: #f8f6f0;
    line-height: 1.05; letter-spacing: -1.2px;
  }}
  .brand-topo-logo em {{
    color: #ffc107; font-style: italic; font-weight: 900;
  }}

  .ornament {{
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
  }}
  .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: 62px;
    line-height: 1.02;
    color: #f8f6f0;
    letter-spacing: -1.8px;
    margin-bottom: 28px;
    text-shadow: 0 6px 30px rgba(0,0,0,0.5);
  }}
  .headline em {{
    font-style: italic; font-weight: 400;
    color: #ffc107;
  }}

  .location {{
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,193,7,0.25);
  }}
  .location .pin {{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; 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: 36px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
  }}
  .location .text .l1 {{ color: #ffc107; display: block; }}
  .location .text .l2 {{ color: #f8f6f0; display: block; font-weight: 700; font-size: 30px; }}

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

  .cta-row {{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.15);
    gap: 20px;
  }}
  .cta {{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 30px;
    background: #ffc107;
    color: #0d1f14;
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 15px;
    letter-spacing: 1.2px; text-transform: uppercase;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(255,193,7,0.25);
    white-space: nowrap;
  }}
  .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: 30px; font-weight: 900; color: #f8f6f0;
    line-height: 1.05; letter-spacing: -0.5px;
  }}
  .brand .logo em {{ color: #ffc107; font-style: italic; font-weight: 900; }}
  .brand .phone {{
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 500; color: #a8d5b5;
    margin-top: 5px; letter-spacing: 0.8px;
  }}
</style>
</head>
<body>
<div class="canvas">
  <div class="mix">
    <div class="mix-main"></div>
    <div class="mix-top"></div>
    <div class="mix-bottom"></div>
  </div>
  <div class="mix-overlay"></div>

  <div class="top-badge">{badge}</div>

  <div class="content">
    {brand_topo_html}
    <div class="ornament">
      <div class="line"></div>
      <div class="dot"></div>
      <div class="line"></div>
    </div>

    <h1 class="headline">{headline_html}</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">
        <span class="l1">{loc_l1}</span>
        <span class="l2">{loc_l2}</span>
      </div>
    </div>

    <p class="sub">{sub_html}</p>

    <div class="cta-row">
      <div class="cta">
        {cta}
        <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_one(html: str, dest: Path, w: int = 1080, h: int = 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(700)
        page.screenshot(path=str(dest), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()
    print(f"[OK] {dest.name}")


# ============================================================
# ESPECIFICACOES DOS 9 CRIATIVOS
# ============================================================
def gerar_01():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_100_treated.jpg',
        badge="Eventos corporativos",
        headline_html="Reunião de equipe<br><em>no alto da montanha</em>",
        sub_html="<strong>Estrutura completa.</strong> Hospedagem para 65 pessoas.",
        cta="Consulte disponibilidade",
    )

def gerar_03():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_28_treated.jpg',
        badge="Espaço para eventos empresariais",
        headline_html="Onde líderes tomam as<br><em>melhores decisões</em>",
        sub_html="<strong>Silêncio, natureza e hospedagem inclusa</strong> para 65 pessoas.",
        cta="Verifique a data disponível",
    )

def gerar_04():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_06_treated.jpg',
        badge="Casamento",
        headline_html="Cerimônia, festa e hospedagem.<br><em>Um só lugar.</em>",
        sub_html="<strong>Seus convidados dormem na chácara.</strong> Hospedagem para 65 pessoas.",
        cta="Consulte disponibilidade",
        loc_l1="Valinhos-SP · 80 km de SP",
        loc_l2="Seu casamento no alto da montanha",
        sub_size=26,
    )

def gerar_05():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_hero_treated.jpg',
        badge="Casamento na serra",
        headline_html="Casamento<br><em>no alto da montanha</em>",
        sub_html="<strong>18 mil m² de reserva privada.</strong> Hospedagem para 65 pessoas.",
        cta="Reserve sua data",
        sub_size=26,
    )

def gerar_06():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_piscina_treated.jpg',
        badge="Salão + área externa",
        headline_html="Salão para 120.<br><em>Área externa sem limite.</em>",
        sub_html="Seu casamento no <strong>alto da montanha</strong>, no meio da floresta. Hospedagem para 65 pessoas.",
        cta="Chame no WhatsApp",
    )

def gerar_07():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_piscina_treated.jpg',
        badge="Feriado prolongado",
        headline_html="Feriado com 65 amigos.<br><em>Sem engarrafamento pra praia.</em>",
        sub_html="<strong>Piscina, sauna e trilha</strong> a 80 km de SP. Hospedagem para 65 pessoas.",
        cta="Consulte disponibilidade",
    )

def gerar_08():
    return build_html_padrao(
        foto_path=FOTOS / 'foto_20_treated.jpg',
        badge="Família e amigos",
        headline_html="18 mil m² para a família<br><em>se espalhar</em>",
        sub_html="Fim de semana, festa, cerimônia ou evento empresarial. <strong>Escolha como usar.</strong> Hospedagem para 65 pessoas.",
        cta="Faça a sua reserva",
    )

def gerar_09():
    return build_html_mix(
        foto_main=FOTOS / 'foto_piscina_treated.jpg',
        foto_top=FOTOS / 'foto_39_treated.jpg',
        foto_bottom=FOTOS / 'foto_hero_treated.jpg',
        badge="Tudo em um lugar",
        headline_html="Lazer para adultos<br>e crianças <em>sem sair pra nada</em>",
        sub_html="<strong>Hospedagem para até 65 pessoas.</strong>",
        cta="Reserve pelo WhatsApp",
        sub_size=28,
    )

def gerar_10():
    return build_html_mix(
        foto_main=FOTOS / 'foto_20_treated.jpg',
        foto_top=FOTOS / 'foto_piscina_treated.jpg',
        foto_bottom=FOTOS / 'foto_100_treated.jpg',
        badge="Avaliações verificadas",
        headline_html="Hospedagem <em>5 estrelas</em><br>no coração da mata",
        sub_html="<strong>Avaliações 5 estrelas pelos visitantes.</strong> Hospedagem para 65 pessoas.",
        cta="Conheça a chácara",
        brand_topo=True,
    )


# ============================================================
# EXECUCAO
# ============================================================
CRIATIVOS = {
    '01': gerar_01,
    '03': gerar_03,
    '04': gerar_04,
    '05': gerar_05,
    '06': gerar_06,
    '07': gerar_07,
    '08': gerar_08,
    '09': gerar_09,
    '10': gerar_10,
}


def render_lote(ids):
    for i in ids:
        html = CRIATIVOS[i]()
        dest = OUT / f'criativo_{i}_v3.png'
        render_one(html, dest)


if __name__ == "__main__":
    import sys
    if len(sys.argv) > 1:
        ids = sys.argv[1:]
    else:
        ids = list(CRIATIVOS.keys())
    render_lote(ids)
