import { render, screen } from "@testing-library/react";
import { getCaseMedia } from "@/app/cases/_components/case-media";
import { compactHero } from "@/app/cases/_components/hero-styles";
import ServicesIndexPage from "./page";

/**
 * Teste de caminhos-base do topo de ServicesIndexPage sem mosaico: nenhum case de cliente tem captura gravada.
 * O caminho com o mosaico (três pôsteres, duas colunas) está em [slug]/page.test.tsx.
 */

jest.mock("@/app/cases/_components/case-media", () => ({
  getCaseMedia: jest.fn(),
}));

const mockedGetCaseMedia = jest.mocked(getCaseMedia);

afterEach(() => {
  mockedGetCaseMedia.mockReset();
});

describe("ServicesIndexPage: topo sem captura gravada", () => {
  it("path: no capture for any client -> no mosaic, a lower one-column strip, the text and buttons stay", () => {
    mockedGetCaseMedia.mockReturnValue(undefined);

    const { container } = render(<ServicesIndexPage />);

    const hero = container.querySelector("section");
    expect(hero).toHaveClass(compactHero);
    expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
    expect(hero?.querySelector("img")).toBeNull();
    expect(
      screen.getByRole("heading", {
        level: 1,
        name: "Sites, sistemas e aplicativos sob medida.",
      }),
    ).toBeVisible();
    // o botão do topo leva à lista de cases (não há mais seção de projetos nesta página)
    expect(screen.getByRole("link", { name: "Ver os cases" })).toHaveAttribute(
      "href",
      "/cases",
    );
    const contactLinks = screen.getAllByRole("link", {
      name: "Falar sobre meu projeto",
    });
    expect(contactLinks).toHaveLength(2);
    for (const link of contactLinks) {
      expect(link).toHaveAttribute(
        "href",
        expect.stringContaining("https://wa.me/"),
      );
    }
    // as três ofertas seguem no topo da página, mesmo sem nenhuma captura
    expect(
      screen.getByRole("heading", {
        level: 2,
        name: "Três jeitos de começar.",
      }),
    ).toBeVisible();
  });
});