/* global React */
// ============================================================
// ComplianceSection — "doble blindaje" regulatorio.
//
// Se ubica ENTRE AppSection (Próximamente · claro) y OfficesSection
// (Oficinas/Promotorías). Cuenta el mismo hilo de legitimidad que
// Oficinas: si Oficinas dice "estamos cerca de ti en México y EE.UU.",
// Compliance dice "y estamos regulados en México y EE.UU.".
//
// COLOR: banda AZUL OSCURO (mismo lenguaje que Testimonios / Transparencia)
// — arranca la nueva alternancia a partir del blanco de AppSection:
//   App(claro) → Compliance(oscuro) → Oficinas(claro) → FAQ(oscuro) → CTA(claro)
//
// LOGOS: los PNG oficiales (assets/cnbv-logo.png, assets/fincen-logo.png)
// se muestran SIN alterar, sobre placas blancas idénticas. Son emblemas
// muy distintos (lockup horizontal vs. sello circular a color), así que
// la unificación se hace a nivel de placa — no recoloreando los logos,
// que perdería el detalle del sello de FinCEN.
// ============================================================

const CMPL_REGULATORS = [
  {
    acr: "CNBV",
    logo: "assets/cnbv-logo.png",
    name: "Comisión Nacional Bancaria y de Valores",
    country: "México",
  },
  {
    acr: "FinCEN",
    logo: "assets/fincen-logo.png",
    name: "Financial Crimes Enforcement Network",
    country: "Estados Unidos",
  },
];

function ComplianceSection() {
  return (
    <section id="compliance" data-screen-label="Compliance" className="cmpl-section">
      <div className="wrap">
        {/* Header */}
        <header className="cmpl-header reveal">
          <span className="cmpl-badge">
            <span className="cmpl-badge-dot" aria-hidden="true"/>
            Cumplimiento regulatorio
          </span>
          <h2 className="cmpl-title">
            Doble blindaje regulatorio,{" "}
            <span className="cmpl-title-dim">en México y Estados Unidos.</span>
          </h2>
          <p className="cmpl-lede">
            Meefi opera bajo la supervisión de las mismas autoridades que
            exigen a un banco: la CNBV en México y la FinCEN en Estados
            Unidos. El estándar más alto de compliance, sin la fricción del
            banco tradicional.
          </p>
        </header>

        {/* Regulator plates */}
        <div className="cmpl-badges reveal">
          {CMPL_REGULATORS.map((r) => (
            <div className="cmpl-card" key={r.acr}>
              <div className="cmpl-logo-plate">
                <img className={"cmpl-logo-img cmpl-logo-" + r.acr.toLowerCase()} src={r.logo} alt={`${r.name} (${r.acr})`} loading="lazy"/>
              </div>
            </div>
          ))}
        </div>

        <p className="cmpl-note">
          Meefi es una plataforma tecnológica financiera, no una entidad
          bancaria. Los servicios financieros se ofrecen a través de
          instituciones reguladas y supervisadas por cada autoridad.
        </p>
      </div>
      <style>{CMPL_CSS}</style>
    </section>
  );
}

const CMPL_CSS = `
/* Banda azul oscuro — mismo lenguaje que Testimonios / Transparencia. */
.cmpl-section{ position:relative; overflow:hidden; color:#EAF0FB;
  background:
    radial-gradient(900px 600px at 18% 26%, rgba(5,48,206,.18), transparent 64%),
    radial-gradient(760px 520px at 86% 80%, rgba(90,116,236,.12), transparent 60%),
    var(--blue-950); }

.cmpl-header{ max-width:720px; margin:0 auto 52px; text-align:center; }
.cmpl-badge{ display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:#B7CCFB; background:rgba(90,116,236,.10); border:1px solid rgba(140,160,246,.28);
  padding:6px 14px 6px 12px; border-radius:9999px; margin-bottom:22px; }
.cmpl-badge-dot{ width:6px; height:6px; border-radius:9999px; background:#8CA0F6;
  box-shadow:0 0 0 4px rgba(140,160,246,.16), 0 0 12px rgba(140,160,246,.7);
  animation:pulse-dot var(--pulse-cycle) var(--ease-smooth) infinite; }
.cmpl-title{ margin:0 0 20px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,2.6vw + 1rem,3.1rem); line-height:1.06;
  letter-spacing:-.03em; color:#FFFFFF; text-wrap:balance; }
.cmpl-title-dim{ color:rgba(234,240,251,.6); }
.cmpl-lede{ margin:0 auto; max-width:600px; font-size:17px; line-height:1.6; color:rgba(234,240,251,.72); }

/* Placas de reguladores — cards de vidrio oscuro con placa blanca dentro */
.cmpl-badges{ display:flex; justify-content:center; align-items:stretch;
  gap:28px; flex-wrap:wrap; }
.cmpl-card{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:282px; padding:28px 24px;
  border:1px solid rgba(140,160,246,.22); border-radius:20px;
  background:linear-gradient(165deg, rgba(20,50,125,.5), rgba(4,10,34,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px -24px rgba(2,6,28,.8);
  transition:transform var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-smooth), border-color var(--duration-base) var(--ease-smooth); }
.cmpl-card:hover{ transform:translateY(-3px); border-color:rgba(140,160,246,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 52px -22px rgba(2,6,28,.85),
    0 0 40px -12px rgba(90,116,236,.4); }

/* Placa blanca: unifica logos muy distintos y los deja legibles sobre oscuro.
   Los PNG se muestran tal cual, con object-fit para escalar sin recortar. */
/* Sin marco blanco: el logo va directo sobre la card de vidrio. Los PNG
   (fondo transparente) se recolorean a tonos de azul con un filtro duotono
   para que resalten sobre el oscuro sin perder el detalle interno. */
.cmpl-logo-plate{ position:relative; overflow:hidden;
  width:100%; height:124px;
  display:flex; align-items:center; justify-content:center; }
.cmpl-logo-img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  filter:invert(1) grayscale(1) sepia(1) hue-rotate(188deg) saturate(4) brightness(1.95); }
/* Igualar tamaños visuales: el sello de FinCEN trae mucho aire transparente. */
.cmpl-logo-fincen{ transform:scale(1.68); }
.cmpl-logo-cnbv{ transform:scale(0.96); }

.cmpl-note{ margin:44px auto 0; max-width:660px; text-align:center;
  font-size:12.5px; line-height:1.7; color:rgba(234,240,251,.42); }

@media (max-width:680px){
  .cmpl-badges{ gap:18px; }
  .cmpl-card{ width:100%; max-width:360px; }
}
`;

window.ComplianceSection = ComplianceSection;