function Proceso() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.proceso;
  const steps = C.steps[lang];
  const [pre, emph, post] = C.h2[lang];

  return (
    <section id="proceso" className="section dark" data-screen-label="proceso">
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'end', marginBottom: 72 }} className="reveal">
          <div>
            <div className="kicker kicker-on-dark" style={{ color: 'var(--ochre)' }}>{C.kicker[lang]}</div>
            <h2 className="h-section" style={{ marginTop: 12, color: 'var(--bone)' }}>
              {pre} <em style={{ color: 'var(--ochre)' }}>{emph}</em>{post}
            </h2>
          </div>
          <p className="lead" style={{ color: 'var(--bone)', opacity: 0.72 }}>
            {lang === 'es'
              ? 'No vendemos software. No vendemos retainers indefinidos. Diseñamos un sistema concreto, lo construimos, y lo dejamos corriendo en tu firma. Si volvemos, es porque hay más trabajo — no porque la cuenta nunca cierra.'
              : 'We don\'t sell software. We don\'t sell open-ended retainers. We design a specific system, build it, and leave it running in your firm. If we come back, it\'s because there\'s more work — not because the engagement never closes.'}
          </p>
        </header>

        <ol style={{
          listStyle: 'none', padding: 0, margin: 0,
          display: 'grid', gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 0,
          borderTop: '1px solid var(--border-on-dark)',
        }}>
          {steps.map((s, i) => (
            <li
              key={s.n}
              className="reveal"
              data-delay={i + 1}
              style={{
                padding: '32px 24px 40px 0',
                borderRight: i < steps.length - 1 ? '1px solid var(--border-on-dark)' : 'none',
                paddingLeft: i === 0 ? 0 : 24,
                display: 'flex', flexDirection: 'column', gap: 16,
                position: 'relative',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, lineHeight: 1, color: 'var(--ochre)', letterSpacing: '-0.02em' }}>{s.n}</span>
                <span className="kicker kicker-on-dark">{s.dur}</span>
              </div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em', margin: 0, color: 'var(--bone)' }}>{s.label}</h4>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--bone)', opacity: 0.7, margin: 0 }}>{s.body}</p>
              {i < steps.length - 1 && (
                <span style={{
                  position: 'absolute', top: 56, right: -6, color: 'var(--ochre)',
                  fontFamily: 'var(--font-display)', fontSize: 18, opacity: 0.6,
                }}>→</span>
              )}
            </li>
          ))}
        </ol>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #proceso ol { grid-template-columns: repeat(2, 1fr) !important; }
          #proceso ol li { border-right: none !important; border-bottom: 1px solid var(--border-on-dark) !important; padding-left: 0 !important; padding-right: 24px !important; }
        }
        @media (max-width: 600px) {
          #proceso ol { grid-template-columns: 1fr !important; }
          #proceso header { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

window.Proceso = Proceso;