"""
LinkedIn-Thumbnail-Overlay-Renderer für 4:5-Hochformat (1080×1350).

Bundle-Variante. Schwesterdatei zu compose.py. compose.py rendert 16:9-
Thumbnails (1536×1024) mit 27 aktiven Templates. compose_v.py rendert
4:5-Hochformat-Thumbnails mit eigener Template-Bibliothek (T01v..T28v),
die für die vertikale Bildfläche neu komponiert ist. 4:5 ist der Default
für LinkedIn-Single-Image-Posts, weil es im mobilen Feed die größte
Bildschirmfläche einnimmt.

Shared mit compose.py: Tokens, Helper-Funktionen, HTML-Shell, Render-
Logik via Playwright. Lokal definiert: WIDTH/HEIGHT, Templates, CLI.

Stefan-Lock-frei (v0.15.0 Wave G Foundation): erbt die generalisierte
logo_inline aus compose.py.

CLI:
    python -m _lib.designsystem.compose_v --photo PFAD --template T01v \
        --headline "..." [--eyebrow "..."] [--logo] [--logo-path PATH] \
        [Override-Flags] --output PFAD

Override-Flags (alle optional, identisch zu compose.py).
"""

from __future__ import annotations

import argparse
import html
import sys
from pathlib import Path

# Shared Helpers aus compose.py (gleiches Paket)
from _lib.designsystem.compose import (  # noqa: E402
    C_DEEP_SEA, C_OCEAN, C_TEAL, C_GOLD, C_CREAM,
    FONT_HEAD, FONT_BODY, FONT_MONO,
    logo_inline, gold_dot, accent_line, eyebrow_span, headline_h1,
    _photo, _scrim,
    photo_to_data_uri, build_override_style, SHELL,
    set_logo_path,
)

# 4:5-Canvas. LinkedIn-Empfehlung 2026: 1080x1350 (4:5) für maximale
# mobile Bildschirmfläche im Feed.
WIDTH, HEIGHT = 1080, 1350


# --- Templates 4:5 ----------------------------------------------------

def t01_v(photo, headline, eyebrow, logo):
    """Default-Insight 4:5. Foto füllt obere zwei Drittel, dunkles
    Lockup-Band unten (Eyebrow + Headline + Akzentlinie). Das mobile
    Pendant zu T01 für den Standard-Insight-Post."""
    eyebrow = eyebrow or "Insight"
    logo_block = (f'<div style="position:absolute;top:48px;right:56px;">{logo_inline(dark=True, scale=0.95)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0) 0%,rgba(24,39,58,0) 50%,rgba(24,39,58,0.55) 75%,rgba(24,39,58,0.92) 100%)")}
    {logo_block}
    <div style="position:absolute;left:64px;right:64px;bottom:72px;color:{C_CREAM};">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_GOLD, 16)}
      </div>
      {headline_h1(headline, font_size="68px", font_weight=600, line_height=1.06, letter_spacing="-1.5px", text_wrap="balance", max_width="940px")}
      {accent_line(140, 3, "margin-top:24px;")}
    </div>
    """


def t07_v(photo, headline, eyebrow, logo):
    """Zahl-Hook 4:5. Foto füllt obere Hälfte, untere Hälfte ist
    Cream-Block: große Zahl (180px) leftbound, Headline-Kontext rechts
    daneben in 36-40px. Editorial-Reportage-Anmutung."""
    import re as _re
    eyebrow = eyebrow or "Zahl der Woche"
    m = _re.match(r"\s*(\d{1,3})\s*([%€$x]?)\s*(.*)", headline)
    if m:
        big_num, big_unit, rest = m.group(1), m.group(2), m.group(3).lstrip(" ,.;:—-")
    else:
        big_num, big_unit, rest = "73", "%", headline
    logo_block = (f'<div style="position:absolute;right:56px;bottom:48px;">{logo_inline(scale=0.9)}</div>'
                  if logo else "")
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:720px;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    <div style="position:absolute;left:0;right:0;top:720px;bottom:0;background:{C_CREAM};
      padding:56px 64px 64px;color:{C_DEEP_SEA};display:flex;flex-direction:column;justify-content:space-between;">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(10)}
        <span style="font-family:{FONT_MONO};font-size:14px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(24,39,58,0.7);">{eyebrow}</span>
      </div>
      <div style="display:flex;align-items:flex-end;gap:24px;">
        <span style="font-family:{FONT_HEAD};font-size:180px;font-weight:700;line-height:0.9;letter-spacing:-6px;color:{C_DEEP_SEA};">{big_num}<span style="color:{C_TEAL};font-size:120px;letter-spacing:-3px;">{big_unit or "%"}</span></span>
        {headline_h1(rest or headline, font_size="36px", font_weight=600, line_height=1.15, letter_spacing="-0.5px", max_width="500px", text_wrap="balance", margin_bottom="16px")}
      </div>
      {accent_line(120, 3)}
    </div>
    {logo_block}
    """


