function ParaQuien() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.paraQuien;

  return (
    <section id="paraquien" className="section-tight" style={{ background: 'var(--bone-2)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }} data-screen-label="para-quien">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }}>
          <div className="reveal" style={{ position: 'sticky', top: 96 }}>
            <div className="kicker kicker-accent">{C.kicker[lang]}</div>
            <h2 className="h-section" style={{ marginTop: 12 }}>{C.h2[lang]}</h2>
            <p className="caption" style={{ marginTop: 18, maxWidth: '32ch' }}>
              {lang === 'es'
                ? 'Si no encajás acá, probablemente no somos los indicados — y vale más que te lo digamos.'
                : 'If you don\'t fit here, we\'re probably not the right ones — and it\'s worth saying so.'}
            </p>
          </div>

          <dl className="dl-spec reveal" data-delay="2">
            {C.rows[lang].map(([k, v], i) => (
              <React.Fragment key={i}>
                <dt>{k}</dt>
                <dd>{v}</dd>
              </React.Fragment>
            ))}
          </dl>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          #paraquien .container > div { grid-template-columns: 1fr !important; gap: 32px !important; }
          #paraquien .container > div > div { position: static !important; }
        }
      `}</style>
    </section>
  );
}

window.ParaQuien = ParaQuien;