from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    b = p.chromium.launch(headless=True)

    # Touch-targets op mobiel (390)
    pg = b.new_context(viewport={"width": 390, "height": 844}).new_page()
    pg.goto("http://localhost:4321/", wait_until="networkidle", timeout=60000)
    print("=== HERO TOUCH-TARGETS @390 (min 44px) ===")
    for name, sel in {
        "CTA primair": ".hero__cta-primary",
        "CTA secundair (link)": ".hero__cta-secondary",
        "card (swipe)": ".hero__card",
    }.items():
        el = pg.query_selector(sel)
        if el:
            box = el.bounding_box()
            if box:
                flag = "" if min(box["width"], box["height"]) >= 44 else "  <-- < 44"
                print(f"  {name:22} {box['width']:.0f} x {box['height']:.0f}{flag}")
        else:
            print(f"  {name:22} (niet gevonden)")

    # Hero gallery: scrollbaar op mobiel?
    rail = pg.query_selector(".hero__rail")
    if rail:
        sw = pg.eval_on_selector(".hero__rail", "e=>e.scrollWidth")
        cw = pg.eval_on_selector(".hero__rail", "e=>e.clientWidth")
        print(f"\n  mobiele rail: scrollWidth={sw} clientWidth={cw} swipebaar={'ja' if sw>cw+1 else 'nee'}")

    # Hero image-attrs (desktop)
    d = b.new_context(viewport={"width": 1440, "height": 900}).new_page()
    d.goto("http://localhost:4321/", wait_until="networkidle", timeout=60000)
    print("\n=== HERO GALLERY IMAGES (desktop, geladen bron) ===")
    imgs = d.eval_on_selector_all(".hero__shot img",
        "els=>els.map(e=>({src:e.currentSrc.split('/').pop(), w:e.naturalWidth, loading:e.loading, dec:e.decoding}))")
    for i in imgs:
        print("  ", i)

    # LCP-kandidaat (grootste element boven de vouw) - ruwe indicatie
    print("\n=== H1 ===")
    h1 = d.query_selector(".hero__title")
    if h1:
        bb = h1.bounding_box()
        print(f"  h1 box: {bb['width']:.0f} x {bb['height']:.0f} @ top={bb['y']:.0f}")

    b.close()