const { chromium } = require("playwright");
(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  
  try {
    await page.goto("http://localhost:3001/products/novavis", { waitUntil: "domcontentloaded", timeout: 15000 });
    await page.waitForTimeout(4000);
    
    const result = await page.evaluate(() => {
      const header = document.querySelector("header .container-wide");
      const headerRect = header?.getBoundingClientRect();
      const headerContentLeft = headerRect ? headerRect.left : null;
      
      const sections = document.querySelectorAll("section");
      const sectionData = [];
      
      sections.forEach((section, i) => {
        const rect = section.getBoundingClientRect();
        if (rect.height < 30) return;
        
        const container = section.querySelector(".container-wide, .container-full");
        const containerRect = container?.getBoundingClientRect();
        
        const firstTextBlock = section.querySelector("h1, h2, h3, p");
        const textRect = firstTextBlock?.getBoundingClientRect();
        
        sectionData.push({
          index: i,
          sectionLeft: Math.round(rect.left),
          containerLeft: containerRect ? Math.round(containerRect.left) : null,
          firstTextLeft: textRect ? Math.round(textRect.left) : null,
          height: Math.round(rect.height),
          text: firstTextBlock?.textContent?.substring(0, 40).trim(),
        });
      });
      
      return { headerContentLeft, sections: sectionData };
    });
    
    console.log("=== NovaVis 产品页内容对齐检测 ===\n");
    console.log(`Header container left: ${result.headerContentLeft}px\n`);
    
    let allAligned = true;
    for (const s of result.sections) {
      const containerOk = s.containerLeft === result.headerContentLeft;
      const textOk = s.firstTextLeft !== null && Math.abs(s.firstTextLeft - result.headerContentLeft) < 5;
      
      if (!containerOk && s.containerLeft !== null) {
        allAligned = false;
        console.log(`  ❌ Section[${s.index}]: containerLeft=${s.containerLeft} (期望 ${result.headerContentLeft}) | ${s.text?.substring(0, 30)}`);
      } else if (s.containerLeft !== null) {
        console.log(`  ✅ Section[${s.index}]: containerLeft=${s.containerLeft} | ${s.text?.substring(0, 30)}`);
      }
    }
    
    if (allAligned) {
      console.log("\n🎉 所有区块容器与 Header 对齐！");
    }
    
  } catch(e) {
    console.error("ERROR:", e.message);
  }
  await browser.close();
})();