// PricingTable - three-tier financial scenario table.
const PricingTable = ({ rows }) => (
  <table style={ptStyles.table}>
    <thead>
      <tr style={ptStyles.headRow}>
        <th style={{ ...ptStyles.th, textAlign: 'left' }}>Tier</th>
        <th style={{ ...ptStyles.th, textAlign: 'left' }}>Audience</th>
        <th style={{ ...ptStyles.th, textAlign: 'right' }}>Annual Fee</th>
      </tr>
    </thead>
    <tbody>
      {rows.map((r, i) => (
        <tr key={i} style={ptStyles.row}>
          <td style={ptStyles.tierCell}>{r.tier}</td>
          <td style={ptStyles.audCell}>{r.audience}</td>
          <td style={ptStyles.feeCell}>{r.fee}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

const ptStyles = {
  table: { width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)' },
  headRow: { borderBottom: '1px solid var(--border-gold)' },
  th: {
    padding: '14px 0', fontFamily: 'var(--font-mono)', fontSize: 10,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: 'var(--fg-2)', fontWeight: 500,
  },
  row: { borderBottom: '1px solid var(--border-soft)' },
  tierCell: {
    padding: '22px 0', fontFamily: 'var(--font-display)', fontSize: 22,
    color: 'var(--fg-1)', fontWeight: 500,
  },
  audCell: { padding: '22px 16px', fontSize: 15, color: 'var(--fg-2)' },
  feeCell: {
    padding: '22px 0', textAlign: 'right',
    fontFamily: 'var(--font-display)', fontSize: 26,
    color: 'var(--fg-accent)', fontWeight: 500,
  },
};

Object.assign(window, { PricingTable });