def t08_v(photo, headline, eyebrow, logo):
    """Frage 4:5. Foto Vollfläche mit dunklem Radial-Scrim, Eyebrow als
    Pille oben, große zentrierte Headline in der Bildmitte (vertikal-
    Schwerpunkt). 4:5 erlaubt mehr Atemraum oben und unten."""
    eyebrow = eyebrow or "Frage an die Runde"
    logo_block = (f'<div style="position:absolute;left:0;right:0;bottom:64px;display:flex;justify-content:center;">'
                  f'{logo_inline(dark=True, scale=1)}</div>' if logo else "")
    return f"""
    {_photo(photo)}
    {_scrim("radial-gradient(ellipse at center,rgba(24,39,58,0.4) 0%,rgba(24,39,58,0.15) 55%,rgba(24,39,58,0.65) 100%)")}
    <div style="position:absolute;top:64px;left:0;right:0;display:flex;justify-content:center;">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;padding:10px 22px;
        border:1px solid rgba(248,246,242,0.7);border-radius:999px;font-family:{FONT_BODY};
        font-size:15px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:{C_CREAM};
        background:rgba(24,39,58,0.7);">
        {gold_dot(9)} {eyebrow}
      </span>
    </div>
    <div style="position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:{C_CREAM};padding:0 80px;">
      {headline_h1(headline, font_size="76px", font_weight=600, line_height=1.06, letter_spacing="-1.7px", text_wrap="balance", max_width="900px", margin_inline="auto")}
      {accent_line(160, 3, "margin:30px auto 0;")}
    </div>
    {logo_block}
    """


def t15_v(photo, headline, eyebrow, logo):
    """Portrait 4:5. Foto fast Vollfläche (Person füllt vertikalen
    Slot natürlich), schmales Cream-Band unten mit Eyebrow + Headline.
    Optimal für Personen-Thumbnails mit Identität."""
    eyebrow = eyebrow or "Notiz vom Navigator"
    logo_block = (f'<div style="position:absolute;top:48px;right:56px;">{logo_inline(dark=True, scale=0.9)}</div>'
                  if logo else "")
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;bottom:340px;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;object-position:center top;display:block;">
    </div>
    {logo_block}
    <div style="position:absolute;left:0;right:0;bottom:0;height:340px;background:{C_CREAM};
      padding:48px 64px;display:flex;flex-direction:column;justify-content:space-between;color:{C_DEEP_SEA};">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 15, 3)}
      </div>
      {headline_h1(headline, font_size="56px", font_weight=700, line_height=1.06, letter_spacing="-1.3px", text_wrap="balance", max_width="950px")}
      {accent_line(120, 3)}
    </div>
    """


def t16_v(photo, headline, eyebrow, logo):
    """Klartext-Statement 4:5. Cream-Hintergrund, Foto als Tile oben
    (1080x540), große zentrierte Headline-Aussage darunter, Akzentlinie
    am Boden. Editorial, statement-getrieben."""
    eyebrow = eyebrow or "Standpunkt"
    logo_block = (f'<div style="position:absolute;left:0;right:0;bottom:48px;display:flex;justify-content:center;">'
                  f'{logo_inline(scale=0.95)}</div>' if logo else "")
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:540px;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    <div style="position:absolute;left:0;right:0;top:540px;bottom:0;background:{C_CREAM};
      padding:64px 64px 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:32px;color:{C_DEEP_SEA};text-align:center;">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(10)}
        {eyebrow_span(eyebrow, C_TEAL, 14, 3)}
      </div>
      {headline_h1(headline, font_size="60px", font_weight=700, line_height=1.05, letter_spacing="-1.4px", text_wrap="balance", max_width="900px", margin_inline="auto")}
      {accent_line(160, 3, "margin:0 auto;")}
    </div>
    {logo_block}
    """


def t28_v(photo, headline, eyebrow, logo):
    """Listen-/Drei-Punkte 4:5. Foto obere 45%, untere 55% Cream-Block
    mit Headline und drei nummerierten Karten gestapelt (vertikal
    statt horizontal wie T28 in 16:9). Für 'N Gründe'-Hooks."""
    eyebrow = eyebrow or "3 Punkte"
    points = [p.strip() for p in headline.split("|")]
    if len(points) >= 4:
        head, p1, p2, p3 = points[0], points[1], points[2], points[3]
    else:
        head, p1, p2, p3 = headline, "Punkt 1", "Punkt 2", "Punkt 3"
    logo_block = (f'<div style="position:absolute;right:56px;bottom:48px;">{logo_inline(scale=0.85)}</div>'
                  if logo else "")
    cards = ""
    for i, p in enumerate([p1, p2, p3], start=1):
        cards += f"""
        <div style="display:flex;align-items:flex-start;gap:18px;">
          <span style="font-family:{FONT_HEAD};font-size:36px;font-weight:700;line-height:1;color:{C_GOLD};letter-spacing:-1px;min-width:48px;">0{i}</span>
          <span style="font-family:{FONT_BODY};font-size:22px;font-weight:500;line-height:1.3;color:{C_DEEP_SEA};">{p}</span>
        </div>
        """
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:600px;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    <div style="position:absolute;left:0;right:0;top:600px;bottom:0;background:{C_CREAM};
      padding:48px 64px 64px;color:{C_DEEP_SEA};display:flex;flex-direction:column;gap:24px;">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(10)}
        {eyebrow_span(eyebrow, C_TEAL, 14, 3)}
      </div>
      {headline_h1(head, font_size="40px", font_weight=700, line_height=1.1, letter_spacing="-0.8px", text_wrap="balance", max_width="900px")}
      <div style="display:flex;flex-direction:column;gap:18px;margin-top:8px;">
        {cards}
      </div>
    </div>
    {logo_block}
    """


# --- Templates 4:5 (Erweiterung auf volles 27er-Set) ------------------

def t02_v(photo, headline, eyebrow, logo):
    """Bottom-Bar 4:5. Foto bis über 80% der Höhe, dunkler Vollband
    unten mit Headline und Verlauf-Top-Border."""
    logo_block = (f'<div style="position:absolute;top:48px;right:56px;">{logo_inline(dark=True)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    <div style="position:absolute;left:0;right:0;bottom:0;background:{C_DEEP_SEA};
      padding:36px 64px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;
      border-top:3px solid transparent;
      background-image:linear-gradient({C_DEEP_SEA},{C_DEEP_SEA}),linear-gradient(90deg,{C_TEAL} 0%,{C_GOLD} 60%,transparent 100%);
      background-origin:padding-box,border-box;background-clip:padding-box,border-box;">
      {headline_h1(headline, font_size="44px", font_weight=600, line_height=1.12, letter_spacing="-0.9px", color=C_CREAM, max_width="880px", text_wrap="balance")}
      {gold_dot(12)}
    </div>
    {logo_block}
    """


