import {chromium} from 'playwright';
const O = process.argv[2];
const b = await chromium.launch({channel:'chrome'});
const p = await b.newContext({viewport:{width:390,height:844},deviceScaleFactor:2,isMobile:true,hasTouch:true}).then(c=>c.newPage());
const bad=[],errs=[];
p.on('response',r=>{if(r.status()>=400)bad.push(r.status()+' '+r.url().slice(-44));});
p.on('console',m=>{if(m.type()==='error')errs.push(m.text().slice(0,80));});
for (const [n,u] of [['home','http://localhost/s/stay6'],['gunsan','http://localhost/s/stay6/gunsan'],['booking','http://localhost/s/stay6/booking']]) {
  await p.goto(u,{waitUntil:'domcontentloaded'}); await p.waitForTimeout(6500);
  const i = await p.evaluate(()=>{
    const vis=e=>{const s=getComputedStyle(e),r=e.getBoundingClientRect();return s.display!=='none'&&s.visibility!=='hidden'&&r.width>0&&r.height>0;};
    const bars=[...document.querySelectorAll('header,#w4d-pages')].filter(vis)
      .map(e=>({tag:e.tagName+(e.id?'#'+e.id:''), h:Math.round(e.getBoundingClientRect().height), top:Math.round(e.getBoundingClientRect().top)}));
    const nav=[...document.querySelectorAll('header a')].filter(vis).map(a=>a.textContent.trim()+' → '+a.getAttribute('href'));
    const ids=[...document.querySelectorAll('section[id]')].filter(vis).map(s=>s.id);
    const dead=[...document.querySelectorAll('a[href^="#"]')].filter(vis)
      .map(a=>a.getAttribute('href').slice(1)).filter(h=>h&&!document.getElementById(h));
    return {bars, nav, sectionIds:ids, deadAnchors:[...new Set(dead)],
      screens:+(document.body.scrollHeight/844).toFixed(1),
      ov:document.documentElement.scrollWidth>window.innerWidth};
  });
  console.log('== '+n, JSON.stringify(i));
  await p.screenshot({path:`${O}/${n}-top.png`});
}
console.log('errors:',errs.slice(0,3)); console.log('bad:',[...new Set(bad)].slice(0,5));
await b.close();