/* Fee matrix — sortable per-rail × tier fee table */
function FeeMatrix() {
  const rows = [
    { rail: 'SEPA Instant',     starter: '20 bps', growth: '15 bps', business: '12 bps', enterprise: 'Bilateral', tag: 'EUR' },
    { rail: 'Faster Payments',  starter: '15 bps', growth: '12 bps', business: '10 bps', enterprise: 'Bilateral', tag: 'GBP' },
    { rail: 'Fedwire',          starter: '£8 + 25 bps', growth: '£5 + 18 bps', business: '£3 + 12 bps', enterprise: 'Bilateral', tag: 'USD' },
    { rail: 'SWIFT GPI',        starter: '£18 + 35 bps', growth: '£12 + 25 bps', business: '£8 + 18 bps', enterprise: 'Bilateral', tag: 'G20' },
    { rail: 'USDC on-chain',    starter: '12 bps', growth: '8 bps',  business: '5 bps',  enterprise: 'Bilateral', tag: 'Polygon · Ethereum · Base' },
    { rail: 'USDT on-chain',    starter: '12 bps', growth: '8 bps',  business: '5 bps',  enterprise: 'Bilateral', tag: 'Tron · Ethereum' },
    { rail: 'EURC on-chain',    starter: '12 bps', growth: '8 bps',  business: '5 bps',  enterprise: 'Bilateral', tag: 'Ethereum' },
    { rail: 'FX margin',        starter: '0.30%', growth: '0.18%', business: '0.12%', enterprise: 'Sub-bps', tag: 'Mid-market reference' },
  ];

  return (
    <section className="m-section" style={{ paddingTop: 64 }}>
      <div className="m-container">
        <div style={{ marginBottom: 28 }}>
          <div className="m-eyebrow" style={{ marginBottom: 14 }}>Fee schedule</div>
          <h2 style={{
            font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
            letterSpacing: '-0.025em', margin: 0,
          }}>
            Per-rail pricing, in detail.
          </h2>
        </div>

        <div style={{
          border: '1px solid var(--m-border)',
          borderRadius: 20, overflow: 'hidden',
          background: 'var(--m-card-bg, transparent)',
        }}>
          <table style={{
            width: '100%', borderCollapse: 'collapse',
            font: '400 14px/1.4 var(--font-sans)',
          }}>
            <thead>
              <tr style={{ background: 'color-mix(in oklab, var(--m-fg) 4%, transparent)' }}>
                {['Rail', 'Starter', 'Growth', 'Business', 'Enterprise'].map((h) => (
                  <th key={h} style={{
                    textAlign: h === 'Rail' ? 'left' : 'right',
                    padding: '16px 20px',
                    font: '500 11px/1 var(--font-sans)',
                    letterSpacing: '0.12em', textTransform: 'uppercase',
                    color: 'var(--m-fg-3)',
                    borderBottom: '1px solid var(--m-border)',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <FeeRow key={r.rail} row={r} last={i === rows.length - 1} />
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

function FeeRow({ row, last }) {
  const [hover, setHover] = React.useState(false);
  const cell = (val, num) => (
    <td style={{
      textAlign: 'right',
      padding: '18px 20px',
      borderBottom: last ? 'none' : '1px solid var(--m-border)',
      font: '500 13.5px/1 var(--font-sans)',
      fontFamily: num ? 'IBM Plex Mono, ui-monospace, monospace' : 'var(--font-sans)',
      fontVariantNumeric: 'tabular-nums',
      color: 'var(--m-fg)',
      transition: 'background var(--dur-base) var(--ease-standard)',
    }}>{val}</td>
  );

  return (
    <tr
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'color-mix(in oklab, var(--m-fg) 3%, transparent)' : 'transparent',
        transition: 'background var(--dur-base) var(--ease-standard)',
      }}>
      <td style={{
        textAlign: 'left',
        padding: '18px 20px',
        borderBottom: last ? 'none' : '1px solid var(--m-border)',
      }}>
        <div style={{
          font: '500 14px/1.2 var(--font-sans)',
          letterSpacing: '-0.008em',
          color: 'var(--m-fg)',
        }}>{row.rail}</div>
        <div style={{
          font: '400 12px/1.3 var(--font-sans)',
          color: 'var(--m-fg-3)', marginTop: 4,
        }}>{row.tag}</div>
      </td>
      {cell(row.starter, true)}
      {cell(row.growth, true)}
      {cell(row.business, true)}
      {cell(row.enterprise, false)}
    </tr>
  );
}

window.FeeMatrix = FeeMatrix;