/* 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 = [
  "Your bank doesn't know if the payment has a backing invoice.",
  "It can't verify the supplier exists in the SAT.",
  "It blocks out of caution, not evidence.",
  "You solve the problem without knowing what it is.",
];

const CONT_GOOD = [
  "Every payment backed by its tax materiality.",
  "Direct SAT integration from onboarding.",
  "KYC and AML completed without unnecessary friction.",
  "Real-time validations before the payment leaves.",
];

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="Operational continuity"
      className="cont-section"
    >
      <div className="cont-wrap">
        {/* Header */}
        <div className="cont-header">
          <span className="cont-badge">
            <span className="cont-badge-dot" aria-hidden="true"/>
            Operational continuity
          </span>
          <h2 className="cont-headline">
            Your operation doesn't stop <span style={{ color: "var(--fg-2)" }}>over a legitimate payment.</span>
          </h2>
          <p className="cont-lede">
            Blocks happen because your financial institution has no context
            about your operation. Meefi is integrated with the SAT — every
            payment travels with the materiality that backs it.
          </p>
        </div>

        {/* Two-column comparison */}
        <div className="cont-grid">
          {/* LEFT */}
          <div className="cont-col cont-col-bad">
            <div className="cont-col-label">No context (traditional bank)</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">With 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 doesn't loosen compliance. It makes it intelligent.
        </p>
      </div>
    </section>
  );
}
window.ContinuitySection = ContinuitySection;