/* Platform page hero — wraps PlatformV2 */
function PlatformPageHero() {
  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 }}>The platform</div>
          <h1 style={{
            font: '500 clamp(48px, 5.4vw, 72px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0,
          }}>
            Move money like the<br />
            <span style={{ color: 'var(--m-fg-2)' }}>internet moves data.</span>
          </h1>
          <p style={{
            font: '400 18px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 620,
          }}>
            One API for vIBANs, FX, stablecoins and on-chain settlement. Routes payments through
            38 corridors, settles same-day, and reconciles automatically. Built on regulated rails.
          </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' }}>
                Start building
              </button>
            </a>
            <a href="../otc-talk/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)',
              }}>
                Read the docs
              </button>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.PlatformPageHero = PlatformPageHero;