const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  
  const viewports = [
    { name: 'desktop-1440', width: 1440, height: 900 },
    { name: 'desktop-1280', width: 1280, height: 800 },
    { name: 'tablet-768', width: 768, height: 1024 },
    { name: 'mobile-375', width: 375, height: 812 },
    { name: 'mobile-390', width: 390, height: 844 },
  ];

  for (const vp of viewports) {
    const page = await browser.newPage({ viewport: { width: vp.width, height: vp.height } });
    await page.goto('https://williamspressurewashingservices.com', { waitUntil: 'networkidle', timeout: 30000 });
    // Wait a bit for any lazy-loaded images
    await page.waitForTimeout(2000);
    await page.screenshot({ path: `/home/johnny/.openclaw/workspace/Projects/WilliamsPressureWashingServices/screenshots/${vp.name}.png`, fullPage: false });
    console.log(`Screenshot saved: ${vp.name} (${vp.width}x${vp.height})`);
    await page.close();
  }

  // Also take a long full-page screenshot on desktop
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto('https://williamspressurewashingservices.com', { waitUntil: 'networkidle', timeout: 30000 });
  await page.waitForTimeout(2000);
  await page.screenshot({ path: '/home/johnny/.openclaw/workspace/Projects/WilliamsPressureWashingServices/screenshots/full-page-desktop.png', fullPage: true });
  console.log('Screenshot saved: full-page-desktop (full scroll)');
  await page.close();

  await browser.close();
  console.log('Done!');
})();
