import { test, expect } from '@playwright/test';
import { ROUTES, VIEWPORTS } from './helpers';

for (const route of ROUTES) {
  for (const vp of VIEWPORTS) {
    test(`${route} @ ${vp.name} (${vp.width}x${vp.height}) — no horizontal scroll`, async ({ page }) => {
      await page.setViewportSize({ width: vp.width, height: vp.height });
      await page.goto(route);
      await page.locator('h1').first().waitFor();
      const overflow = await page.evaluate(() =>
        document.documentElement.scrollWidth > document.documentElement.clientWidth,
      );
      expect(overflow).toBe(false);
    });
  }
}

test('mobile (375x667): hero h1 visible above the fold', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');
  await expect(page.locator('h1')).toBeInViewport();
});

test('subscribe form input + button meet 40px tap target on mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');
  const email = page.locator('form#subscribe-hero input[type="email"]');
  const emailBox = await email.boundingBox();
  expect(emailBox).not.toBeNull();
  expect(emailBox!.height).toBeGreaterThanOrEqual(40);

  const submit = page.locator('form#subscribe-hero button[type="submit"]');
  const submitBox = await submit.boundingBox();
  expect(submitBox).not.toBeNull();
  expect(submitBox!.height).toBeGreaterThanOrEqual(40);
});

test('issue cards stack to single column on mobile', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('/');
  const cards = page.locator('section#issues a.issue-card');
  const first = await cards.nth(0).boundingBox();
  const second = await cards.nth(1).boundingBox();
  expect(first).not.toBeNull();
  expect(second).not.toBeNull();
  // Second card sits below first (y > first.y + first.height/2)
  expect(second!.y).toBeGreaterThan(first!.y + first!.height / 2);
});
