/**
 * Pricing Regression Test Suite
 *
 * Ensures the pricing table maintains exactly 5 original tiers and prevents
 * unintended changes to pricing structure, values, or features.
 *
 * CRITICAL: These tests enforce immutability of baseline pricing configuration.
 * Any test failures indicate unauthorized pricing changes that must be investigated.
 */

import { test, expect, Page } from '@playwright/test';
import {
  BASELINE_TIER_IDS,
  BASELINE_PRICES,
  BASELINE_SETUP_FEES,
  POPULAR_TIER_ID,
  validateYearlyDiscount,
} from '@/lib/validators/pricing.validator';

// Helper function to navigate to pricing page
async function navigateToPricing(page: Page, lang: string = 'en') {
  await page.goto(`http://localhost:9000/${lang}/pricing`);
  await expect(page).toHaveURL(new RegExp(`/${lang}/pricing`));

  // Dismiss cookie consent modal if present
  const cookieAcceptButton = page.locator('button:has-text("Accept All")');
  if (await cookieAcceptButton.isVisible({ timeout: 2000 }).catch(() => false)) {
    await cookieAcceptButton.click();
    await page.waitForTimeout(500); // Allow modal to disappear
  }
}

// Helper function to get currency symbol
function getCurrencySymbol(currency: string): string {
  const symbols: Record<string, string> = {
    GBP: '£',
    USD: '$',
    EUR: '€',
    SAR: 'SAR ',
    AED: 'AED ',
    QAR: 'QAR ',
    KWD: 'KWD ',
    BHD: 'BHD ',
    OMR: 'OMR ',
  };
  return symbols[currency] || currency;
}

