/* OTC page hero */
function OTCPageHero() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 48, position: 'relative', overflow: 'hidden' }}>
      <div className="m-container" style={{ maxWidth: 920 }}>
        <div className="m-reveal">
          <div className="m-eyebrow" style={{ marginBottom: 18 }}>OTC desk</div>
          <h1 style={{
            font: '500 clamp(48px, 5.4vw, 72px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0,
          }}>
            Block trades, handled.<br />
            <span style={{ color: 'var(--m-fg-2)' }}>By people, not bots.</span>
          </h1>
          <p style={{
            font: '400 18px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 620,
          }}>
            For trades above £250K, our OTC desk gives you direct human coverage in London and
            New York, fixed-rate execution, and same-day settlement. No slippage, no thin orderbooks.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="../otc-talk/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn m-btn-primary" style={{ padding: '14px 22px' }}>
                Talk to the desk
              </button>
            </a>
            <a href="../pricing/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn" style={{
                padding: '14px 22px', background: 'transparent',
                border: '1px solid var(--m-border)', color: 'var(--m-fg)',
              }}>
                See terms
              </button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 32, marginTop: 48, flexWrap: 'wrap' }}>
            {[
              ['£250K', 'Minimum ticket'],
              ['T+0', 'Settlement'],
              ['07:00–22:00 UTC', 'Desk hours'],
              ['1.5 bps', 'Typical spread inside 5M'],
            ].map(([v, l]) => (
              <div key={l}>
                <div style={{
                  font: '500 24px/1 var(--font-sans)',
                  letterSpacing: '-0.022em', color: 'var(--m-fg)',
                  fontFamily: 'IBM Plex Mono, ui-monospace, monospace',
                }}>{v}</div>
                <div style={{
                  font: '400 12.5px/1.4 var(--font-sans)',
                  color: 'var(--m-fg-3)', marginTop: 8,
                }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.OTCPageHero = OTCPageHero;