<%- include('../partials/public-header') %>

<!-- Hero 区域 -->
<div class="hero-new">
  <div class="hero-content">
    <h1 class="hero-title">VPS 补货监控</h1>
    <p class="hero-desc">实时监控热门 VPS / 独服库存变化，第一时间推送补货通知</p>
    
    <!-- 状态提示 -->
    <div class="status-badge">
      <span class="status-dot"></span>
      <span>每 5 分钟自动检测</span>
    </div>
    
    <!-- 入口按钮 -->
    <div class="hero-actions">
      <% if (tgUrl) { %>
      <a href="<%= tgUrl %>" target="_blank" class="btn-hero btn-tg">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
        </svg>
        Telegram 频道
      </a>
      <% } %>
      <a href="/plans" class="btn-hero btn-primary-hero">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
          <line x1="3" y1="9" x2="21" y2="9"/>
          <line x1="9" y1="21" x2="9" y2="9"/>
        </svg>
        浏览全部产品
      </a>
    </div>
    
    <!-- 订阅占位 -->
    <div class="subscribe-placeholder">
      <span class="coming-soon">邮箱订阅功能即将上线</span>
    </div>
  </div>
</div>

<!-- 统计数据 -->
<div class="stats-bar">
  <div class="stat-item">
    <span class="stat-num"><%= stats.products %></span>
    <span class="stat-label">款产品</span>
  </div>
  <div class="stat-item">
    <span class="stat-num"><%= stats.merchants %></span>
    <span class="stat-label">家商家</span>
  </div>
</div>

<% if (featured.length > 0) { %>
<!-- 推荐产品 -->
<section class="section-new">
  <div class="section-header">
    <h2>推荐产品</h2>
    <a href="/plans" class="view-all">查看全部 →</a>
  </div>
  <div class="product-grid-new">
    <% featured.forEach(p => { %>
    <div class="product-card-new">
      <div class="card-header">
        <span class="merchant-tag"><%= p.merchant_name || '未知商家' %></span>
        <% if (p.in_stock === 1) { %><span class="stock-tag in-stock">有货</span>
        <% } else if (p.in_stock === 2) { %><span class="stock-tag out-stock">缺货</span>
        <% } else { %><span class="stock-tag unknown">未知</span><% } %>
      </div>
      <h3 class="card-title"><%= p.location ? p.location + ' · ' : '' %><%= p.name %></h3>
      <% if (p.spec_summary) { %>
      <div class="card-spec"><%= p.spec_summary %></div>
      <% } %>
      <% if (p.traffic) { %>
      <div class="card-spec">流量 <%= p.traffic %></div>
      <% } %>
      <div class="card-price">
        <% if (p.price) { %><strong><%= p.price %></strong><% } %>
        <% if (p.annual_price) { %><span class="annual"><%= p.billing_cycle || '年付' %> <%= p.annual_price %></span><% } %>
      </div>
      <% if (p.coupon_code) { %>
      <div class="card-coupon" onclick="navigator.clipboard.writeText('<%= p.coupon_code %>').then(() => this.classList.add('copied'))">
        <span class="coupon-icon">✦</span>
        <span class="coupon-label">优惠码</span>
        <span class="coupon-code"><%= p.coupon_code %></span>
        <span class="coupon-hint">点击复制</span>
      </div>
      <% } %>
      <div class="card-actions">
        <% if (p.test_ip) { %>
        <a href="javascript:navigator.clipboard.writeText('<%= p.test_ip %>').then(() => alert('已复制: <%= p.test_ip %>'))" class="btn-card btn-copy">测试 IP</a>
        <% } %>
        <a href="/plans/<%= p.slug || p.id %>" class="btn-card btn-detail">详情</a>
      </div>
    </div>
    <% }) %>
  </div>
</section>
<% } %>

<!-- 最新产品 -->
<section class="section-new">
  <div class="section-header">
    <h2>最新产品</h2>
    <a href="/plans" class="view-all">查看全部 →</a>
  </div>
  <div class="product-grid-new">
    <% latest.forEach(p => { %>
    <div class="product-card-new">
      <div class="card-header">
        <span class="merchant-tag"><%= p.merchant_name || '未知商家' %></span>
        <% if (p.in_stock === 1) { %><span class="stock-tag in-stock">有货</span>
        <% } else if (p.in_stock === 2) { %><span class="stock-tag out-stock">缺货</span>
        <% } else { %><span class="stock-tag unknown">未知</span><% } %>
      </div>
      <h3 class="card-title"><%= p.location ? p.location + ' · ' : '' %><%= p.name %></h3>
      <% if (p.spec_summary) { %>
      <div class="card-spec"><%= p.spec_summary %></div>
      <% } %>
      <% if (p.traffic) { %>
      <div class="card-spec">流量 <%= p.traffic %></div>
      <% } %>
      <div class="card-price">
        <% if (p.price) { %><strong><%= p.price %></strong><% } %>
        <% if (p.annual_price) { %><span class="annual"><%= p.billing_cycle || '年付' %> <%= p.annual_price %></span><% } %>
      </div>
      <% if (p.coupon_code) { %>
      <div class="card-coupon" onclick="navigator.clipboard.writeText('<%= p.coupon_code %>').then(() => this.classList.add('copied'))">
        <span class="coupon-icon">✦</span>
        <span class="coupon-label">优惠码</span>
        <span class="coupon-code"><%= p.coupon_code %></span>
        <span class="coupon-hint">点击复制</span>
      </div>
      <% } %>
      <div class="card-actions">
        <% if (p.test_ip) { %>
        <a href="javascript:navigator.clipboard.writeText('<%= p.test_ip %>').then(() => alert('已复制: <%= p.test_ip %>'))" class="btn-card btn-copy">测试 IP</a>
        <% } %>
        <a href="/plans/<%= p.slug || p.id %>" class="btn-card btn-detail">详情</a>
      </div>
    </div>
    <% }) %>
  </div>
  <% if (latest.length === 0) { %>
  <div class="empty-state">
    <p>暂无产品数据</p>
    <p class="muted">请登录后台添加产品</p>
  </div>
  <% } %>
</section>

<%- include('../partials/footer') %>
