// Hardware — section 06. The Toronto GPU fleet, framed by what we don't do:
// nothing pre-installed, nobody looking. Node configs only, not full spec sheets.

function Hardware() {
  const fleet = [
    ['1 node',  '8× RTX 5090'],
    ['1 node',  '4× NVIDIA H200'],
    ['3 nodes', '8× RTX 4090'],
  ];

  return (
    <Section id="hardware" pad={96}>
      <Eyebrow index="06">GPU hosting</Eyebrow>
      <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 64, marginTop: 20, alignItems: 'start' }}>
        <div>
          <h2 style={{ fontSize: 'clamp(30px,3.4vw,40px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 14px', color: 'var(--fg)' }}>
            GPU nodes in<br />Toronto.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: '40ch', lineHeight: 1.65, margin: '0 0 28px' }}>
            Rent a single GPU or a whole node, on the same private, owned infrastructure as the rest of the platform. Five nodes live, more underway.
          </p>
          <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 20 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 10 }}>Yours alone</div>
            <p style={{ fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.65, margin: 0, maxWidth: '42ch' }}>
              Nothing is pre-installed. The node boots bare — root, a clean disk, your choice of stack. We don't image it, log into it, or look at what runs on it. Wipe it when you're done; the disk is yours.
            </p>
          </div>
        </div>

        <div style={{ border: '1px solid var(--rule)', borderRadius: 4, overflow: 'hidden', background: 'var(--surface)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--rule-soft)', padding: '14px 20px' }}>
            <span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Fleet · Toronto</span>
            <span style={{ fontSize: 11, color: 'var(--fg-4)', fontVariantNumeric: 'tabular-nums' }}>5 nodes live</span>
          </div>
          <div style={{ fontVariantNumeric: 'tabular-nums' }}>
            {fleet.map(([count, config], i) => (
              <div key={config} style={{ display: 'grid', gridTemplateColumns: '20px 110px 1fr', gap: 16, alignItems: 'center', padding: '20px', borderTop: i ? '1px solid var(--rule-soft)' : 'none', background: i % 2 ? 'var(--bg-alt)' : 'var(--surface)' }}>
                <span style={{ color: 'var(--accent)', fontSize: 12, textShadow: '0 0 9px var(--accent-soft)' }}>●</span>
                <span style={{ fontSize: 12.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{count}</span>
                <span style={{ fontSize: 19, fontWeight: 700, color: 'var(--fg)', letterSpacing: '-0.01em' }}>{config}</span>
              </div>
            ))}
          </div>
          <div style={{ borderTop: '1px solid var(--rule-soft)', padding: '14px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 13, color: 'var(--fg-2)' }}>Rent 1 GPU and up.</span>
            <span style={{ fontSize: 13, color: 'var(--fg)', fontVariantNumeric: 'tabular-nums' }}>Billed by the second.</span>
          </div>
        </div>
      </div>
    </Section>
  );
}

window.Hardware = Hardware;