test.describe('Pricing Regression - Lock to 5 Original Tiers', () => {
  test.beforeEach(async ({ page }) => {
    // Clear state before each test
    await page.context().clearCookies();
  });

  test('CRITICAL: Must have exactly 5 pricing tiers (tier1-tier5)', async ({ page }) => {
    await navigateToPricing(page);

    // Wait for pricing cards to load
    await page.waitForSelector('[data-tier-id]', { timeout: 10000 });

    // LOCKED ASSERTION: Exactly 5 pricing cards must exist
    const pricingCards = page.locator('[data-tier-id]');
    await expect(pricingCards).toHaveCount(5);

    // Verify each expected tier ID exists
    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      await expect(tierCard).toBeVisible();
    }
  });

  test('CRITICAL: tier1 (Starter) pricing must match baseline', async ({ page }) => {
    await navigateToPricing(page);

    const tier1Card = page.locator('[data-tier-id="tier1"]');
    await expect(tier1Card).toBeVisible();

    // Verify tier name
    await expect(tier1Card.locator('h3')).toContainText('Starter');

    // Verify monthly price displays £179
    const priceText = await tier1Card.locator('.text-4xl').textContent();
    expect(priceText).toContain('£179');

    // Verify setup fee displays £199
    const setupText = await tier1Card.textContent();
    expect(setupText).toContain('Setup: £199');

    // Verify NOT popular (no badge)
    const popularBadge = tier1Card.locator('text=/Most Popular/i');
    await expect(popularBadge).not.toBeVisible();
  });

  test('CRITICAL: tier2 (Professional) pricing must match baseline', async ({ page }) => {
    await navigateToPricing(page);

    const tier2Card = page.locator('[data-tier-id="tier2"]');
    await expect(tier2Card).toBeVisible();

    // Verify tier name
    await expect(tier2Card.locator('h3')).toContainText('Professional');

    // Verify monthly price displays £209
    const priceText = await tier2Card.locator('.text-4xl').textContent();
    expect(priceText).toContain('£209');

    // Verify setup fee displays £199
    const setupText = await tier2Card.textContent();
    expect(setupText).toContain('Setup: £199');

    // CRITICAL: tier2 MUST be popular (has badge)
    const popularBadge = tier2Card.locator('text=/Most Popular/i');
    await expect(popularBadge).toBeVisible();
  });

  test('CRITICAL: tier3 (Business) pricing must match baseline', async ({ page }) => {
    await navigateToPricing(page);

    const tier3Card = page.locator('[data-tier-id="tier3"]');
    await expect(tier3Card).toBeVisible();

    // Verify tier name
    await expect(tier3Card.locator('h3')).toContainText('Business');

    // Verify monthly price displays £249
    const priceText = await tier3Card.locator('.text-4xl').textContent();
    expect(priceText).toContain('£249');

    // Verify setup fee displays £199
    const setupText = await tier3Card.textContent();
    expect(setupText).toContain('Setup: £199');

    // Verify NOT popular
    const popularBadge = tier3Card.locator('text=/Most Popular/i');
    await expect(popularBadge).not.toBeVisible();
  });

  test('CRITICAL: tier4 (Enterprise) pricing must match baseline', async ({ page }) => {
    await navigateToPricing(page);

    const tier4Card = page.locator('[data-tier-id="tier4"]');
    await expect(tier4Card).toBeVisible();

    // Verify tier name
    await expect(tier4Card.locator('h3')).toContainText('Enterprise');

    // Verify monthly price displays £349
    const priceText = await tier4Card.locator('.text-4xl').textContent();
    expect(priceText).toContain('£349');

    // Verify setup fee displays £199
    const setupText = await tier4Card.textContent();
    expect(setupText).toContain('Setup: £199');

    // Verify NOT popular
    const popularBadge = tier4Card.locator('text=/Most Popular/i');
    await expect(popularBadge).not.toBeVisible();
  });

  test('CRITICAL: tier5 (Ultimate) pricing must match baseline', async ({ page }) => {
    await navigateToPricing(page);

    const tier5Card = page.locator('[data-tier-id="tier5"]');
    await expect(tier5Card).toBeVisible();

    // Verify tier name
    await expect(tier5Card.locator('h3')).toContainText('Ultimate');

    // Verify monthly price displays £449
    const priceText = await tier5Card.locator('.text-4xl').textContent();
    expect(priceText).toContain('£449');

    // CRITICAL: tier5 is ONLY tier with £299 setup fee
    const setupText = await tier5Card.textContent();
    expect(setupText).toContain('Setup: £299');

    // Verify NOT popular
    const popularBadge = tier5Card.locator('text=/Most Popular/i');
    await expect(popularBadge).not.toBeVisible();
  });

  test('CRITICAL: Only tier2 must have "Most Popular" badge', async ({ page }) => {
    await navigateToPricing(page);

    // Wait for cards to load
    await page.waitForSelector('[data-tier-id]', { timeout: 10000 });

    // Verify exactly ONE popular badge exists on the page
    const popularBadges = page.locator('text=/Most Popular/i');
    await expect(popularBadges).toHaveCount(1);

    // Verify it's on tier2 specifically
    const tier2Card = page.locator('[data-tier-id="tier2"]');
    const tier2PopularBadge = tier2Card.locator('text=/Most Popular/i');
    await expect(tier2PopularBadge).toBeVisible();

    // Verify other tiers do NOT have popular badge
    const otherTierIds = BASELINE_TIER_IDS.filter(id => id !== POPULAR_TIER_ID);
    for (const tierId of otherTierIds) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const popularBadge = tierCard.locator('text=/Most Popular/i');
      await expect(popularBadge).not.toBeVisible();
    }
  });

  test('Setup fees regression - Verify baseline setup fees', async ({ page }) => {
    await navigateToPricing(page);

    // Verify tier1-tier4 have £199 setup fee
    const standardSetupTiers = ['tier1', 'tier2', 'tier3', 'tier4'];
    for (const tierId of standardSetupTiers) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const setupText = await tierCard.textContent();
      expect(setupText).toContain('Setup: £199');
    }

    // Verify tier5 has £299 setup fee (unique)
    const tier5Card = page.locator('[data-tier-id="tier5"]');
    const tier5Setup = await tier5Card.textContent();
    expect(tier5Setup).toContain('Setup: £299');
  });

  test('Currency conversion regression - All 9 currencies maintain correct conversion', async ({ page }) => {
    const currencies = [
      { code: 'GBP', symbol: '£', tier1Expected: 179 },
      { code: 'USD', symbol: '$', tier1Expected: 227 }, // 179 * 1.27
      { code: 'EUR', symbol: '€', tier1Expected: 209 }, // 179 * 1.17
      { code: 'SAR', symbol: 'SAR ', tier1Expected: 852 }, // 179 * 4.76
      { code: 'AED', symbol: 'AED ', tier1Expected: 834 }, // 179 * 4.66
    ];

    for (const currency of currencies) {
      await navigateToPricing(page);

      // Select currency
      const currencySelector = page.locator('select').first();
      await currencySelector.selectOption(currency.code);

      // Wait for price update
      await page.waitForTimeout(500);

      // Verify tier1 price converts correctly
      const tier1Card = page.locator('[data-tier-id="tier1"]');
      const priceText = await tier1Card.locator('.text-4xl').textContent();

      // Check price contains expected value
      expect(priceText).toContain(currency.tier1Expected.toString());
    }
  });

  test('Yearly discount regression - 7% discount must apply correctly', async ({ page }) => {
    await navigateToPricing(page);

    // Click yearly billing toggle
    const yearlyButton = page.locator('button:has-text("Yearly")');
    await yearlyButton.click();

    // Wait for price update
    await page.waitForTimeout(500);

    // Verify tier2 shows discounted price
    const tier2Card = page.locator('[data-tier-id="tier2"]');

    // Original price £209, yearly discount = £209 * 0.93 = £194.37 ≈ £194
    const yearlyPrice = BASELINE_PRICES.tier2 * 0.93;
    const expectedYearlyPrice = Math.round(yearlyPrice);

    const priceText = await tier2Card.locator('.text-4xl').textContent();
    expect(priceText).toContain(expectedYearlyPrice.toString());

    // Verify "Billed annually" message appears
    await expect(tier2Card.locator('text=/Billed annually/i')).toBeVisible();

    // Verify strikethrough original price is visible
    const strikethroughPrice = tier2Card.locator('.line-through');
    await expect(strikethroughPrice).toBeVisible();
    const originalPriceText = await strikethroughPrice.textContent();
    expect(originalPriceText).toContain('209');
  });

  test('Bilingual consistency - Arabic pricing page must have same 5 tiers', async ({ page }) => {
    // Test Arabic version
    await navigateToPricing(page, 'ar');

    // Verify RTL layout
    await expect(page.locator('main[dir="rtl"]')).toBeVisible();

    // Verify exactly 5 tiers in Arabic
    const pricingCards = page.locator('[data-tier-id]');
    await expect(pricingCards).toHaveCount(5);

    // Verify all 5 tier IDs present
    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      await expect(tierCard).toBeVisible();
    }

    // Verify tier2 has popular badge in Arabic
    const tier2Card = page.locator('[data-tier-id="tier2"]');
    const popularBadgeAr = tier2Card.locator('text=/الأكثر شعبية/');
    await expect(popularBadgeAr).toBeVisible();

    // Verify tier names in Arabic
    await expect(page.locator('[data-tier-id="tier1"] h3')).toContainText('المبتدئ'); // Starter
    await expect(page.locator('[data-tier-id="tier2"] h3')).toContainText('المحترف'); // Professional
    await expect(page.locator('[data-tier-id="tier3"] h3')).toContainText('الأعمال'); // Business
    await expect(page.locator('[data-tier-id="tier4"] h3')).toContainText('المؤسسات'); // Enterprise
    await expect(page.locator('[data-tier-id="tier5"] h3')).toContainText('المتكاملة'); // Ultimate

    // Verify same pricing values in Arabic (£ symbol should still show)
    const tier2PriceAr = await page.locator('[data-tier-id="tier2"] .text-4xl').textContent();
    expect(tier2PriceAr).toContain('£209');
  });

  test('Tier addition prevention - No tier6 or additional tiers allowed', async ({ page }) => {
    await navigateToPricing(page);

    // Verify no tier6 exists
    const tier6 = page.locator('[data-tier-id="tier6"]');
    await expect(tier6).not.toBeVisible();

    // Verify no tiers beyond tier5
    const allTiers = page.locator('[data-tier-id]');
    const tierCount = await allTiers.count();
    expect(tierCount).toBe(5); // Must be exactly 5, no more, no less

    // Verify no unexpected tier IDs
    for (let i = 0; i < tierCount; i++) {
      const tierId = await allTiers.nth(i).getAttribute('data-tier-id');
      expect(BASELINE_TIER_IDS).toContain(tierId as any);
    }
  });

  test('Tier removal prevention - All 5 baseline tiers must be present', async ({ page }) => {
    await navigateToPricing(page);

    // Verify each baseline tier is present and visible
    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);

      // Must exist
      await expect(tierCard).toBeVisible();

      // Must have tier name
      const tierName = tierCard.locator('h3');
      await expect(tierName).toBeVisible();

      // Must have price
      const tierPrice = tierCard.locator('.text-4xl');
      await expect(tierPrice).toBeVisible();

      // Must have setup fee
      const setupFee = tierCard.locator('text=/Setup:/');
      await expect(setupFee).toBeVisible();

      // Must have "Get Started" button
      const getStartedButton = tierCard.locator('button:has-text("Get Started")');
      await expect(getStartedButton).toBeVisible();
    }
  });

  test('Price value regression - All tier prices in GBP must match baseline', async ({ page }) => {
    await navigateToPricing(page);

    // Ensure GBP currency is selected
    const currencySelector = page.locator('select').first();
    await currencySelector.selectOption('GBP');
    await page.waitForTimeout(500);

    // Verify each tier's price matches BASELINE_PRICES
    const priceChecks = [
      { tierId: 'tier1', expectedPrice: BASELINE_PRICES.tier1 }, // £179
      { tierId: 'tier2', expectedPrice: BASELINE_PRICES.tier2 }, // £209
      { tierId: 'tier3', expectedPrice: BASELINE_PRICES.tier3 }, // £249
      { tierId: 'tier4', expectedPrice: BASELINE_PRICES.tier4 }, // £349
      { tierId: 'tier5', expectedPrice: BASELINE_PRICES.tier5 }, // £449
    ];

    for (const { tierId, expectedPrice } of priceChecks) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const priceElement = tierCard.locator('.text-4xl');
      const priceText = await priceElement.textContent();

      // Must contain expected price value
      expect(priceText).toContain(`£${expectedPrice}`);
    }
  });

  test('Setup fee regression - Verify 4 tiers at £199, tier5 at £299', async ({ page }) => {
    await navigateToPricing(page);

    // Verify standard setup fee (£199) for tier1-tier4
    const standardTiers = ['tier1', 'tier2', 'tier3', 'tier4'];
    for (const tierId of standardTiers) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const setupText = await tierCard.textContent();
      expect(setupText).toContain('Setup: £199');
      expect(BASELINE_SETUP_FEES[tierId as keyof typeof BASELINE_SETUP_FEES]).toBe(199);
    }

    // Verify premium setup fee (£299) for tier5 ONLY
    const tier5Card = page.locator('[data-tier-id="tier5"]');
    const tier5Setup = await tier5Card.textContent();
    expect(tier5Setup).toContain('Setup: £299');
    expect(BASELINE_SETUP_FEES.tier5).toBe(299);
  });

  test('Popular flag regression - Exactly one tier (tier2) must be popular', async ({ page }) => {
    await navigateToPricing(page);

    // Count total popular badges
    const popularBadges = page.locator('text=/Most Popular/i');
    await expect(popularBadges).toHaveCount(1);

    // Verify it's specifically on tier2
    expect(POPULAR_TIER_ID).toBe('tier2');

    const tier2Card = page.locator(`[data-tier-id="${POPULAR_TIER_ID}"]`);
    const tier2Badge = tier2Card.locator('text=/Most Popular/i');
    await expect(tier2Badge).toBeVisible();
  });

  test('Yearly discount calculation regression - Verify 7% discount formula', async ({ page }) => {
    await navigateToPricing(page);

    // Click yearly billing toggle
    const yearlyButton = page.locator('button:has-text("Yearly")');
    await yearlyButton.click();
    await page.waitForTimeout(500);

    // Test discount calculation for all 5 tiers
    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const monthlyPrice = BASELINE_PRICES[tierId as keyof typeof BASELINE_PRICES];

      // Calculate expected yearly discounted price
      const expectedYearlyPrice = monthlyPrice * 0.93; // 7% discount
      const roundedExpected = Math.round(expectedYearlyPrice);

      // Get displayed yearly price
      const priceText = await tierCard.locator('.text-4xl').textContent();
      expect(priceText).toContain(`£${roundedExpected}`);

      // Verify using validator function
      const isValidDiscount = validateYearlyDiscount(monthlyPrice, expectedYearlyPrice);
      expect(isValidDiscount).toBe(true);
    }

    // Verify "Billed annually" message appears
    const billedAnnuallyMessage = page.locator('text=/Billed annually/i');
    await expect(billedAnnuallyMessage).toBeVisible();
  });

  test('Currency conversion regression - USD conversion accuracy', async ({ page }) => {
    await navigateToPricing(page);

    // Select USD currency
    const currencySelector = page.locator('select').first();
    await currencySelector.selectOption('USD');
    await page.waitForTimeout(500);

    // USD exchange rate is 1.27 (from PricingClient.tsx)
    const usdRate = 1.27;

    // Verify tier2 price in USD
    const tier2Card = page.locator('[data-tier-id="tier2"]');
    const expectedUSDPrice = Math.round(BASELINE_PRICES.tier2 * usdRate); // £209 * 1.27 = $265

    const priceText = await tier2Card.locator('.text-4xl').textContent();
    expect(priceText).toContain(`$${expectedUSDPrice}`);
  });

  test('Feature count regression - Verify baseline feature counts per tier', async ({ page }) => {
    await navigateToPricing(page);

    // Expected feature counts based on BASELINE_TIERS
    const featureCounts = {
      tier1: 6, // Starter has 6 features
      tier2: 8, // Professional has 8 features
      tier3: 8, // Business has 8 features
      tier4: 8, // Enterprise has 8 features
      tier5: 9, // Ultimate has 9 features
    };

    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);

      // Count visible feature items (showing first 6 per PricingCard.tsx line 92)
      const features = tierCard.locator('li');
      const featureCount = await features.count();

      // Display shows min(actualFeatures, 6) - so we check for <= 6
      expect(featureCount).toBeLessThanOrEqual(6);
      expect(featureCount).toBeGreaterThan(0);
    }
  });

  test('Tier order regression - Tiers must appear in correct sequence', async ({ page }) => {
    await navigateToPricing(page);

    // Get all tier cards
    const tierCards = page.locator('[data-tier-id]');

    // Verify they appear in order: tier1, tier2, tier3, tier4, tier5
    for (let i = 0; i < BASELINE_TIER_IDS.length; i++) {
      const expectedTierId = BASELINE_TIER_IDS[i];
      const actualTierId = await tierCards.nth(i).getAttribute('data-tier-id');
      expect(actualTierId).toBe(expectedTierId);
    }
  });

  test('Cross-browser consistency - Pricing displays correctly in all browsers', async ({ page, browserName }) => {
    await navigateToPricing(page);

    // Verify 5 tiers in all browsers (Chromium, Firefox, WebKit)
    const pricingCards = page.locator('[data-tier-id]');
    await expect(pricingCards).toHaveCount(5);

    // Verify tier2 price in current browser
    const tier2Card = page.locator('[data-tier-id="tier2"]');
    const priceText = await tier2Card.locator('.text-4xl').textContent();
    expect(priceText).toContain('£209');

    console.log(`✅ Pricing verified in ${browserName}`);
  });

  test('Mobile responsive regression - All 5 tiers visible on mobile', async ({ page }) => {
    // Set mobile viewport (iPhone 12 size)
    await page.setViewportSize({ width: 390, height: 844 });

    await navigateToPricing(page);

    // Verify all 5 tiers are present and visible on mobile
    const pricingCards = page.locator('[data-tier-id]');
    await expect(pricingCards).toHaveCount(5);

    // Verify each tier is visible (may need to scroll)
    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);

      // Scroll into view if needed
      await tierCard.scrollIntoViewIfNeeded();

      // Verify visible
      await expect(tierCard).toBeVisible();
    }
  });

  test('Get Started button regression - All 5 tiers have working CTAs', async ({ page }) => {
    await navigateToPricing(page);

    // Verify each tier has a clickable Get Started button
    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const getStartedButton = tierCard.locator('button:has-text("Get Started")');

      // Button must be visible
      await expect(getStartedButton).toBeVisible();

      // Button must be enabled
      await expect(getStartedButton).toBeEnabled();

      // Click should navigate to signup with correct plan parameter
      await getStartedButton.click();
      await expect(page).toHaveURL(new RegExp(`/signup\\?plan=${tierId}`));

      // Navigate back to pricing for next iteration
      await page.goBack();
      await page.waitForSelector('[data-tier-id]', { timeout: 5000 });
    }
  });
});

