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

<div class="breadcrumb">
  <a href="/">首页</a> › <a href="/plans">全部产品</a> › <%= product.name %>
</div>

<div class="detail-page">
  <div class="detail-card">
    <div class="detail-header">
      <div>
        <span class="product-merchant"><%= product.merchant_name || '未知商家' %></span>
        <% if (product.in_stock === 1) { %><span class="badge badge-on">✓ 有货</span>
        <% } else if (product.in_stock === 2) { %><span class="badge badge-off">✗ 缺货</span>
        <% } %>
        <% if (product.is_featured) { %><span class="badge" style="background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-weight:600">⭐ 推荐</span><% } %>
      </div>
    </div>

    <h1 style="margin-top:12px"><%= product.location ? product.location + ' ' : '' %><%= product.name %></h1>

    <div class="detail-info">
      <% if (product.spec_summary) { %>
      <div class="detail-row">
        <span class="detail-label">配置</span>
        <span><%= product.spec_summary %></span>
      </div>
      <% } %>

      <% if (product.traffic) { %>
      <div class="detail-row">
        <span class="detail-label">流量</span>
        <span><%= product.traffic %></span>
      </div>
      <% } %>

      <% if (product.price) { %>
      <div class="detail-row">
        <span class="detail-label">价格</span>
        <span><strong class="price-highlight"><%= product.price %></strong></span>
      </div>
      <% } %>

      <% if (product.annual_price) { %>
      <div class="detail-row">
        <span class="detail-label"><%= product.billing_cycle || '年付' %></span>
        <span><%= product.annual_price %></span>
      </div>
      <% } %>

      <% if (product.location) { %>
      <div class="detail-row">
        <span class="detail-label">地区</span>
        <span><%= product.location %></span>
      </div>
      <% } %>

      <% if (product.coupon_code) { %>
      <div class="detail-row">
        <span class="detail-label">优惠码</span>
        <span class="coupon-tag"><%= product.coupon_code %></span>
      </div>
      <% } %>

      <% if (product.last_checked) { %>
      <div class="detail-row">
        <span class="detail-label">最后检测</span>
        <span class="muted"><%= product.last_checked.replace('T', ' ').slice(0,19) %></span>
      </div>
      <% } %>
    </div>

    <% if (product.push_intro) { %>
    <div class="detail-intro"><%= product.push_intro %></div>
    <% } %>

    <% if (product.notes) { %>
    <div class="detail-notes"><%= product.notes %></div>
    <% } %>

    <div class="detail-actions">
      <% if (product.buy_url) { %>
      <a href="<%= product.buy_url %>" target="_blank" rel="noopener" class="btn btn-primary" style="padding:14px 28px;font-size:15px;font-weight:600">🛒 前往购买</a>
      <% } %>
      <% if (product.url && product.url !== product.buy_url) { %>
      <a href="<%= product.url %>" target="_blank" rel="noopener" class="btn" style="padding:14px 24px;font-size:14px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#475569;border:1px solid #e2e8f0">查看产品页</a>
      <% } %>
      <% if (product.merchant_website) { %>
      <a href="<%= product.merchant_website %>" target="_blank" rel="noopener" class="btn" style="padding:14px 24px;font-size:14px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#475569;border:1px solid #e2e8f0">商家官网</a>
      <% } %>
    </div>
  </div>

  <% if (related.length > 0) { %>
  <section class="section" style="margin-top:32px">
    <h2>同商家其他产品</h2>
    <div class="product-grid">
      <% related.forEach(p => { %>
      <a href="/plans/<%= p.slug || p.id %>" class="product-card">
        <div class="product-card-header">
          <span class="product-merchant"><%= p.merchant_name %></span>
          <% if (p.in_stock === 1) { %><span class="badge badge-on">✓ 有货</span>
          <% } else if (p.in_stock === 2) { %><span class="badge badge-off">✗ 缺货</span>
          <% } %>
        </div>
        <h3><%= p.location ? p.location + ' ' : '' %><%= p.name %></h3>
        <% if (p.spec_summary) { %><div class="product-spec"><%= p.spec_summary %></div><% } %>
        <div class="product-price">
          <% if (p.price) { %><strong><%= p.price %></strong><% } %>
        </div>
      </a>
      <% }) %>
    </div>
  </section>
  <% } %>
</div>

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