// Qué es Fuse — definición, la frase que ordena todo, y los siete pilares.
function QueEs() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.quees;
  const [pre, emph, post] = C.h2[lang];
  const [q1, q2] = C.quote[lang];

  return (
    <section id="quees" className="section divider-top" style={{ background: 'var(--paper)' }} data-screen-label="quees">
      <div className="container">
        <div className="kicker kicker-accent reveal">{C.kicker[lang]}</div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'clamp(28px, 5vw, 80px)', marginTop: 20, alignItems: 'start' }} className="quees-cols">
          <h2 className="h-section reveal" data-delay="1" style={{ maxWidth: '18ch' }}>
            {pre}<span className="mk-emph">{emph}</span>{post}
          </h2>
          <p className="reveal" data-delay="2" style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            {C.body[lang]}
          </p>
        </div>

        <blockquote className="pull-quote reveal" data-delay="2" style={{ margin: 'clamp(48px, 7vw, 88px) 0' }}>
          <em>{q1}</em><br />{q2}
        </blockquote>

        <div className="reveal" style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
          <span className="kicker">§ {C.pilares_label[lang]}</span>
          <span className="kicker" style={{ fontStyle: 'normal' }}>{C.pilares_note[lang]}</span>
        </div>

        <div className="pilares-grid">
          {C.pilares[lang].map((p, i) => (
            <article key={p.tag} className="pilar-card reveal" data-delay={(i % 4) + 1}>
              <span className="p-num">§ {p.tag}</span>
              <span className="p-title">{p.title}</span>
              <p className="p-body">{p.body}</p>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          #quees .quees-cols { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.QueEs = QueEs;