/* global React */
// ============================================================
// ComplianceSection (EN) — regulatory "double shield".
//
// Sits BETWEEN AppSection (Coming soon · light) and OfficesSection
// (Offices/Promoters). Same legitimacy thread as Offices.
//
// COLOR: DEEP BLUE band (same language as Testimonials / Transparency)
// — kicks off the new alternation from AppSection's white onward:
//   App(light) → Compliance(dark) → Offices(light) → FAQ(dark) → CTA(light)
//
// LOGOS: the official PNGs (assets/cnbv-logo.png, assets/fincen-logo.png)
// are shown UNALTERED on identical white plates. They are very different
// emblems (horizontal lockup vs. full-color circular seal), so they are
// unified at the plate level — not by recoloring, which would destroy
// FinCEN's seal detail.
// ============================================================

const CMPL_REGULATORS = [
  {
    acr: "CNBV",
    logo: "assets/cnbv-logo.png",
    name: "National Banking and Securities Commission",
    country: "Mexico",
  },
  {
    acr: "FinCEN",
    logo: "assets/fincen-logo.png",
    name: "Financial Crimes Enforcement Network",
    country: "United States",
  },
];

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"/>
            Regulatory compliance
          </span>
          <h2 className="cmpl-title">
            A double regulatory shield,{" "}
            <span className="cmpl-title-dim">in Mexico and the United States.</span>
          </h2>
          <p className="cmpl-lede">
            Meefi operates under the same authorities a bank answers to: the
            CNBV in Mexico and FinCEN in the United States. The highest
            compliance standard, without the friction of a traditional bank.
          </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 is a financial technology platform, not a banking institution.
          Financial services are provided through institutions regulated and
          supervised by each authority.
        </p>
      </div>
      <style>{CMPL_CSS}</style>
    </section>
  );
}

const CMPL_CSS = `
/* Deep-blue band — same language as Testimonials / Transparency. */
.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); }

/* Regulator plates — dark glass cards holding a white logo plate */
.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); }

/* White plate: unifies very different logos and keeps them legible on dark.
   PNGs shown as-is, with object-fit to scale without cropping. */
/* No white frame: the logo sits straight on the glass card. The PNGs
   (transparent background) are recolored to blue tones with a duotone
   filter so they stand out on the dark card without losing inner detail. */
.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); }
/* Match visual sizes: the FinCEN seal carries a lot of transparent air. */
.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;