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

  return (
    <section id="porque" className="section dark" style={{ borderTop: '1px solid var(--border-on-dark)' }} data-screen-label="porque">
      <div className="container">
        <header className="reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'end', marginBottom: 56 }}>
          <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'
              ? 'Diseñamos sistemas que ya vivimos como vendedores y operadores. Construimos lo que proponemos. Conocemos el sector desde adentro. No hay subcontratación, no hay AI‑slop.'
              : 'We design systems we\'ve lived as sellers and operators. We build what we propose. We know the sector from inside. No subcontracting, no AI-slop.'}
          </p>
        </header>

        <div className="reasons">
          {reasons.map((r, i) => (
            <article key={i} className="reason reveal" data-delay={i + 1}>
              <span className="r-num">§ 0{i + 1}</span>
              <h4>{r.title}</h4>
              <p>{r.body}</p>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          #porque header { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

window.PorQue = PorQue;