import base64, os, subprocess
W = os.path.dirname(os.path.abspath(__file__)); OUT = os.path.join(W, "out")
CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
FONTS = open(os.path.join(W, "gf", "gf-local.css"), encoding="utf-8").read()
def uri(p):
    return "data:image/jpeg;base64," + base64.b64encode(open(p,'rb').read()).decode()
CARDS = [
    ("oneshot-01-pain.jpg", "01 &middot; Pain-Hook", "Cold &mdash; ZG-A Inhaber-Betrieb", "&bdquo;Jeder tr&auml;gt was anderes?&ldquo;"),
    ("oneshot-02-auftritt.jpg", "02 &middot; Kern-USP", "Warm &mdash; alle Zielgruppen", "&bdquo;Starker Auftritt. Einfach bestellt.&ldquo;"),
    ("oneshot-03-vorher-nachher.jpg", "03 &middot; Vorher/Nachher", "Cold &mdash; st&auml;rkstes CRO-Format", "&bdquo;Vom Gr&ouml;&szlig;enzettel zum Auftritt.&ldquo;"),
    ("oneshot-04-trust.jpg", "04 &middot; Trust/Qualit&auml;t", "Hot &mdash; Retargeting", "&bdquo;Arbeit, die Vertrauen zeigt.&ldquo;"),
]
cards = "".join(
    "<figure><img src='%s'><figcaption><b>%s</b><span class='stage'>%s</span>"
    "<span class='hl'>%s</span></figcaption></figure>" % (uri(os.path.join(OUT,f)), t, s, h)
    for f, t, s, h in CARDS)
html = """<!doctype html><html lang='de'><head><meta charset='utf-8'><style>%s
*{margin:0;padding:0;box-sizing:border-box}
body{width:2320px;background:#fbfaf7;font-family:'Manrope',Arial,sans-serif;padding:72px}
header{margin-bottom:52px}
.kick{font-size:24px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#06233c;
      display:flex;align-items:center;gap:16px;margin-bottom:20px}
.kick::before{content:'';width:38px;height:5px;background:#d71920}
h1{font-family:'DM Serif Display',Georgia,serif;font-size:76px;color:#06233c;line-height:1.05}
h1 i{font-style:italic;color:#d71920}
.sub{margin-top:18px;font-size:26px;font-weight:600;color:#06233c}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px}
figure{background:#fff;border:1px solid #d9ddd7;border-radius:12px;overflow:hidden}
figure img{width:100%%;display:block}
figcaption{padding:30px 34px 34px;display:flex;flex-direction:column;gap:10px}
figcaption b{font-size:34px;color:#06233c;font-weight:800}
.stage{font-size:23px;font-weight:700;color:#d71920;letter-spacing:.04em}
.hl{font-size:24px;color:#06233c;font-weight:500}
</style></head><body><header>
<div class='kick'>weinor Partnershop &mdash; Conversion-Creatives</div>
<h1>Vier One-Shots, <i>launchfertig</i>.</h1>
<div class='sub'>1080&times;1080 &middot; Headline + CTA eingebrannt &middot; Ziel: Partnershop-Zugang anfordern</div>
</header><div class='grid'>%s</div></body></html>""" % (FONTS, cards)
hp = os.path.join(OUT, "oneshot-overview.html")
open(hp, "w", encoding="utf-8").write(html)
png = os.path.join(OUT, "oneshot-overview.png")
subprocess.run([CHROME,"--headless","--disable-gpu","--hide-scrollbars","--force-device-scale-factor=1",
                "--window-size=2320,3600","--screenshot="+png,"file://"+hp], check=True, capture_output=True)
from PIL import Image
im = Image.open(png).convert("RGB"); w,h = im.size
bg = im.getpixel((5, h-5))
last = 0
for y in range(h-1, -1, -1):
    row = [im.getpixel((x, y)) for x in range(0, w, 24)]
    if any(abs(c[0]-bg[0])+abs(c[1]-bg[1])+abs(c[2]-bg[2]) > 18 for c in row):
        last = y; break
im.crop((0, 0, w, min(h, last+73))).save(png)
print("getrimmt auf", Image.open(png).size)
jpg = os.path.join(OUT, "oneshot-overview.jpg")
subprocess.run(["magick", png, "-resize", "1800x", "-quality", "86", "-strip", jpg], check=True, capture_output=True)
print("overview %.0f KB" % (os.path.getsize(jpg)/1024))
