const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch({ headless: false, slowMo: 500 });
    const context = await browser.newContext({
        viewport: { width: 1920, height: 1080 }
    });
    const page = await context.newPage();

    console.log('📄 Loading English page...\n');
    await page.goto('http://localhost:1999/?lang=en');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);

    console.log('🌍 Switching to Spanish (watch for smooth fade transition)...');
    await page.click('button[hx-get*="lang=es"]');
    await page.waitForTimeout(3000); // Wait to see the transition

    console.log('✅ Spanish loaded');
    await page.waitForTimeout(1000);

    console.log('\n🌍 Switching back to English (watch for smooth fade transition)...');
    await page.click('button[hx-get*="lang=en"]');
    await page.waitForTimeout(3000); // Wait to see the transition

    console.log('✅ English loaded\n');
    await page.waitForTimeout(1000);

    console.log('📊 SUMMARY:');
    console.log('   - Language transitions now use HTMX CSS transitions');
    console.log('   - 200ms fade out (htmx-swapping class)');
    console.log('   - 200ms fade in (htmx-settling class)');
    console.log('   - Smooth, professional experience! 🎉\n');

    console.log('💡 BENEFITS:');
    console.log('   ✅ Eliminates jarring page flash');
    console.log('   ✅ Smooth visual continuity');
    console.log('   ✅ Professional feel');
    console.log('   ✅ No JavaScript needed - pure CSS!');

    await page.waitForTimeout(2000);
    await browser.close();
})();