/* global React */
// ============================================================
// Transparency — "Lo que ves es lo que pagas."
//
// White-bg section between Audiences and Features.
// Two side-by-side cards separated by a centred "vs" pivot:
//   LEFT  — Banco tradicional: muted, red values, hidden costs.
//   RIGHT — Meefi: brand-blue border, green values, visible total.
//
// The contrast should read immediately — left feels heavy and
// red, right feels clean and green.
// ============================================================

// ------------------------------------------------------------
// Card data
// ------------------------------------------------------------
const BANK_ROWS = [
  { key: "Comisión de envío",  val: "$25 USD" },
  { key: "Spread FX",          val: "Oculto, lo descubres después" },
  { key: "Banco corresponsal", val: "~$20 USD" },
  { key: "Tiempo de llegada",  val: "3–5 días hábiles" },
];

const MEEFI_ROWS = [
  { key: "Spread FX",          val: "Visible en tiempo real" },
  { key: "Tipo de cambio",     val: "Monto real", fn: 4 },
  { key: "Cargos adicionales", val: "Ninguno" },
  { key: "Tiempo de llegada",  val: "El mismo día" },
];

// Inline check icon for the Meefi rows
const CheckIcon = (props) => (
  <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
    <path
      d="M3.5 8.5 L6.5 11.5 L12.5 4.5"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

// ------------------------------------------------------------
// Section
// ------------------------------------------------------------
function TransparencySection() {
  return (
    <section className="transp-section" data-screen-label="Transparencia">
      {/* Ambient background — subtle grid + vignette (paired with SPEI Global) */}
      <div className="transp-ambient" aria-hidden="true"/>

      <div className="transp-wrap">
        <header className="transp-header">
          <span className="transp-badge reveal">
            <span className="transp-badge-dot" aria-hidden="true"/>
            Transparencia total
          </span>
          <h2 className="transp-headline reveal" style={{ "--reveal-delay": "80ms" }}>
            Lo que ves es <span className="transp-headline-grad">lo que pagas.</span>
          </h2>
          <p className="transp-lede reveal" style={{ "--reveal-delay": "160ms" }}>
            Compara cualquier envío. El spread existe, pero lo ves en tiempo
            real antes de confirmar. Sin sorpresas, sin asteriscos.
          </p>
        </header>

        <div className="transp-compare">
          {/* LEFT — Banco tradicional */}
          <article className="transp-card transp-card-bad reveal" style={{ "--reveal-delay": "200ms" }}>
            <span className="transp-card-label">
              Banco tradicional · $6,000 USD enviados<Fn n={5}/>
            </span>
            <ul className="transp-rows">
              {BANK_ROWS.map((r, i) => (
                <li key={i} className="transp-row">
                  <span className="transp-row-key">{r.key}</span>
                  <span className="transp-row-val transp-row-val-bad">{r.val}</span>
                </li>
              ))}
            </ul>
            <div className="transp-close transp-close-bad">
              <span className="transp-close-key-bad">Total real</span>
              <span className="transp-close-val-bad">~$120 USD ocultos</span>
            </div>
          </article>

          {/* VS pivot */}
          <div className="transp-vs" aria-hidden="true">
            <span className="transp-vs-line"/>
            <span className="transp-vs-chip">vs</span>
            <span className="transp-vs-line"/>
          </div>

          {/* RIGHT — Meefi */}
          <article className="transp-card transp-card-good reveal" style={{ "--reveal-delay": "260ms" }}>
            <span className="transp-card-badge">Meefi</span>
            <span className="transp-card-label transp-card-label-good">
              Meefi · $6,000 USD enviados
            </span>
            <ul className="transp-rows">
              {MEEFI_ROWS.map((r, i) => (
                <li key={i} className="transp-row">
                  <span className="transp-row-key">{r.key}</span>
                  <span className="transp-row-val transp-row-val-good">
                    <CheckIcon className="transp-check"/>
                    {r.val}{r.fn && <Fn n={r.fn}/>}
                  </span>
                </li>
              ))}
            </ul>
            <div className="transp-close transp-close-good">
              <span className="transp-close-key">Lo que ves</span>
              <span className="transp-close-val">Es lo que pagas</span>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

window.TransparencySection = TransparencySection;