test.describe('Pricing Display Format Regression', () => {
  test('Price display format - Currency symbol and amount formatting', async ({ page }) => {
    await navigateToPricing(page);

    // Verify price display uses correct format: {symbol}{amount}
    const tier2Card = page.locator('[data-tier-id="tier2"]');
    const priceElement = tier2Card.locator('.text-4xl');
    const priceText = await priceElement.textContent();

    // Must start with currency symbol
    expect(priceText).toMatch(/^[£$€]/);

    // Must contain numeric price
    expect(priceText).toMatch(/\d+/);

    // Verify "/mo" suffix appears
    const moText = await tier2Card.locator('text=/\\/mo/').textContent();
    expect(moText).toBeTruthy();
  });

  test('Setup fee display format - Consistent "Setup: {symbol}{amount}" pattern', async ({ page }) => {
    await navigateToPricing(page);

    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);
      const setupText = await tierCard.textContent();

      // Must match "Setup: £XXX" pattern
      expect(setupText).toMatch(/Setup:\s*£\d+/);
    }
  });
});

test.describe('Pricing Validation Error Detection', () => {
  test('Validator detects tier count mismatch', async ({ page }) => {
    // This is a conceptual test - in real scenario, we'd mock the pricing data
    // to have 6 tiers and verify the validator catches it

    // For now, verify the validator constants are correct
    expect(BASELINE_TIER_IDS.length).toBe(5);
    expect(Object.keys(BASELINE_PRICES).length).toBe(5);
    expect(Object.keys(BASELINE_SETUP_FEES).length).toBe(5);
  });

  test('Validator baseline prices match expected values', async ({ page }) => {
    // Verify BASELINE_PRICES constants are correct
    expect(BASELINE_PRICES.tier1).toBe(179);
    expect(BASELINE_PRICES.tier2).toBe(209);
    expect(BASELINE_PRICES.tier3).toBe(249);
    expect(BASELINE_PRICES.tier4).toBe(349);
    expect(BASELINE_PRICES.tier5).toBe(449);
  });

  test('Validator baseline setup fees match expected values', async ({ page }) => {
    // Verify BASELINE_SETUP_FEES constants are correct
    expect(BASELINE_SETUP_FEES.tier1).toBe(199);
    expect(BASELINE_SETUP_FEES.tier2).toBe(199);
    expect(BASELINE_SETUP_FEES.tier3).toBe(199);
    expect(BASELINE_SETUP_FEES.tier4).toBe(199);
    expect(BASELINE_SETUP_FEES.tier5).toBe(299); // Unique setup fee
  });

  test('Validator popular tier constant is correct', async ({ page }) => {
    // Verify POPULAR_TIER_ID is tier2
    expect(POPULAR_TIER_ID).toBe('tier2');
  });
});