def t03_v(photo, headline, eyebrow, logo):
    """Split 4:5. Vertikal statt horizontal: Foto oben 60%, Cream-Panel
    unten 40% mit Eyebrow, Akzent, Headline, Logo."""
    eyebrow = eyebrow or "Im Gespräch"
    logo_block = logo_inline(scale=1.05) if logo else ""
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:810px;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    <div style="position:absolute;left:0;right:0;top:810px;bottom:0;background:{C_CREAM};
      padding:48px 64px;display:flex;flex-direction:column;justify-content:space-between;color:{C_DEEP_SEA};">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 15)}
      </div>
      <div>
        {accent_line(72, 3, "margin-bottom:18px;")}
        {headline_h1(headline, font_size="48px", font_weight=600, line_height=1.06, letter_spacing="-1.1px", text_wrap="balance", max_width="940px")}
      </div>
      <div>{logo_block}</div>
    </div>
    """


def t04_v(photo, headline, eyebrow, logo):
    """Cream-Card 4:5. Card sitzt mittig vertikal als Insel im Bild,
    nimmt ca. 620px der Höhe ein, Foto bleibt oben+unten sichtbar."""
    eyebrow = eyebrow or "Standpunkt"
    logo_block = (f'<div style="margin-top:14px;">{logo_inline(scale=0.85)}</div>' if logo else "")
    return f"""
    {_photo(photo)}
    <div style="position:absolute;left:64px;right:64px;top:50%;transform:translateY(-50%);
      background:{C_CREAM};padding:48px 44px;display:flex;flex-direction:column;gap:24px;
      box-shadow:0 16px 40px rgba(24,39,58,0.18);color:{C_DEEP_SEA};">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, "rgba(24,39,58,0.7)", 15)}
      </div>
      {headline_h1(headline, font_size="52px", font_weight=700, line_height=1.05, letter_spacing="-1.2px", text_wrap="balance")}
      <div>
        {accent_line(100, 3)}
        {logo_block}
      </div>
    </div>
    """


def t06_v(photo, headline, eyebrow, logo):
    """Bottom-left + Serien-Label 4:5. Foto fullbleed, Serien-Label
    top-right, Eyebrow + Headline + Akzentlinie + Logo bottom-left."""
    eyebrow = eyebrow or "Praxis"
    logo_block = logo_inline(dark=True, scale=1.05) if logo else ""
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(120deg,rgba(24,39,58,0.72) 0%,rgba(24,39,58,0.3) 38%,rgba(24,39,58,0) 65%)")}
    <div style="position:absolute;top:48px;right:56px;display:flex;align-items:center;gap:14px;">
      <span style="font-family:{FONT_MONO};font-size:13px;color:rgba(248,246,242,0.85);letter-spacing:1.5px;text-transform:uppercase;">Folge · Reihe</span>
      {gold_dot(9)}
    </div>
    <div style="position:absolute;left:64px;right:64px;bottom:64px;color:{C_CREAM};">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
        <span style="width:26px;height:1.5px;background:{C_GOLD};"></span>
        {eyebrow_span(eyebrow, C_GOLD, 14, 3.2)}
      </div>
      {headline_h1(headline, font_size="58px", font_weight=600, line_height=1.06, letter_spacing="-1.3px", text_wrap="balance", max_width="940px")}
      <div style="display:flex;align-items:center;gap:24px;margin-top:24px;">
        {accent_line(100, 3)}
        {logo_block}
      </div>
    </div>
    """


