<style>
.perks-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.perks-header-left h2 { margin:0 0 4px; font-size:1.3rem; font-weight:700; }
.perks-header-left p  { margin:0; color:#6b7280; font-size:.875rem; }
.b2b-chip { background:linear-gradient(135deg,#1a56db,#7c3aed); color:#fff; border-radius:12px; padding:12px 20px; text-align:center; flex-shrink:0; }
.b2b-chip-num   { font-size:1.5rem; font-weight:800; line-height:1; }
.b2b-chip-label { font-size:.7rem; opacity:.8; margin-top:3px; }
.company-section { margin-bottom:36px; }
.company-header  { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:2px solid #e5e7eb; }
.company-logo-wrap { width:48px; height:48px; border-radius:10px; border:1.5px solid #e5e7eb; background:#f9fafb; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; color:#374151; overflow:hidden; flex-shrink:0; }
.company-logo-wrap img { width:48px; height:48px; object-fit:contain; border-radius:10px; }
.company-name    { font-size:1.1rem; font-weight:800; color:#111827; }
.company-url     { font-size:.75rem; color:#9ca3af; text-decoration:none; }
.company-url:hover { color:#1a56db; }
.products-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.product-card    { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s,border-color .15s; }
.product-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); border-color:#c7d2fe; }
.product-name    { font-weight:700; font-size:.95rem; color:#111827; margin:0; }
.product-desc    { font-size:.8rem; color:#6b7280; line-height:1.5; flex:1; margin:0; }
.product-badge   { display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:10px; background:#fef9c3; color:#854d0e; align-self:flex-start; }
.product-btn     { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:9px; border-radius:8px; font-weight:600; font-size:.83rem; cursor:pointer; border:none; text-decoration:none; transition:all .15s; margin-top:4px; }
.product-btn.access  { background:linear-gradient(135deg,#1a56db,#7c3aed); color:#fff; }
.product-btn.access:hover { opacity:.9; }
.product-btn.access:disabled { opacity:.5; cursor:not-allowed; }
.product-btn.purchased { background:#f0fdf4; color:#16a34a; border:1.5px solid #bbf7d0; cursor:default; }
.product-btn.preview { background:#fff; color:#374151; border:1.5px solid #e5e7eb; }
.product-btn.preview:hover { border-color:#1a56db; color:#1a56db; }
.product-err { font-size:.73rem; color:#dc2626; text-align:center; display:none; }
.no-wallet-banner { background:#fef9c3; border:1.5px solid #fef08a; border-radius:10px; padding:14px 18px; font-size:.83rem; color:#713f12; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
</style>

<!-- Header -->
<div class="perks-header">
  <div class="perks-header-left">
    <h2>Partner Software</h2>
    <p>Exclusive access to our partner platforms — available to all Biz2Biz Chamber members.</p>
  </div>
</div>

<%
  const companyMeta = {
    'Beezifi':               { url: 'https://beezifi.net',              logo: null, color: '#1a56db' },
    'Torvali':               { url: 'https://torvali.com',              logo: null, color: '#7c3aed' },
    'Companions by JozieAI': { url: 'https://companions.jozieai.com',   logo: null, color: '#0ea5e9' }
  };
%>

<% Object.entries(grouped).forEach(([companyName, products]) => {
  const meta = companyMeta[companyName] || { url: products[0]?.partner_url, color: '#374151' };
%>
<div class="company-section">
  <div class="company-header">
    <div class="company-logo-wrap" style="border-color:<%= meta.color %>20">
      <span style="color:<%= meta.color %>"><%= companyName[0] %></span>
    </div>
    <div>
      <div class="company-name"><%= companyName %></div>
      <a href="<%= meta.url %>" target="_blank" rel="noopener" class="company-url"><%= meta.url.replace('https://','') %> <i class="bi bi-box-arrow-up-right" style="font-size:.65rem"></i></a>
    </div>
    <span style="margin-left:auto;font-size:.75rem;color:#9ca3af"><%= products.length %> product<%= products.length !== 1 ? 's' : '' %></span>
  </div>

  <div class="products-grid">
    <% products.forEach(p => {
      const isPurchased = !!p.my_claim_at;
    %>
    <div class="product-card" id="perk-card-<%= p.id %>">
      <p class="product-name"><%= p.headline %></p>
      <p class="product-desc"><%= p.description %></p>

      <a href="<%= p.partner_url %>" target="_blank" rel="noopener" class="product-btn access">
        <i class="bi bi-box-arrow-up-right"></i> Open
      </a>
    </div>
    <% }) %>
  </div>
</div>
<% }) %>

<% if (!perks || !perks.length) { %>
<div style="text-align:center;padding:60px 20px;color:#9ca3af">
  <i class="bi bi-grid-3x3-gap-fill" style="font-size:3rem;display:block;margin-bottom:12px"></i>
  <p>No partner services available right now.</p>
</div>
<% } %>

