/* Corridors page hero */
function CorridorsPageHero() {
  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 }}>Corridors</div>
          <h1 style={{
            font: '500 clamp(48px, 5.4vw, 72px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0,
          }}>
            38 corridors. One operator.<br />
            <span style={{ color: 'var(--m-fg-2)' }}>Settled same-day.</span>
          </h1>
          <p style={{
            font: '400 18px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 620,
          }}>
            From GBP&nbsp;→&nbsp;USD on Fedwire to EUR&nbsp;→&nbsp;USDC on Polygon. Routes auto-pick
            the cheapest rail per payment, with transparent fees and live cut-offs you can plan against.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="../signup/index.html" style={{ textDecoration: 'none' }}>
              <button className="m-btn m-btn-primary" style={{ padding: '14px 22px' }}>
                Open account
              </button>
            </a>
            <a href="../index.html#corridors" style={{ textDecoration: 'none' }}>
              <button className="m-btn" style={{
                padding: '14px 22px', background: 'transparent',
                border: '1px solid var(--m-border)', color: 'var(--m-fg)',
              }}>
                See live rates
              </button>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 32, marginTop: 48, flexWrap: 'wrap' }}>
            {[
              ['38', 'Active corridors'],
              ['< 14s', 'Median fill time'],
              ['0.18%', 'Average FX margin'],
              ['99.97%', 'Uptime · last 90 days'],
            ].map(([v, l]) => (
              <div key={l}>
                <div style={{
                  font: '500 28px/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.CorridorsPageHero = CorridorsPageHero;