import { expect, test } from "@playwright/test";

test.describe("Blog — Prismic-style layout", () => {
  test("/blog renders hero, featured bento and per-category carousels", async ({ page }) => {
    await page.goto("/blog");

    // Editorial hero
    await expect(page.getByText("The Advance Manufacturers Blog")).toBeVisible();
    await expect(page.getByRole("heading", { level: 1, name: "Blog" })).toBeVisible();

    // Featured bento
    await expect(page.getByRole("heading", { name: "Featured" }).first()).toBeVisible();
    await expect(page.getByText("Latest articles").first()).toBeVisible();
    // Diagnostic: the default view must render exactly once (no fallback+children double).
    const featuredCount = await page.getByRole("heading", { name: "Featured" }).count();
    console.log(`[diag] "Featured" headings on /blog: ${featuredCount}`);

    // Category sections + carousel controls
    await expect(page.getByRole("heading", { level: 2, name: "Manufacturing Process" })).toBeVisible();
    await expect(page.getByRole("link", { name: "Read more" }).first()).toBeVisible();
    await expect(page.getByRole("button", { name: "Next" }).first()).toBeVisible();

    // Regression: below-fold category cards must be VISIBLE (not opacity:0).
    // The "News" section is last on the page — its card byline must be visible.
    await page
      .getByRole("heading", { level: 2, name: "News" })
      .scrollIntoViewIfNeeded();
    const bylines = page.getByText("By Advance Manufacturers");
    await expect(bylines.last()).toBeVisible();
    expect(await bylines.count()).toBeGreaterThanOrEqual(6);

    await page.screenshot({ path: "e2e/__screenshots__/blog-en.png", fullPage: true });
  });

  test("/fr/blog is localized", async ({ page }) => {
    await page.goto("/fr/blog");
    await expect(page.getByText("Le blog Advance Manufacturers")).toBeVisible();
    await expect(page.getByRole("link", { name: "Lire la suite" }).first()).toBeVisible();
    await page.screenshot({ path: "e2e/__screenshots__/blog-fr.png", fullPage: true });
  });
});