// Pricing — renter-side rate card. Hourly, per GPU, no comparison columns.

function PricingCompare() {
  const rows = [
    ['RTX 5090',     '32 GB VRAM',  { price: '$0.50/hr', soon: false }],
    ['RTX 6000 PRO', '96 GB VRAM',  { price: '$1.30/hr', soon: true }],
    ['L40S',         '48 GB VRAM',  { price: '$1.00/hr', soon: true }],
    ['H200',         '141 GB HBM3e', { price: 'On request', soon: true }],
  ];
  const go = (e) => { e.preventDefault(); const el = document.getElementById('contact'); if (el) window.scrollTo({ top: el.offsetTop - 56, behavior: 'smooth' }); };

  return (
    <Section id="pricing" pad={96} style={{ background: 'var(--bg-alt)' }}>
      <Eyebrow index="07">Pricing</Eyebrow>
      <h2 style={{ fontSize: 'clamp(30px,3.4vw,40px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '16px 0 8px', color: 'var(--fg)' }}>
        Transparent, predictable pricing.
      </h2>
      <p style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: '60ch', margin: '0 0 36px' }}>
        GPU compute is hourly, per GPU, renter-side. No spot swings, no surprise egress. RTX 5090 is live today; other models are on the roadmap. Web, email, and storage are quoted in GBP.
      </p>

      <div style={{ border: '1px solid var(--rule)', borderRadius: 4, overflow: 'hidden', background: 'var(--surface)' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14.5, fontVariantNumeric: 'tabular-nums' }}>
          <thead>
            <tr>
              <th style={thp(true)}>GPU</th>
              <th style={thp(false)}>Memory</th>
              <th style={thp(false)}>Status</th>
              <th style={{ ...thp(false), color: 'var(--fg)', background: 'color-mix(in srgb, var(--accent) 14%, var(--surface))', borderBottom: '2px solid var(--accent)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--accent)', textShadow: '0 0 8px var(--accent-soft)' }}>●</span> Per GPU-hour</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map(([gpu, mem, th]) => (
              <tr key={gpu} style={{ borderTop: '1px solid var(--rule-soft)' }}>
                <td style={{ ...tdp, fontWeight: 700, color: 'var(--fg)' }}>{gpu}</td>
                <td style={{ ...tdp, textAlign: 'right', color: 'var(--fg-3)' }}>{mem}</td>
                <td style={{ ...tdp, textAlign: 'right', color: th.soon ? 'var(--fg-4)' : 'var(--fg)' }}>
                  {th.soon
                    ? <span style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em' }}>SOON</span>
                    : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--accent)', textShadow: '0 0 8px var(--accent-soft)' }}>●</span> Live</span>}
                </td>
                <td style={{ ...tdp, textAlign: 'right', background: 'color-mix(in srgb, var(--accent) 8%, var(--surface))', borderLeft: '1px solid color-mix(in srgb, var(--accent) 30%, var(--rule))' }}>
                  <span style={{ fontWeight: 700, color: th.soon ? 'var(--fg-4)' : 'var(--fg)' }}>{th.price}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ display: 'flex', gap: 24, marginTop: 22, flexWrap: 'wrap', alignItems: 'center', fontSize: 12.5, color: 'var(--fg-4)' }}>
        <span>Billed hourly. No minimums.</span>
        <span style={{ color: 'var(--rule)' }}>│</span>
        <span>Business email, web hosting &amp; cloud storage quoted on request (GBP).</span>
        <a href="#contact" onClick={go} style={{ color: 'var(--fg)', textDecorationColor: 'var(--accent)', textUnderlineOffset: 3, marginLeft: 'auto' }}>Request a quote →</a>
      </div>
    </Section>
  );
}

const thp = (first) => ({
  padding: '14px 16px', textAlign: first ? 'left' : 'right', fontWeight: 400,
  fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)',
  borderBottom: '2px solid var(--fg)', whiteSpace: 'nowrap',
});
const tdp = { padding: '16px 16px', textAlign: 'left' };

window.PricingCompare = PricingCompare;