// ============================================================
// BNI — Invitation + 50% discount offer
// ============================================================

function BNI() {
  const inspirito = CHARACTERS.find(c => c.id === "inspirito");
  const miau = CHARACTERS.find(c => c.id === "miau");
  const optimiau = CHARACTERS.find(c => c.id === "optimiau");
  const guardian = CHARACTERS.find(c => c.id === "guardian");

  const cast = [inspirito, miau, optimiau, guardian];

  const waLink = "https://wa.me/525532009853?text=" + encodeURIComponent(
    "Hola Cristina, quiero registrarme en BNI a través de tu invitación y aprovechar el 50% de descuento en mi primera compra DIMTEL."
  );

  return (
    <section id="bni" className="section bni">
      <div className="bni-wrap">
        <div className="bni-flag">
          <span className="bni-flag-dot" />
          <span>Beneficio exclusivo · BNI × DIMTEL</span>
        </div>

        <div className="bni-grid">
          <div className="bni-copy">
            <h2>
              Únete a <em>BNI</em> y llévate
              <span className="bni-pct">
                <b>50%</b>
                <small>off</small>
              </span>
              en tu primera compra.
            </h2>
            <p>
              <b>BNI</b> es la red de empresarios más grande del mundo. Te invito a postularte como visita a mi capítulo. Cuando me contactes para registrarte, tu primera compra DIMTEL se aplica con <b>50% de descuento</b>.
            </p>

            <ul className="bni-perks">
              <li>
                <span className="bni-perk-dot" style={{ background: inspirito.color }} />
                <div><b>Referidos calificados</b> de empresarios de tu zona — uno por categoría.</div>
              </li>
              <li>
                <span className="bni-perk-dot" style={{ background: miau.color }} />
                <div><b>Mentoría con Cristina</b> para entrar a tu capítulo con un pitch real.</div>
              </li>
              <li>
                <span className="bni-perk-dot" style={{ background: optimiau.color }} />
                <div><b>50% off automático</b> en tu primer bot, curso o bootcamp.</div>
              </li>
            </ul>

            <div className="bni-actions">
              <a className="btn btn-primary" href={waLink}>Contactar a Cristina · activar 50% →</a>
              <a className="btn btn-ghost" href="https://www.bni.com/es-MX" target="_blank" rel="noopener">¿Qué es BNI? ↗</a>
            </div>

            <p className="bni-fine">
              Aplica una sola vez por empresa, sobre el precio público vigente.
            </p>
          </div>

          <aside className="bni-card">
            <div className="bni-card-head">
              <small>VISITAS · 2026</small>
              <div className="bni-trio">
                {cast.map(c => (
                  <span key={c.id} className="bni-mini" style={{ "--mc": c.color }}>
                    <img src={c.img} alt={c.name} draggable="false" />
                  </span>
                ))}
              </div>
            </div>

            <div className="bni-ticket">
              <div className="bni-ticket-top">
                <b>BNI × DIMTEL</b>
                <small>VIP PASS · 2026</small>
              </div>
              <div className="bni-ticket-mid">
                <span className="bni-pct big">
                  <b>50</b>
                  <small>% OFF</small>
                </span>
                <div>
                  <small>Primera compra</small>
                  <p>Bots · Cursos · Bootcamp</p>
                </div>
              </div>
              <div className="bni-ticket-foot">
                <small>HOLDER</small>
                <b>Tu nombre</b>
                <small style={{ marginTop: 8 }}>CÓDIGO</small>
                <b className="bni-code">BNI-GTA-2026</b>
              </div>
              <span className="bni-perf" aria-hidden="true" />
            </div>

            <p className="bni-card-note">
              <b>Inspirito:</b> "Las redes no se hacen en LinkedIn, se hacen viéndonos a la cara los martes a las 7 a.m."
            </p>
          </aside>
        </div>
      </div>
    </section>
  );
}

window.BNI = BNI;