// CompareTable.jsx — full benefit matrix grouped by category
function CompareTable({ selectedId, onSelect }) {
  const tiers = window.TIERS.filter(t => !t.customAmount);
  const groups = window.BENEFIT_GROUPS;

  const fmtPrice = (p) => p >= 1000 ? `$${(p / 1000).toFixed(1).replace(/\.0$/, '')}K` : `$${p}`;

  return (
    <section className="section" data-anchor id="compare" style={{ borderBottom: '1px solid var(--border)' }}>
      <div className="section-narrow">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Benefit Matrix</div>
          <h2 className="chrome-text" style={{
            fontSize: 'clamp(40px, 5.5vw, 72px)', margin: 0,
          }}>Compare All Tiers</h2>
        </div>

        <div style={{
          border: '1px solid var(--border)',
          borderRadius: 6,
          overflow: 'auto',
          maxHeight: 720,
          background: '#080808',
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 28px rgba(0,0,0,0.5)',
        }}>
          <table className="compare-table">
            <thead>
              <tr>
                <th>Benefit</th>
                {tiers.map(t => (
                  <th key={t.id} style={{
                    background: selectedId === t.id
                      ? 'linear-gradient(180deg, #2a2a2a 0%, #161616 100%)'
                      : undefined,
                    color: selectedId === t.id ? 'var(--viper-platinum)' : undefined,
                  }}>
                    {t.name}<br />
                    <span style={{
                      fontFamily: 'var(--font-display)', fontSize: 13,
                      letterSpacing: '0.02em', color: 'var(--fg-3)',
                      fontWeight: 700,
                    }}>{fmtPrice(t.price)}</span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {groups.map((group, gi) => (
                <React.Fragment key={gi}>
                  {/* Category header row */}
                  <tr>
                    <td colSpan={tiers.length + 1} style={{
                      padding: '16px 18px 10px',
                      background: 'linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%)',
                      borderTop: gi === 0 ? 'none' : '1px solid var(--border)',
                      borderBottom: '1px solid var(--border)',
                      fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 11,
                      textTransform: 'uppercase', letterSpacing: '0.22em',
                      color: 'var(--viper-platinum)',
                    }}>{group.title}</td>
                  </tr>
                  {group.rows.map((row, i) => (
                    <tr key={`${gi}-${i}`}>
                      <td>{row.label}</td>
                      {tiers.map(t => (
                        <td key={t.id} style={{
                          background: selectedId === t.id ? 'rgba(255,255,255,0.03)' : undefined,
                        }}>
                          {row.tiers.includes(t.id)
                            ? <span className="compare-yes" aria-label="Included"></span>
                            : <span className="compare-no">—</span>}
                        </td>
                      ))}
                    </tr>
                  ))}
                </React.Fragment>
              ))}
              <tr>
                <td style={{ padding: '20px 18px', fontWeight: 700 }}></td>
                {tiers.map(t => (
                  <td key={t.id} style={{ padding: '16px 8px' }}>
                    <button
                      onClick={() => onSelect(t)}
                      style={{
                        padding: '8px 12px',
                        background: selectedId === t.id
                          ? 'linear-gradient(180deg, #f0f0f0 0%, #b0b0b0 50%, #5a5a5a 100%)'
                          : 'transparent',
                        color: selectedId === t.id ? '#0a0a0a' : 'var(--fg-2)',
                        border: '1px solid var(--viper-steel)',
                        borderRadius: 3,
                        fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 10,
                        textTransform: 'uppercase', letterSpacing: '0.14em',
                        cursor: 'pointer',
                        whiteSpace: 'nowrap',
                      }}
                    >{selectedId === t.id ? '✓ Picked' : 'Pick'}</button>
                  </td>
                ))}
              </tr>
            </tbody>
          </table>
        </div>

        <p style={{
          textAlign: 'center', marginTop: 24,
          fontSize: 13, color: 'var(--fg-3)', maxWidth: 640, margin: '24px auto 0',
        }}>
          <strong style={{ color: 'var(--viper-white)' }}>Open Shot donations welcome.</strong> Any
          amount earns the benefits of the matching tier — e.g. $750 → Hole Sponsor benefits, $1,200 → Game Day benefits.
        </p>
      </div>
    </section>
  );
}