const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';

test('home page stepper: no raw SX component calls visible', async ({ page }) => {
  await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
  await page.waitForTimeout(5000);

  const stepper = page.locator('[data-sx-island="home/stepper"]');
  await expect(stepper).toBeVisible({ timeout: 10000 });

  const text = await stepper.textContent();
  // Should NOT show raw component calls
  expect(text).not.toContain('~cssx/tw');
  expect(text).not.toContain(':tokens');

  // Should show rendered content (colored text)
  expect(text.length).toBeGreaterThan(10);

  // Stepper navigation should work
  const buttons = stepper.locator('button');
  await expect(buttons).toHaveCount(2);
  const textBefore = await stepper.textContent();
  await buttons.last().click();
  await page.waitForTimeout(500);
  const textAfter = await stepper.textContent();
  expect(textAfter).not.toBe(textBefore);
});