function Contact() {
  return (
    <section id="contact" className="section-pad" style={{
      background: 'var(--bg-elevated)',
      borderTop: '1px solid var(--border-subtle)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Radial blue glow */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 600, height: 400,
        background: 'radial-gradient(ellipse at center, rgba(59,130,246,0.12) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>

          <h2 className="reveal reveal-d1" style={{
            fontSize: 'clamp(36px, 5vw, 72px)',
            fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1.0,
            marginBottom: 20,
          }}>
            Need urgent mining<br />spare parts?
          </h2>

          <p className="reveal reveal-d2" style={{
            color: 'var(--text-secondary)', fontSize: 17, lineHeight: 1.65,
            maxWidth: 560, margin: '0 auto 36px',
          }}>
            Send your part number now and receive a quotation within 24 hours.
          </p>

          <div className="reveal reveal-d3" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginBottom: 28 }}>
            <button className="btn btn-primary" style={{ fontSize: 16, padding: '14px 28px' }}
              onClick={() => { const el = document.getElementById('quote'); if(el) window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 80, behavior:'smooth'}); }}>
              Request Quote →
            </button>
          </div>

          {/* Status line */}
          <div className="reveal reveal-d4" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            fontWeight: 500, color: 'var(--text-tertiary)', letterSpacing: '0.06em',
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: '50%', background: 'var(--success)',
              display: 'inline-block', animation: 'pulse-green 2s infinite', flexShrink: 0,
            }} />
            SYSTEMS OPERATIONAL · RESPONSE SLA: &lt;24H · SAT, SUN INCLUDED
          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });