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

test.describe("Home Page", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/");
  });

  test("should display hero with headline 'Veranstaltungstechnik'", async ({ page }) => {
    await expect(page.locator('[data-testid="hero-headline"]')).toContainText("Veranstaltungstechnik");
  });

  test("should have CTA button linking to /mietkatalog", async ({ page }) => {
    const cta = page.locator('[data-testid="hero-cta-mietkatalog"]');
    await expect(cta).toBeVisible();
    await expect(cta).toHaveAttribute("to", "/mietkatalog");
  });

  test("should have CTA button linking to /kontakt", async ({ page }) => {
    const cta = page.locator('[data-testid="hero-cta-kontakt"]');
    await expect(cta).toBeVisible();
    await expect(cta).toHaveAttribute("to", "/kontakt");
  });

  test("should display all 8 services", async ({ page }) => {
    const servicesSection = page.locator('[data-testid="services-section"]');
    await expect(servicesSection).toBeVisible();
    await expect(servicesSection).toContainText("Vermietung");
    await expect(servicesSection).toContainText("Verkauf");
    await expect(servicesSection).toContainText("Personal");
    await expect(servicesSection).toContainText("Transport");
    await expect(servicesSection).toContainText("Lagerung");
    await expect(servicesSection).toContainText("Werkstatt");
    await expect(servicesSection).toContainText("Installation");
    await expect(servicesSection).toContainText("Booking");
  });

  test("should display speaker grid with 6 equipment types", async ({ page }) => {
    const grid = page.locator('[data-testid="speaker-grid"]');
    await expect(grid).toBeVisible();
    await expect(grid).toContainText("Lautsprecher");
    await expect(grid).toContainText("Mischpulte");
    await expect(grid).toContainText("Lichtanlagen");
    await expect(grid).toContainText("Rigging");
    await expect(grid).toContainText("Traversen");
    await expect(grid).toContainText("Komplett-Setups");
  });

  test("should display about section with stats", async ({ page }) => {
    const about = page.locator('[data-testid="about-section"]');
    await expect(about).toBeVisible();
    await expect(about).toContainText("20+");
    await expect(about).toContainText("1000+");
    await expect(about).toContainText("500+");
  });

  test("should have mietkatalog CTA section", async ({ page }) => {
    const cta = page.locator('[data-testid="mietkatalog-cta"]');
    await expect(cta).toBeVisible();
    const link = page.locator('[data-testid="cta-mietkatalog-link"]');
    await expect(link).toBeVisible();
  });

  test("should be mobile-responsive at 375px width", async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 667 });
    await expect(page.locator('[data-testid="hero-headline"]')).toBeVisible();
    await expect(page.locator('[data-testid="services-section"]')).toBeVisible();
  });
});