from playwright.sync_api import sync_playwright
import os

OUT = os.path.abspath("shots")
os.makedirs(OUT, exist_ok=True)

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    ctx = browser.new_context(viewport={"width": 1440, "height": 900}, device_scale_factor=2)
    page = ctx.new_page()
    page.goto("http://localhost:4321/", wait_until="networkidle", timeout=60000)
    page.wait_for_timeout(2800)

    # zet slider midden zodat de hero-kop goed leesbaar is
    page.evaluate("""() => { const el = document.querySelector('[data-ba]'); if (el) { el.style.animation='none'; el.style.setProperty('--pos','50%'); } }""")
    page.wait_for_timeout(300)

    # header + hero
    page.screenshot(path=os.path.join(OUT, "brand-hero.png"))
    print("OK brand-hero.png")

    # tight crop van het logo (linksboven in de header)
    brand = page.query_selector(".brand")
    if brand:
        brand.screenshot(path=os.path.join(OUT, "brand-logo.png"))
        print("OK brand-logo.png")

    browser.close()