def t09_v(photo, headline, eyebrow, logo):
    """Split 4:5 invers zu T03v. Cream-Panel oben 38% mit Eyebrow +
    Akzent, Foto unten 62% mit Headline-Overlay."""
    eyebrow = eyebrow or "Leadership · Essay"
    logo_block = (f'<div style="position:absolute;left:64px;bottom:48px;">{logo_inline(dark=True, scale=0.95)}</div>'
                  if logo else "")
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:520px;background:{C_CREAM};
      padding:64px 64px;color:{C_DEEP_SEA};display:flex;flex-direction:column;justify-content:space-between;">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 15, 3)}
      </div>
      {headline_h1(headline, font_size="50px", font_weight=700, line_height=1.06, letter_spacing="-1.2px", text_wrap="balance", max_width="940px")}
      {accent_line(72, 3)}
    </div>
    <div style="position:absolute;left:0;right:0;top:520px;bottom:0;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    {logo_block}
    """


def t10_v(photo, headline, eyebrow, logo):
    """Cinematic minimal 4:5. Foto fullbleed mit dezentem Top-/Bottom-
    Scrim, Eyebrow oben, Headline unten."""
    eyebrow = eyebrow or "Notiz vom Navigator"
    logo_block = (f'<div style="position:absolute;right:64px;bottom:64px;">{logo_inline(dark=True, scale=0.85)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0.5) 0%,rgba(24,39,58,0) 25%,rgba(24,39,58,0) 60%,rgba(24,39,58,0.78) 100%)")}
    <div style="position:absolute;top:48px;left:64px;display:flex;align-items:center;gap:12px;color:{C_CREAM};">
      {gold_dot(9)}
      {eyebrow_span(eyebrow, C_CREAM, 15, 3)}
    </div>
    <div style="position:absolute;left:64px;right:64px;bottom:64px;color:{C_CREAM};">
      {headline_h1(headline, font_size="62px", font_weight=600, line_height=1.06, letter_spacing="-1.4px", max_width="940px", text_wrap="balance")}
      {accent_line(140, 3, "margin-top:24px;")}
    </div>
    {logo_block}
    """


def t11_v(photo, headline, eyebrow, logo):
    """Spiegelvariante 4:5. Headline rechtsbündig unten — nur sinnvoll,
    wenn Motiv nach links blickt. Sonst T01v / T14v / T20v nutzen."""
    eyebrow = eyebrow or "Mittelstand"
    logo_block = (f'<div style="position:absolute;top:48px;left:64px;">{logo_inline(dark=True, scale=0.95)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(240deg,rgba(24,39,58,0.78) 0%,rgba(24,39,58,0.35) 35%,rgba(24,39,58,0) 60%)")}
    {logo_block}
    <div class="tn-block" style="position:absolute;right:64px;bottom:64px;max-width:780px;color:{C_CREAM};text-align:right;">
      <div style="display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:20px;">
        {eyebrow_span(eyebrow, C_GOLD, 15)}
        {gold_dot(11)}
      </div>
      {headline_h1(headline, font_size="60px", font_weight=600, line_height=1.06, letter_spacing="-1.4px", text_wrap="balance")}
      {accent_line(140, 3, "margin-top:24px;margin-left:auto;")}
    </div>
    """


def t12_v(photo, headline, eyebrow, logo):
    """Cream-Header-Bar oben 4:5. Eyebrow + Headline auf Cream oben,
    Foto füllt Rest. Akzent-Verlauf auf Trennlinie."""
    eyebrow = eyebrow or "Essay"
    logo_block = (f'<div style="position:absolute;right:56px;bottom:48px;">{logo_inline(dark=True, scale=0.85)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    <div style="position:absolute;left:0;right:0;top:0;background:{C_CREAM};
      padding:40px 64px 36px;color:{C_DEEP_SEA};
      border-bottom:3px solid transparent;
      background-image:linear-gradient({C_CREAM},{C_CREAM}),linear-gradient(90deg,{C_TEAL} 0%,{C_GOLD} 50%,transparent 100%);
      background-origin:padding-box,border-box;background-clip:padding-box,border-box;">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 14)}
      </div>
      {headline_h1(headline, font_size="50px", font_weight=700, line_height=1.06, letter_spacing="-1.2px", text_wrap="balance", max_width="940px")}
    </div>
    {logo_block}
    """


def t13_v(photo, headline, eyebrow, logo):
    """Reporting 4:5. Eyebrow top-left, Headline bottom-left, Logo
    bottom-left. Vollbild mit Side-Scrim links."""
    eyebrow = eyebrow or "Reporting"
    logo_block = logo_inline(dark=True, scale=1.05) if logo else ""
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(90deg,rgba(24,39,58,0.85) 0%,rgba(24,39,58,0.35) 38%,rgba(24,39,58,0) 65%)")}
    <div style="position:absolute;left:64px;top:48px;bottom:48px;display:flex;flex-direction:column;
      justify-content:space-between;color:{C_CREAM};max-width:760px;">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_GOLD, 15)}
      </div>
      <div>
        {headline_h1(headline, font_size="60px", font_weight=600, line_height=1.06, letter_spacing="-1.4px", text_wrap="balance")}
        {accent_line(120, 3, "margin-top:22px;")}
      </div>
      <div>{logo_block}</div>
    </div>
    """


def t14_v(photo, headline, eyebrow, logo):
    """Bottom-Scrim, große Headline 4:5. Maximale Schlagzeilen-Wirkung
    am unteren Bilddrittel, Foto dominiert oben."""
    eyebrow = eyebrow or "Strategie"
    logo_block = (f'<div style="position:absolute;top:48px;right:56px;">{logo_inline(dark=True, scale=0.85)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0) 30%,rgba(24,39,58,0.4) 60%,rgba(24,39,58,0.92) 100%)")}
    {logo_block}
    <div style="position:absolute;left:64px;right:64px;bottom:64px;color:{C_CREAM};">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;font-family:{FONT_BODY};font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:{C_GOLD};margin-bottom:20px;">
        {gold_dot(10)} {eyebrow}
      </span>
      {headline_h1(headline, font_size="68px", font_weight=700, line_height=1.04, letter_spacing="-1.6px", text_wrap="balance", max_width="960px")}
      {accent_line(160, 3, "margin-top:26px;")}
    </div>
    """


def t17_v(photo, headline, eyebrow, logo):
    """Diagonale Cream-Ecke 4:5. Dreieck unten links, Headline-Block
    darauf in dunkler Schrift."""
    eyebrow = eyebrow or "Insight"
    logo_block = (f'<div style="position:absolute;top:48px;right:56px;">{logo_inline(dark=True, scale=1)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    <div style="position:absolute;left:0;bottom:0;width:0;height:0;border-style:solid;
      border-width:0 0 700px 920px;border-color:transparent transparent {C_CREAM} transparent;"></div>
    <div style="position:absolute;left:64px;bottom:64px;max-width:680px;color:{C_DEEP_SEA};">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 14)}
      </div>
      {headline_h1(headline, font_size="50px", font_weight=700, line_height=1.06, letter_spacing="-1.2px", text_wrap="balance")}
      {accent_line(120, 3, "margin-top:20px;")}
    </div>
    {logo_block}
    """


def t18_v(photo, headline, eyebrow, logo):
    """Split-Layout vertikal 4:5. Foto oben 55%, Deep-Sea-Block unten
    45% mit Eyebrow + Headline + Akzent in Cream."""
    eyebrow = eyebrow or "Praxis"
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:740px;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    <div style="position:absolute;left:0;right:0;top:740px;bottom:0;background:{C_DEEP_SEA};
      padding:48px 64px;display:flex;flex-direction:column;justify-content:space-between;color:{C_CREAM};">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_GOLD, 15)}
      </div>
      {headline_h1(headline, font_size="46px", font_weight=700, line_height=1.06, letter_spacing="-1px", text_wrap="balance", max_width="940px")}
      {accent_line(100, 3)}
    </div>
    """