test.describe('Pricing Immutability - Snapshot Tests', () => {
  test('Pricing structure snapshot - Lock current state', async ({ page }) => {
    await navigateToPricing(page);

    // Create snapshot of all tier data attributes
    const tierSnapshots = [];

    for (const tierId of BASELINE_TIER_IDS) {
      const tierCard = page.locator(`[data-tier-id="${tierId}"]`);

      const snapshot = {
        tierId: await tierCard.getAttribute('data-tier-id'),
        name: await tierCard.locator('h3').textContent(),
        price: await tierCard.locator('.text-4xl').textContent(),
        hasPopularBadge: await tierCard.locator('text=/Most Popular/i').isVisible().catch(() => false),
      };

      tierSnapshots.push(snapshot);
    }

    // Verify snapshot matches expected structure
    expect(tierSnapshots).toHaveLength(5);

    // Verify tier2 is the only popular tier
    const popularTiers = tierSnapshots.filter(t => t.hasPopularBadge);
    expect(popularTiers).toHaveLength(1);
    expect(popularTiers[0].tierId).toBe('tier2');

    // Verify tier names
    expect(tierSnapshots[0].name).toContain('Starter');
    expect(tierSnapshots[1].name).toContain('Professional');
    expect(tierSnapshots[2].name).toContain('Business');
    expect(tierSnapshots[3].name).toContain('Enterprise');
    expect(tierSnapshots[4].name).toContain('Ultimate');
  });
});
