import asyncio
from playwright.async_api import async_playwright

BASE = 'http://localhost:8096'
OUT  = '/home/sirdrez/arisingmedia-websites/floorithardwoodfloors.com/.planning/screenshots/typo'

PAGES = [
    ('home',     '/'),
    ('about',    '/about/'),
    ('services', '/services/'),
    ('service',  '/services/floor-refinishing/'),
    ('location', '/locations/buffalo/'),
    ('contact',  '/contact/'),
    ('reviews',  '/reviews/'),
    ('blog',     '/blog/'),
    ('blogpost', '/blog/how-to-tell-if-floors-need-refinishing/'),
]

async def main():
    import os; os.makedirs(OUT, exist_ok=True)
    async with async_playwright() as p:
        br = await p.firefox.launch(headless=True)
        page = await br.new_page()
        await page.set_viewport_size({'width': 1280, 'height': 900})

        for name, path in PAGES:
            await page.goto(BASE + path, wait_until='networkidle', timeout=20000)
            # Full page
            await page.screenshot(path=f'{OUT}/{name}-full.png', full_page=True)

            # Component clips: topbar, header, hero, first content section, footer
            h = await page.evaluate('document.body.scrollHeight')
            clips = {
                'topbar':   {'x':0,'y':0,'width':1280,'height':min(50,h)},
                'header':   {'x':0,'y':44,'width':1280,'height':80},
                'hero':     {'x':0,'y':120,'width':1280,'height':300},
                'footer':   {'x':0,'y':max(0,h-250),'width':1280,'height':250},
            }
            for clip_name, clip in clips.items():
                try:
                    await page.screenshot(path=f'{OUT}/{name}-{clip_name}.png', clip=clip)
                except:
                    pass  # Skip if clip is invalid

            # Collect typography metrics
            metrics = await page.evaluate('''() => {
                function sample(sel) {
                    const el = document.querySelector(sel);
                    if (!el) return null;
                    const s = getComputedStyle(el);
                    return {
                        fontSize: s.fontSize,
                        lineHeight: s.lineHeight,
                        fontWeight: s.fontWeight,
                        fontFamily: s.fontFamily.split(",")[0].trim()
                    };
                }
                return {
                    h1: sample("h1"),
                    h2: sample("h2"),
                    h3: sample("h3"),
                    body: sample("p"),
                    eyebrow: sample(".eyebrow"),
                    lead: sample(".lead"),
                    btn: sample(".btn"),
                    navLink: sample(".header-nav a"),
                    footerText: sample(".footer-brand p"),
                };
            }''')
            print(f"\n=== {name} ===")
            for el, vals in metrics.items():
                if vals:
                    print(f"  {el}: {vals['fontSize']} / lh:{vals['lineHeight']} / w:{vals['fontWeight']} / {vals['fontFamily']}")

        # Mobile viewport audit
        print("\n\n=== MOBILE (375x812) ===")
        await page.set_viewport_size({'width': 375, 'height': 812})
        mobile_pages = [
            ('home-mobile',     '/'),
            ('blog-mobile',     '/blog/'),
            ('contact-mobile',  '/contact/'),
        ]
        for name, path in mobile_pages:
            await page.goto(BASE + path, wait_until='networkidle', timeout=20000)
            await page.screenshot(path=f'{OUT}/{name}-full.png', full_page=True)

            metrics = await page.evaluate('''() => {
                function sample(sel) {
                    const el = document.querySelector(sel);
                    if (!el) return null;
                    const s = getComputedStyle(el);
                    return {
                        fontSize: s.fontSize,
                        lineHeight: s.lineHeight,
                        fontWeight: s.fontWeight,
                        fontFamily: s.fontFamily.split(",")[0].trim()
                    };
                }
                return {
                    h1: sample("h1"),
                    h2: sample("h2"),
                    h3: sample("h3"),
                    body: sample("p"),
                };
            }''')
            print(f"\n=== {name} ===")
            for el, vals in metrics.items():
                if vals:
                    print(f"  {el}: {vals['fontSize']} / lh:{vals['lineHeight']} / w:{vals['fontWeight']}")

        await br.close()

asyncio.run(main())
print("\nDone")
