/* global React */
function BuySection() {
  const payChips = [
    'Tarjeta',
    'Mercado Pago',
    'Pago Fácil',
    'Rapipago',
    'CBU',
  ];
  const flags = [
    { code: 'mx', emoji: '🇲🇽', label: 'México' },
    { code: 'uy', emoji: '🇺🇾', label: 'Uruguay' },
    { code: 'pe', emoji: '🇵🇪', label: 'Perú' },
    { code: 'cl', emoji: '🇨🇱', label: 'Chile' },
  ];
  const Check = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
  return (
    <section className="acmp-buy">
      <div className="acmp-buy-wrap">
        <div className="acmp-buy-head">
          <div className="eyebrow">INSCRIPCIÓN</div>
          <h2>¿Cómo comprar?</h2>
        </div>
        <div className="acmp-buy-grid">
          {/* ---- Curso ---- */}
          <article className="acmp-buy-card">
            <span className="acmp-buy-discount">20% OFF</span>
            <h3 className="acmp-buy-title">Curso de Oratoria: El arte de hablar</h3>
            <div className="acmp-buy-price">
              <span className="now">$39.000<small> ARS</small></span>
              <span className="was">$48.750</span>
            </div>
            <div>
              <p className="acmp-buy-pay-label">Comprá con todos los medios de pago disponibles:</p>
              <div className="acmp-buy-pay-row">
                {payChips.map((p) => <span key={p} className="pay-chip">{p}</span>)}
              </div>
            </div>
            <ul className="acmp-buy-feats">
              <li><Check /> Certificado de finalización.</li>
              <li><Check /> 100% online, a tu ritmo.</li>
            </ul>
            <div className="acmp-buy-cta-wrap">
              <a
                className="acmp-buy-cta"
                href="https://maipistiner.wisboo.com/product/relanzamiento-oratoria-el-arte-de-hablar"
                target="_blank"
                rel="noopener noreferrer"
              >
                Comprar curso →
              </a>
              <div className="acmp-buy-currency">
                <div className="acmp-buy-currency-label">Hacé click y elegí tu moneda local</div>
                <div className="acmp-buy-flags">
                  {flags.map((f) => (
                    <a
                      key={f.code}
                      href="https://maipistiner.wisboo.com/product/relanzamiento-oratoria-el-arte-de-hablar"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="acmp-buy-flag"
                      aria-label={f.label}
                      title={f.label}
                    >
                      {f.emoji}
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </article>

          {/* ---- Combo Extremo ---- */}
          <article className="acmp-buy-card is-combo">
            <span className="acmp-buy-discount">75% OFF</span>
            <h3 className="acmp-buy-combo-head">
              COMBO
              <span className="ln2">EXTREMO</span>
            </h3>
            <p style={{margin:0, fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.5, color:'rgba(255,255,255,0.88)'}}>
              Accedé al Curso de Oratoria y llevate <strong>todos los cursos de la Academia</strong> con un 75% OFF.
            </p>
            <div className="acmp-buy-price">
              <span className="now">$156.250<small> ARS</small></span>
              <span className="was">$625.000</span>
            </div>
            <div>
              <p className="acmp-buy-pay-label">Comprá con todos los medios de pago disponibles:</p>
              <div className="acmp-buy-pay-row">
                {payChips.map((p) => <span key={p} className="pay-chip">{p}</span>)}
              </div>
            </div>
            <ul className="acmp-buy-feats">
              <li><Check /> Hasta 3 cuotas sin interés de $52.083 ARS.</li>
              <li><Check /> 12 meses de acceso.</li>
              <li><Check /> Certificado de finalización + certificados individuales.</li>
              <li><Check /> 100% online · Soporte ilimitado.</li>
              <li><Check /> Incluye TODOS los cursos de la Academia.</li>
            </ul>
            <div className="acmp-buy-cta-wrap">
              <a
                className="acmp-buy-cta"
                href="https://maipistiner.wisboo.com/product/relanzamiento-oratoria-el-arte-de-hablar"
                target="_blank"
                rel="noopener noreferrer"
              >
                Comprar todos los cursos →
              </a>
              <div className="acmp-buy-currency">
                <div className="acmp-buy-currency-label">Hacé click y elegí tu moneda local</div>
                <div className="acmp-buy-flags">
                  {flags.map((f) => (
                    <a
                      key={f.code}
                      href="https://maipistiner.wisboo.com/product/relanzamiento-oratoria-el-arte-de-hablar"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="acmp-buy-flag"
                      aria-label={f.label}
                      title={f.label}
                    >
                      {f.emoji}
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </article>

          <div className="acmp-buy-safe">
            <div className="ico" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z"/>
                <path d="m9 12 2 2 4-4"/>
              </svg>
            </div>
            <div>
              <h4>Cero riesgo · Compra segura</h4>
              <p>Si no te gustó el primer módulo, te devolvemos el 100% de tu inversión.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { BuySection });