/* Pricing hero — eyebrow, big headline, two CTAs, live "saving" widget */
function PricingHero() {
  return (
    <section className="m-section" style={{ paddingTop: 80, paddingBottom: 40 }}>
      <div className="m-container">
        <div className="m-reveal" style={{ maxWidth: 880 }}>
          <div className="m-eyebrow" style={{ marginBottom: 18 }}>Pricing</div>
          <h1 style={{
            font: '500 clamp(48px, 6vw, 76px)/1.04 var(--font-sans)',
            letterSpacing: '-0.032em', margin: 0, color: 'var(--m-fg)',
          }}>
            Pay only for what moves.
          </h1>
          <p style={{
            font: '400 19px/1.55 var(--font-sans)',
            color: 'var(--m-fg-2)', margin: '24px 0 0', maxWidth: 620,
          }}>
            One flat platform fee. Transparent per-corridor pricing.
            No spread games on FX, no minimum balance, no surprises in the small print.
          </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="../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)',
              }}>
                Talk to sales
              </button>
            </a>
          </div>

          <div style={{ display: 'flex', gap: 32, marginTop: 56, flexWrap: 'wrap' }}>
            <Stat n="0.18%" l="Typical FX margin · vs 1.5–2% at banks" />
            <Stat n="8 bps" l="Lowest corridor fee · USDC ↔ USD" />
            <Stat n="£0" l="Setup · monthly minimums · hidden fees" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{
        font: '500 32px/1 var(--font-sans)',
        letterSpacing: '-0.022em', color: 'var(--m-fg)',
        fontFamily: 'IBM Plex Mono, ui-monospace, monospace',
        fontVariantNumeric: 'tabular-nums',
      }}>{n}</div>
      <div style={{
        font: '400 12.5px/1.4 var(--font-sans)',
        color: 'var(--m-fg-3)', marginTop: 8, maxWidth: 220,
      }}>{l}</div>
    </div>
  );
}

window.PricingHero = PricingHero;