import { chromium } from '@playwright/test';

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  
  console.log('正在访问首页...');
  await page.goto('http://localhost:3000');
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(2000);
  
  // 详细检查 Hero 区域的所有层级
  console.log('\n=== Hero 区域详细层级分析 ===');
  const heroDetail = await page.evaluate(() => {
    const heroSection = document.querySelector('section');
    if (!heroSection) return null;
    
    const getAllChildren = (el, depth = 0, maxDepth = 5) => {
      const result = [];
      if (depth > maxDepth) return result;
      
      const style = window.getComputedStyle(el);
      const bg = style.backgroundImage || '';
      const hasGlow = bg.includes('radial-gradient') || bg.includes('linear-gradient') || el.className?.includes?.('blur');
      
      if (hasGlow) {
        result.push({
          depth,
          tag: el.tagName,
          className: (el.className || '').substring(0, 120),
          zIndex: style.zIndex,
          position: style.position,
          opacity: style.opacity,
          background: bg.substring(0, 150),
          mixBlendMode: style.mixBlendMode,
          backgroundColor: style.backgroundColor,
        });
      }
      
      for (const child of Array.from(el.children)) {
        result.push(...getAllChildren(child, depth + 1, maxDepth));
      }
      return result;
    };
    
    return getAllChildren(heroSection);
  });
  
  console.log(JSON.stringify(heroDetail, null, 2));
  
  // 检查所有带 mix-blend-mode 的元素
  console.log('\n=== 所有带 mix-blend-mode 的元素 ===');
  const mixBlendElements = await page.evaluate(() => {
    const all = document.querySelectorAll('*');
    const results = [];
    all.forEach(el => {
      const style = window.getComputedStyle(el);
      if (style.mixBlendMode && style.mixBlendMode !== 'normal') {
        results.push({
          tag: el.tagName,
          className: (el.className || '').substring(0, 100),
          mixBlendMode: style.mixBlendMode,
          opacity: style.opacity,
          zIndex: style.zIndex,
          position: style.position,
        });
      }
    });
    return results.slice(0, 20);
  });
  
  console.log(JSON.stringify(mixBlendElements, null, 2));
  
  await browser.close();
  console.log('\n分析完成！');
})();