#!/usr/bin/env node
// shoot.mjs — takes full-page screenshots at both widths, so your AI can look at them.
//   npm run shoot                    (screenshots the local files)
//   node shoot.mjs https://your.site (screenshots the live page — do this before publishing)
//
// Needs Playwright once:  npx playwright install chromium

import { chromium } from "playwright";
import { mkdirSync } from "fs";

const target = process.argv[2] || "file://" + process.cwd() + "/site/index.html";
const WIDTHS = [
  [1440, 900, "desktop"],
  [390, 844, "mobile"],
];

mkdirSync("docs", { recursive: true });
const browser = await chromium.launch();

for (const [width, height, name] of WIDTHS) {
  const page = await browser.newPage({ viewport: { width, height }, deviceScaleFactor: 2 });
  await page.goto(target, { waitUntil: "networkidle" });

  // Scroll to the bottom and back, so scroll-triggered animations have run
  // before the picture is taken. Without this you screenshot an empty ledger.
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.waitForTimeout(1500);
  await page.evaluate(() => window.scrollTo(0, 0));
  await page.waitForTimeout(600);

  await page.screenshot({ path: `docs/screenshot-${name}.png`, fullPage: true });
  console.log(`docs/screenshot-${name}.png  (${width}px)`);
}

await browser.close();
console.log("\nNow look at both pictures before you say the work is done.");