def t19_v(photo, headline, eyebrow, logo):
    """Quote-Format 4:5. Große goldene Anführungszeichen oben,
    Headline unten in italic kursiv."""
    logo_block = logo_inline(dark=True, scale=0.95) if logo else ""
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0.4) 0%,rgba(24,39,58,0.15) 40%,rgba(24,39,58,0.85) 100%)")}
    <div style="position:absolute;top:56px;left:64px;font-size:240px;line-height:0.75;
      color:{C_GOLD};opacity:0.4;font-family:{FONT_HEAD};font-weight:700;user-select:none;">&ldquo;</div>
    <div style="position:absolute;left:64px;right:64px;bottom:64px;color:{C_CREAM};">
      {headline_h1(headline, font_size="54px", font_weight=500, line_height=1.1, letter_spacing="-1.2px", font_style="italic", text_wrap="balance", max_width="940px")}
      <div style="display:flex;align-items:center;gap:18px;margin-top:22px;">
        {accent_line(80, 3)}
        {logo_block}
      </div>
    </div>
    """


def t20_v(photo, headline, eyebrow, logo):
    """Subtitle-Stack 4:5. Eyebrow + Headline mittig vertikal,
    linksbündig auf gescrimter Bildhälfte."""
    eyebrow = eyebrow or "Reihe Mittelstand"
    logo_block = (f'<div style="position:absolute;top:48px;right:56px;">{logo_inline(dark=True, scale=0.85)}</div>'
                  if logo else "")
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(90deg,rgba(24,39,58,0.85) 0%,rgba(24,39,58,0.4) 40%,rgba(24,39,58,0) 65%)")}
    {logo_block}
    <div style="position:absolute;left:64px;top:50%;transform:translateY(-50%);color:{C_CREAM};max-width:780px;">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;font-family:{FONT_BODY};font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:{C_GOLD};margin-bottom:20px;">
        {gold_dot(10)} {eyebrow}
      </span>
      {headline_h1(headline, font_size="62px", font_weight=600, line_height=1.04, letter_spacing="-1.5px", text_wrap="balance")}
      {accent_line(140, 3, "margin-top:24px;")}
    </div>
    """


