/* global React, Icons */
// ============================================================
// CONTINUITY SECTION
//
// Sits between Transparencia (dark) and Features (white).
// Stays WHITE — used as a structural "reset" between dark
// moments, with a left-aligned editorial layout:
//
//   Badge "CONTINUIDAD OPERATIVA"
//   Headline + intro paragraph
//   Two columns separated by a faint vertical divider
//   Closing line under a horizontal divider
// ============================================================

const CONT_BAD = [
  "Tu banco no sabe si el pago tiene factura de respaldo.",
  "No puede verificar que el proveedor existe en el SAT.",
  "Bloquea por precaución, no por evidencia.",
  "Tú resuelves el problema sin saber cuál es.",
];

const CONT_GOOD = [
  "Cada pago respaldado por su materialidad fiscal.",
  "Integración directa al SAT desde el onboarding.",
  "KYC y PLD completados sin fricciones innecesarias.",
  "Validaciones en tiempo real antes de que el pago salga.",
];

function ContXIcon() {
  return (
    <svg viewBox="0 0 16 16" className="cont-x" aria-hidden="true">
      <path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
    </svg>
  );
}
function ContCheckIcon() {
  return (
    <svg viewBox="0 0 16 16" className="cont-check" aria-hidden="true">
      <path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  );
}

function ContinuitySection() {
  return (
    <section
      id="continuidad"
      data-screen-label="Continuidad operativa"
      className="cont-section"
    >
      <div className="cont-wrap">
        {/* Header */}
        <div className="cont-header">
          <span className="cont-badge">
            <span className="cont-badge-dot" aria-hidden="true"/>
            Continuidad operativa
          </span>
          <h2 className="cont-headline">
            Tu operación no para <span style={{ color: "var(--fg-2)" }}>por un pago legítimo.</span>
          </h2>
          <p className="cont-lede">
            Los bloqueos ocurren porque tu institución financiera no tiene
            contexto de tu operación. Meefi está integrado al SAT — cada
            pago viaja con la materialidad que lo respalda.
          </p>
        </div>

        {/* Two-column comparison */}
        <div className="cont-grid">
          {/* LEFT */}
          <div className="cont-col cont-col-bad">
            <div className="cont-col-label">Sin contexto (banco tradicional)</div>
            <ul className="cont-list">
              {CONT_BAD.map((t, i) => (
                <li key={i} className="cont-item">
                  <span className="cont-item-icon cont-item-icon-bad">
                    <ContXIcon/>
                  </span>
                  <span className="cont-item-text">{t}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Vertical divider */}
          <div className="cont-divider-v" aria-hidden="true"/>

          {/* RIGHT */}
          <div className="cont-col cont-col-good">
            <div className="cont-col-label cont-col-label-good">Con Meefi</div>
            <ul className="cont-list">
              {CONT_GOOD.map((t, i) => (
                <li key={i} className="cont-item">
                  <span className="cont-item-icon cont-item-icon-good">
                    <ContCheckIcon/>
                  </span>
                  <span className="cont-item-text">{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Horizontal divider + closing line */}
        <div className="cont-divider-h" aria-hidden="true"/>
        <p className="cont-close">
          Meefi no relaja el compliance. Lo hace inteligente.
        </p>
      </div>
    </section>
  );
}
window.ContinuitySection = ContinuitySection;