// Viewport-sized segments for visual review (top of page + scroll offsets).
import { chromium } from 'playwright';
const BASE = process.argv[2] ?? 'http://localhost:8290';
const OUT = new URL('./screens/seg/', import.meta.url).pathname;
import { mkdirSync } from 'node:fs';
mkdirSync(OUT, { recursive: true });
const PAGES = ['/', '/countries', '/countries/canada', '/countries/canada/economy'];
const browser = await chromium.launch();
for (const width of [390, 1440]) {
  const mobile = width < 768;
  const ctx = await browser.newContext({ viewport: { width, height: mobile ? 844 : 900 }, isMobile: mobile, hasTouch: mobile });
  const page = await ctx.newPage();
  for (const path of PAGES) {
    await page.goto(BASE + path, { waitUntil: 'networkidle' });
    await page.evaluate(() => document.fonts.ready);
    const h = await page.evaluate(() => document.documentElement.scrollHeight);
    const vh = mobile ? 844 : 900;
    const offsets = [0, Math.round(h * 0.25), Math.round(h * 0.5), Math.round(h * 0.75), h - vh].filter((o, i, a) => a.indexOf(o) === i);
    const name = path === '/' ? 'home' : path.slice(1).replace(/\//g, '_');
    for (const [i, o] of offsets.entries()) {
      await page.evaluate((y) => window.scrollTo(0, y), o);
      await page.waitForTimeout(400);
      await page.screenshot({ path: `${OUT}${name}-${width}-${i}.png` });
    }
  }
  await ctx.close();
}
await browser.close();