def t21_v(photo, headline, eyebrow, logo):
    """Outline-Pille 'Neu' 4:5. Pille top-right neben Logo, Headline
    klassisch unten links."""
    eyebrow = eyebrow or "KI im Alltag"
    logo_block = logo_inline(dark=True, scale=1) if logo else ""
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(135deg,rgba(24,39,58,0.7) 0%,rgba(24,39,58,0.2) 40%,rgba(24,39,58,0) 60%)")}
    <div style="position:absolute;top:48px;right:56px;display:flex;align-items:center;gap:14px;">
      <span style="display:inline-flex;align-items:center;gap:10px;padding:8px 18px;background:transparent;
        border:1.5px solid {C_GOLD};border-radius:999px;font-family:{FONT_BODY};font-size:13px;font-weight:700;letter-spacing:2.5px;
        text-transform:uppercase;color:{C_GOLD};">Neu</span>
      {logo_block}
    </div>
    <div style="position:absolute;left:64px;bottom:64px;color:{C_CREAM};max-width:920px;">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;font-family:{FONT_BODY};font-size:15px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:{C_GOLD};margin-bottom:20px;">
        {gold_dot(10)} {eyebrow}
      </span>
      {headline_h1(headline, font_size="56px", font_weight=600, line_height=1.06, letter_spacing="-1.3px", text_wrap="balance")}
      {accent_line(140, 3, "margin-top:24px;")}
    </div>
    """


def t22_v(photo, headline, eyebrow, logo):
    """Magazin-Header 4:5. Top-Strip mit Ausgabe + Eyebrow, unten große
    Headline auf gescrimtem Bild."""
    eyebrow = eyebrow or "Standpunkt"
    return f"""
    {_photo(photo)}
    <div style="position:absolute;left:0;right:0;top:0;padding:28px 64px;display:flex;justify-content:space-between;align-items:center;color:{C_CREAM};background:linear-gradient(180deg,rgba(24,39,58,0.7),rgba(24,39,58,0));">
      <span style="font-family:{FONT_MONO};font-size:13px;letter-spacing:1.6px;text-transform:uppercase;opacity:0.85;">Ausgabe · 2026</span>
      <span class="tn-eyebrow" style="font-family:{FONT_BODY};font-size:14px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:{C_GOLD};display:inline-flex;align-items:center;gap:10px;">
        {gold_dot(9)} {eyebrow}
      </span>
    </div>
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0) 35%,rgba(24,39,58,0.55) 65%,rgba(24,39,58,0.92) 100%)")}
    <div style="position:absolute;left:64px;right:64px;bottom:64px;color:{C_CREAM};">
      {headline_h1(headline, font_size="68px", font_weight=700, line_height=1.04, letter_spacing="-1.6px", text_wrap="balance", max_width="960px")}
      {accent_line(160, 3, "margin-top:26px;")}
    </div>
    """


def t24_v(photo, headline, eyebrow, logo):
    """Number-Stack 'TEIL 01/03' 4:5. Reportage-Reihe, Mono-Counter top,
    Headline + Akzent bottom."""
    eyebrow = eyebrow or "Serie Reporting"
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(120deg,rgba(24,39,58,0.85) 0%,rgba(24,39,58,0.3) 45%,rgba(24,39,58,0) 65%)")}
    <div style="position:absolute;top:64px;left:64px;color:{C_CREAM};">
      <span style="font-family:{FONT_MONO};font-size:16px;letter-spacing:2px;color:{C_GOLD};font-weight:600;">TEIL 01 / 03</span>
    </div>
    <div style="position:absolute;left:64px;bottom:64px;color:{C_CREAM};max-width:920px;">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;font-family:{FONT_BODY};font-size:15px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:{C_GOLD};margin-bottom:20px;">
        {gold_dot(10)} {eyebrow}
      </span>
      {headline_h1(headline, font_size="60px", font_weight=600, line_height=1.06, letter_spacing="-1.5px", text_wrap="balance")}
      {accent_line(140, 3, "margin-top:24px;")}
    </div>
    """


