import { test } from '@playwright/test';
test('mobile hero geometry', async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  await page.goto('/');
  const out = await page.evaluate(() => {
    const pick = (sel: string) => {
      const el = document.querySelector(sel) as HTMLElement | null;
      if (!el) return null;
      const r = el.getBoundingClientRect();
      const cs = getComputedStyle(el);
      return { left: Math.round(r.left), right: Math.round(r.right),
               width: Math.round(r.width), height: Math.round(r.height),
               pad: cs.padding, cls: el.className.toString().slice(0, 40) };
    };
    const input = document.querySelector('input[type="search"]') as HTMLElement;
    const box = input?.closest('div');
    const form = input?.closest('form');
    return {
      h1: pick('h1'),
      lede: pick('h1 + p') ?? pick('p'),
      omniBox: box ? { left: Math.round(box.getBoundingClientRect().left),
                       width: Math.round(box.getBoundingClientRect().width),
                       pad: getComputedStyle(box).padding,
                       dir: getComputedStyle(box).flexDirection,
                       cls: box.className.toString().slice(0,40) } : null,
      input: pick('input[type="search"]'),
      form: form ? { left: Math.round(form.getBoundingClientRect().left),
                     width: Math.round(form.getBoundingClientRect().width),
                     pad: getComputedStyle(form).padding,
                     cls: form.className.toString().slice(0,40) } : null,
      filterBar: pick('form').  // placeholder
        constructor === Object ? null : null,
    };
  });
  console.log(JSON.stringify(out, null, 2));
});