// 产品介绍页面
Router.register('/product-intro', async () => {
  setTimeout(() => {
    if(window.ProductIntroComponent.afterRender) {
      window.ProductIntroComponent.afterRender();
    }
  }, 0);
  return window.ProductIntroComponent.render();
});

window.ProductIntroComponent = {
  render: () => {
    return `
      <div class="product-intro-page">
        <div class="product-intro-header">
          <h1>产品介绍</h1>
          <p class="subtitle">兔喜驿站智能找灯系统</p>
        </div>
        
        <div class="product-cards">
          <div class="product-card main-product">
            <div class="product-image-wrapper">
              <img src="./assets/tuxi-station.png" alt="兔喜基站" class="product-image rotated" />
            </div>
            <div class="product-info">
              <h2>智能基站</h2>
              <p class="product-desc">兔喜驿站找灯条对应快递的基站设备，用于控制货架上的LED灯条，帮助快速定位快递包裹位置。</p>
              <div class="product-features">
                <div class="feature-item">
                  <span class="feature-icon">📡</span>
                  <span class="feature-text">蓝牙信号覆盖</span>
                </div>
                <div class="feature-item">
                  <span class="feature-icon">💡</span>
                  <span class="feature-text">精准灯条控制</span>
                </div>
                <div class="feature-item">
                  <span class="feature-icon">⚡</span>
                  <span class="feature-text">快速响应</span>
                </div>
                <div class="feature-item">
                  <span class="feature-icon">🔧</span>
                  <span class="feature-text">易于安装</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="product-specs">
          <h3>技术规格</h3>
          <div class="specs-grid">
            <div class="spec-item">
              <span class="spec-label">品牌</span>
              <span class="spec-value">兔喜生活</span>
            </div>
            <div class="spec-item">
              <span class="spec-label">类型</span>
              <span class="spec-value">智能基站</span>
            </div>
            <div class="spec-item">
              <span class="spec-label">应用场景</span>
              <span class="spec-value">快递驿站</span>
            </div>
            <div class="spec-item">
              <span class="spec-label">功能</span>
              <span class="spec-value">灯条定位控制</span>
            </div>
          </div>
        </div>
      </div>
    `;
  },
  
  afterRender: () => {
    // 页面渲染后的逻辑
  }
};