def t25_v(photo, headline, eyebrow, logo):
    """Cream-Card unten links 4:5. Kleine ruhige Card, Foto bleibt
    großflächig sichtbar."""
    eyebrow = eyebrow or "Leadership"
    logo_block = logo_inline(scale=0.85) if logo else ""
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0.2) 0%,rgba(24,39,58,0) 50%)")}
    <div style="position:absolute;left:64px;bottom:64px;background:{C_CREAM};
      padding:36px 44px;max-width:680px;color:{C_DEEP_SEA};box-shadow:0 8px 24px rgba(24,39,58,0.12);">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 14)}
      </div>
      {headline_h1(headline, font_size="42px", font_weight=700, line_height=1.08, letter_spacing="-1px", text_wrap="balance")}
      <div style="display:flex;align-items:center;gap:18px;margin-top:22px;">
        {accent_line(80, 3)}
        {logo_block}
      </div>
    </div>
    """


def t26_v(photo, headline, eyebrow, logo):
    """Minimaler Streifen unten 4:5. Vollbild Foto, schmaler Verlaufs-
    Streifen am Boden, Headline auf gescrimter Unterhälfte."""
    eyebrow = eyebrow or "Notiz"
    return f"""
    {_photo(photo)}
    <div style="position:absolute;left:0;right:0;bottom:0;height:6px;
      background:linear-gradient(90deg,{C_TEAL} 0%,{C_GOLD} 60%,transparent 100%);"></div>
    {_scrim("linear-gradient(180deg,rgba(24,39,58,0) 50%,rgba(24,39,58,0.85) 100%)")}
    <div style="position:absolute;left:64px;right:64px;bottom:54px;color:{C_CREAM};">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;font-family:{FONT_BODY};font-size:14px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:{C_GOLD};margin-bottom:16px;">
        {gold_dot(10)} {eyebrow}
      </span>
      {headline_h1(headline, font_size="58px", font_weight=600, line_height=1.06, letter_spacing="-1.4px", text_wrap="balance", max_width="960px")}
    </div>
    """


def t27_v(photo, headline, eyebrow, logo):
    """Split 4:5 inverted. Cream oben mit Headline + Logo, Foto unten
    fast vollflächig (analog T09v aber mit Headline im Cream-Block)."""
    eyebrow = eyebrow or "Finanzen · KI"
    logo_block = logo_inline(scale=1) if logo else ""
    return f"""
    <div style="position:absolute;left:0;right:0;top:0;height:600px;background:{C_CREAM};
      padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;color:{C_DEEP_SEA};">
      <div style="display:flex;align-items:center;gap:12px;">
        {gold_dot(11)}
        {eyebrow_span(eyebrow, C_TEAL, 15)}
      </div>
      <div>
        {accent_line(80, 3, "margin-bottom:22px;")}
        {headline_h1(headline, font_size="54px", font_weight=700, line_height=1.04, letter_spacing="-1.3px", text_wrap="balance", max_width="940px")}
      </div>
      <div>{logo_block}</div>
    </div>
    <div style="position:absolute;left:0;right:0;top:600px;bottom:0;overflow:hidden;">
      <img src="{photo}" style="width:100%;height:100%;object-fit:cover;display:block;">
    </div>
    """


def t30_v(photo, headline, eyebrow, logo):
    """Footer-Streifen + Headline oben 4:5. Headline thront im oberen
    Drittel auf scrim, Cream-Footer mit Subtitle + Verlauf-Border."""
    eyebrow = eyebrow or "Mittelstand"
    return f"""
    {_photo(photo)}
    {_scrim("linear-gradient(120deg,rgba(24,39,58,0.65) 0%,rgba(24,39,58,0.15) 40%,rgba(24,39,58,0) 60%)")}
    <div style="position:absolute;left:64px;top:64px;right:64px;color:{C_CREAM};max-width:940px;">
      <span class="tn-eyebrow" style="display:inline-flex;align-items:center;gap:12px;font-family:{FONT_BODY};font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:{C_GOLD};margin-bottom:20px;">
        {gold_dot(10)} {eyebrow}
      </span>
      {headline_h1(headline, font_size="62px", font_weight=700, line_height=1.04, letter_spacing="-1.6px", text_wrap="balance")}
    </div>
    <div style="position:absolute;left:0;right:0;bottom:0;padding:24px 64px;background:{C_CREAM};
      display:flex;justify-content:space-between;align-items:center;color:{C_DEEP_SEA};
      border-top:3px solid transparent;
      background-image:linear-gradient({C_CREAM},{C_CREAM}),linear-gradient(90deg,{C_TEAL},{C_GOLD} 60%,transparent);
      background-origin:padding-box,border-box;background-clip:padding-box,border-box;">
      <span style="font-family:{FONT_BODY};font-size:16px;font-weight:500;color:rgba(24,39,58,0.75);">Sondern an Menschen, Mut und Mandat.</span>
      {gold_dot(11)}
    </div>
    """


# --- Registry ----------------------------------------------------------

TEMPLATES = {
    "T01v": t01_v, "T02v": t02_v, "T03v": t03_v, "T04v": t04_v,
    "T06v": t06_v, "T07v": t07_v, "T08v": t08_v, "T09v": t09_v,
    "T10v": t10_v, "T11v": t11_v, "T12v": t12_v, "T13v": t13_v,
    "T14v": t14_v, "T15v": t15_v, "T16v": t16_v, "T17v": t17_v,
    "T18v": t18_v, "T19v": t19_v, "T20v": t20_v, "T21v": t21_v,
    "T22v": t22_v, "T24v": t24_v, "T25v": t25_v, "T26v": t26_v,
    "T27v": t27_v, "T28v": t28_v, "T30v": t30_v,
}

TEMPLATE_NAMES = {
    "T01v": "Default-Insight (Foto oben, Bottom-Lockup)",
    "T02v": "Bottom-Bar mit Verlauf (4:5)",
    "T03v": "Vertikaler Split · Cream-Panel unten",
    "T04v": "Cream-Card mittig im Bild",
    "T06v": "Bottom-Lockup + Serien-Label oben rechts",
    "T07v": "Zahl-Hook (großer Wert + Cream-Block unten)",
    "T08v": "Frage zentriert (Vollbild + Eyebrow-Pille)",
    "T09v": "Vertikaler Split · Cream-Panel oben",
    "T10v": "Cinematic minimal (Eyebrow oben, Headline unten)",
    "T11v": "Spiegelvariante · Headline rechts unten",
    "T12v": "Cream-Header-Bar oben mit Headline",
    "T13v": "Reporting · Eyebrow oben links, Headline unten links",
    "T14v": "Bottom-Scrim mit großer Headline",
    "T15v": "Portrait (Foto Vollfläche, schmaler Cream-Streifen unten)",
    "T16v": "Klartext-Statement (Foto oben, zentrierte Aussage Cream)",
    "T17v": "Diagonale Cream-Ecke unten links",
    "T18v": "Vertikaler Split · Deep-Sea-Block unten",
    "T19v": "Anführungszeichen-Quote, italic",
    "T20v": "Subtitle-Stack mittig links",
    "T21v": "Outline-Pille 'Neu' oben rechts",
    "T22v": "Magazin-Header-Strip + Headline unten",
    "T24v": "Number-Stack TEIL 01/03 + Headline unten",
    "T25v": "Cream-Card unten links",
    "T26v": "Minimaler Verlaufs-Streifen unten",
    "T27v": "Vertikaler Split · Cream-Panel oben mit Headline",
    "T28v": "Drei-Punkte-Liste (Foto oben, drei nummerierte Karten)",
    "T30v": "Footer-Streifen + Headline oben",
}

TEMPLATE_LOGO_DEFAULT = {
    "T01v": False, "T02v": True,  "T03v": True,  "T04v": False,
    "T06v": True,  "T07v": False, "T08v": True,  "T09v": True,
    "T10v": False, "T11v": True,  "T12v": False, "T13v": True,
    "T14v": False, "T15v": True,  "T16v": False, "T17v": True,
    "T18v": False, "T19v": True,  "T20v": False, "T21v": True,
    "T22v": False, "T24v": False, "T25v": True,  "T26v": False,
    "T27v": True,  "T28v": False, "T30v": False,
}


# --- Render-Pipeline ---------------------------------------------------

def build_template_html(template_id: str, photo_uri: str, headline: str,
                        eyebrow: str, logo: bool, overrides: str = "") -> str:
    if template_id not in TEMPLATES:
        raise SystemExit(f"Unknown template '{template_id}'. Allowed: {', '.join(sorted(TEMPLATES))}")
    safe_headline = html.escape(headline or "", quote=True)
    safe_eyebrow = html.escape(eyebrow or "", quote=True)
    body = TEMPLATES[template_id](photo_uri, safe_headline, safe_eyebrow, logo)
    return SHELL.format(bg=C_DEEP_SEA, font=FONT_BODY, w=WIDTH, h=HEIGHT, body=body, overrides=overrides)


def render(photo: Path, template_id: str, headline: str, eyebrow: str,
           logo: bool, output: Path, overrides: str = "") -> None:
    import tempfile
    if not photo.is_file():
        raise SystemExit(f"Photo not found: {photo}")

    photo_uri = photo_to_data_uri(photo)
    html = build_template_html(template_id, photo_uri, headline, eyebrow, logo, overrides)

    try:
        from playwright.sync_api import sync_playwright
    except ImportError:
        raise SystemExit(
            "playwright fehlt. Installieren mit:\n"
            "  pip install playwright && python -m playwright install chromium"
        )

    with tempfile.NamedTemporaryFile("w", suffix=".html", delete=False, encoding="utf-8") as fh:
        fh.write(html)
        html_path = Path(fh.name)

    try:
        with sync_playwright() as p:
            browser = p.chromium.launch()
            ctx = browser.new_context(viewport={"width": WIDTH, "height": HEIGHT}, device_scale_factor=1)
            page = ctx.new_page()
            page.goto(html_path.as_uri())
            page.evaluate("document.fonts.ready")
            page.wait_for_load_state("networkidle")
            output.parent.mkdir(parents=True, exist_ok=True)
            page.locator("#stage").screenshot(path=str(output), type="png")
            browser.close()
    finally:
        try:
            html_path.unlink()
        except OSError:
            pass


def main() -> int:
    ap = argparse.ArgumentParser(description=__doc__)
    ap.add_argument("--photo", required=True, type=Path)
    ap.add_argument("--template", required=True, choices=sorted(TEMPLATES))
    ap.add_argument("--headline", required=True)
    ap.add_argument("--eyebrow", default="")
    ap.add_argument("--logo", action="store_true")
    ap.add_argument("--logo-path", type=Path, default=None,
                    help="Pfad zur Logo-SVG-Datei. Ohne diesen Pfad rendert --logo nichts.")
    ap.add_argument("--output", required=True, type=Path)
    ap.add_argument("--headline-size", type=float, default=None)
    ap.add_argument("--headline-x", type=float, default=None)
    ap.add_argument("--headline-y", type=float, default=None)
    ap.add_argument("--eyebrow-size", type=float, default=None)
    ap.add_argument("--eyebrow-x", type=float, default=None)
    ap.add_argument("--eyebrow-y", type=float, default=None)
    ap.add_argument("--logo-scale", type=float, default=None)
    ap.add_argument("--logo-x", type=float, default=None)
    ap.add_argument("--logo-y", type=float, default=None)
    ap.add_argument("--block-x", type=float, default=None)
    ap.add_argument("--block-y", type=float, default=None)
    args = ap.parse_args()

    if args.logo_path is not None:
        set_logo_path(args.logo_path)

    overrides = build_override_style(
        args.headline_size, args.headline_x, args.headline_y,
        args.eyebrow_size, args.eyebrow_x, args.eyebrow_y,
        args.logo_scale, args.logo_x, args.logo_y,
        args.block_x, args.block_y,
    )

    render(args.photo, args.template, args.headline, args.eyebrow,
           args.logo, args.output, overrides)
    print(f"OK: {args.output}")
    return 0


if __name__ == "__main__":
    raise SystemExit(main())
