function Hero() {
  return (
    <section style={{
      padding: '120px 40px 80px',
      maxWidth: 1160, margin: '0 auto',
    }}>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
        textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg-3)',
        marginBottom: 32, display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <ProcessMark />
        Process architecture for AI-era operations
      </div>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontWeight: 600,
        fontSize: 88, lineHeight: 0.98, letterSpacing: '-0.03em',
        margin: 0, maxWidth: 980, color: 'var(--fg-1)',
      }}>
        AI can't run on tribal knowledge<br />
        and undocumented handoffs.
      </h1>
      <p style={{
        fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.5,
        color: 'var(--fg-2)', marginTop: 32, maxWidth: 680,
      }}>
        Before you can automate work, you need to define how work actually gets done.
        Step 4 maps your process architecture, identifies the handoffs where debt hides,
        and tells you exactly where AI can safely be applied.
      </p>
      <div style={{ display: 'flex', gap: 14, marginTop: 48 }}>
        <a href="contact.html" style={{
          display: 'inline-block', textDecoration: 'none',
          fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
          padding: '14px 26px', border: '1px solid var(--s4-ink)',
          background: 'var(--s4-ink)', color: 'var(--s4-paper)',
          cursor: 'pointer', borderRadius: 2,
          transition: 'background 200ms var(--ease-out), color 200ms var(--ease-out)',
        }}
        onMouseEnter={e => { e.currentTarget.style.background = 'var(--s4-paper)'; e.currentTarget.style.color = 'var(--s4-ink)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'var(--s4-ink)'; e.currentTarget.style.color = 'var(--s4-paper)'; }}>
          Book an assessment  →
        </a>
        <a href="white-paper.html" style={{
          display: 'inline-block', textDecoration: 'none',
          fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
          padding: '14px 26px', border: '1px solid var(--s4-ink)',
          background: 'transparent', color: 'var(--s4-ink)',
          cursor: 'pointer', borderRadius: 2,
          transition: 'all 200ms var(--ease-out)',
        }}
        onMouseEnter={e => { e.currentTarget.style.background = 'var(--s4-ink)'; e.currentTarget.style.color = 'var(--s4-paper)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--s4-ink)'; }}>
          Read the white paper
        </a>
      </div>
    </section>
  );
}

function ProcessMark() {
  return (
    <svg width="100" height="12" viewBox="0 0 100 12">
      <line x1="4" y1="6" x2="96" y2="6" stroke="#0E0E0E" strokeWidth="1.5"/>
      <circle cx="4" cy="6" r="3" fill="#0E0E0E"/>
      <rect x="27" y="3" width="6" height="6" fill="#FAFAF7" stroke="#0E0E0E" strokeWidth="1.5"/>
      <rect x="52" y="3" width="6" height="6" fill="#FAFAF7" stroke="#0E0E0E" strokeWidth="1.5" transform="rotate(45 55 6)"/>
      <rect x="75" y="3" width="6" height="6" fill="#CD713D"/>
      <circle cx="96" cy="6" r="3" fill="#0E0E0E"/>
    </svg>
  );
}

window.Hero = Hero;
window.ProcessMark = ProcessMark;