// Sección "Alcance de ALLIANCE y proceso de vinculación" — se coloca antes del formulario.
// Contenido legal fijo (ES/EN) definido en i18n.js bajo las claves legal_*.
const LegalScope = ({ t }) => (
  <section id="legal-scope" className="section section-tinted legal-scope">
    <div className="container container-narrow">
      <div className="section-head">
        <div className="eyebrow">{t.legal_eyebrow}</div>
        <h2>{t.legal_title}</h2>
        <p className="section-lede">{t.legal_lede}</p>
      </div>

      <div className="legal-block">
        <h3>{t.legal_s1_title}</h3>
        <p>{t.legal_s1_p1}</p>
        <p>{t.legal_s1_p2}</p>
        <p>{t.legal_s1_p3}</p>
        <p>{t.legal_s1_p4}</p>
        <p>{t.legal_s1_p5}</p>
        <p>{t.legal_s1_p6}</p>
      </div>

      <div className="legal-block">
        <h3>{t.legal_s2_title}</h3>
        <p>{t.legal_s2_p1}</p>
        <p>{t.legal_s2_p2}</p>
        <p>{t.legal_s2_p3}</p>
        <p>{t.legal_s2_p4}</p>
        <p>{t.legal_s2_p5}</p>
      </div>

      <div className="legal-block">
        <h3>{t.legal_s3_title}</h3>
        <p>{t.legal_s3_p1}</p>
        <p>{t.legal_s3_p2}</p>
      </div>

      <div className="legal-block">
        <h3>{t.legal_s4_title}</h3>
        <p>{t.legal_s4_p1}</p>
        <p>{t.legal_s4_p2}</p>
      </div>

      <div className="legal-more">
        <a href="terms-of-use.html" className="link">
          {t.legal_more_link}
          <i data-lucide="arrow-right"></i>
        </a>
      </div>
    </div>
  </section>
);

window.LegalScope = LegalScope;