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

  return (
    <section id="propuesta" className="section" style={{ background: 'var(--bone)', borderTop: '1px solid var(--border)', position: 'relative' }} data-screen-label="propuesta">
      <div className="container">
        <header className="reveal" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64,
          alignItems: 'end', borderBottom: '1px solid var(--ink)', paddingBottom: 24, marginBottom: 48,
        }}>
          <div>
            <div className="kicker kicker-accent">{C.kicker[lang]}</div>
            <h2 className="h-section" style={{ marginTop: 12 }}>
              {pre}<span className="mk-emph">{emph}</span>{post}
            </h2>
          </div>
          <p className="lead" style={{ color: 'var(--fg-2)', maxWidth: '52ch' }}>{C.body[lang]}</p>
        </header>

        <div className="leak-grid">
          {C.leaks[lang].map((l, i) => (
            <article key={i} className="leak-card reveal" data-delay={i + 1}>
              <div className="leak-num">{l.tag} · {lang === 'es' ? 'pérdida' : 'leak'}</div>
              <h3 className="leak-title">{l.title}</h3>
              <p className="leak-body">{l.body}</p>
              <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--border)', paddingTop: 12 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>
                  {lang === 'es' ? '↳ Lo resolvemos' : '↳ We solve it'}
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--accent)', lineHeight: 1 }}>→</span>
              </div>
            </article>
          ))}
        </div>

        {/* Annotation pointing at the grid */}
        <div className="reveal" data-delay="5" style={{
          marginTop: 48, display: 'flex', gap: 12, alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, color: 'var(--ink-2)',
        }}>
          <span>
            {lang === 'es' ? 'Cada agujero, una hora‑hombre por semana. Mínimo.' : 'Each leak, an hour of human time per week. At minimum.'}
          </span>
          <img src="design-system/marks/asterisk.svg" alt="" className="mark mark-ochre" style={{ width: 20, height: 20 }} />
        </div>
      </div>
    </section>
  );
}

window.Propuesta = Propuesta;