/* global React */
// ============================================================
// FOOTER — light "command bar" footer, Xepelin-inspired composition.
//   · White band consistent with the rest of the landing.
//   · Brand lockup + location · multi-column nav · social row +
//     "Con el respaldo de" partner · legal disclaimer + BIG regulator
//     logos on tidy light chips.
// ============================================================
function Footer() {
  // ---- Nav columns (real Meefi surfaces — no filler) ----
  const COLS = [
  { title: "Producto", items: [
    { t: "Cuenta Empresarial" },
    { t: "Pagos Internacionales", badge: "Nuevo" },
    { t: "Pagos Locales" },
    { t: "Facturación" },
    { t: "Tesorería" }]
  },
  { title: "Soluciones", items: [
    { t: "Startups" },
    { t: "Importadoras" },
    { t: "Exportadoras" },
    { t: "Empresas de Servicio" }]
  },
  { title: "Legal", items: [
    { t: "Aviso de privacidad", href: "aviso-de-privacidad.html" },
    { t: "Términos y condiciones", href: "terminos-y-condiciones.html" },
    { t: "Protección de datos", href: "proteccion-de-datos.html" },
    { t: "Seguridad" },
    { t: "Notas legales" }]
  }];


  const colLink = {
    fontSize: 14, color: "var(--fg-2)", textDecoration: "none",
    transition: "color 180ms", lineHeight: 1.3,
    display: "inline-flex", alignItems: "center", gap: 8, width: "fit-content",
    whiteSpace: "nowrap"
  };
  const enter = (e) => e.currentTarget.style.color = "var(--fg-1)";
  const leave = (e) => e.currentTarget.style.color = "var(--fg-2)";

  // ---- Social glyphs (inline, monochrome) ----
  const SOCIAL = [
  { label: "LinkedIn", path: "M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0ZM.25 8.25h4.5V24h-4.5V8.25Zm7.5 0h4.31v2.15h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V24h-4.5v-7.2c0-1.72-.03-3.93-2.4-3.93-2.4 0-2.77 1.87-2.77 3.8V24h-4.5V8.25Z" },
  { label: "X", path: "M18.9 2h3.3l-7.2 8.23L23.5 22h-6.6l-5.17-6.77L5.8 22H2.5l7.7-8.8L1.5 2h6.77l4.67 6.18L18.9 2Zm-1.16 18h1.83L7.34 3.9H5.38L17.74 20Z" },
  { label: "Instagram", path: "M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 1.62c-3.15 0-3.5.01-4.74.07-1.14.05-1.76.24-2.17.4-.55.21-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.41-.35 1.03-.4 2.17-.06 1.24-.07 1.6-.07 4.74s.01 3.5.07 4.74c.05 1.14.24 1.76.4 2.17.21.55.47.94.88 1.35.41.41.8.67 1.35.88.41.16 1.03.35 2.17.4 1.24.06 1.6.07 4.74.07s3.5-.01 4.74-.07c1.14-.05 1.76-.24 2.17-.4.55-.21.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.41.35-1.03.4-2.17.06-1.24.07-1.6.07-4.74s-.01-3.5-.07-4.74c-.05-1.14-.24-1.76-.4-2.17a3.6 3.6 0 0 0-.88-1.35 3.6 3.6 0 0 0-1.35-.88c-.41-.16-1.03-.35-2.17-.4-1.24-.06-1.6-.07-4.74-.07Zm0 2.76a5.46 5.46 0 1 1 0 10.92 5.46 5.46 0 0 1 0-10.92Zm0 9a3.54 3.54 0 1 0 0-7.08 3.54 3.54 0 0 0 0 7.08Zm6.95-9.22a1.28 1.28 0 1 1-2.55 0 1.28 1.28 0 0 1 2.55 0Z" }];


  // ---- Regulator / partner logos shown directly (no frame) ----

  return (
    <footer style={{
      width: "100%",
      background: "var(--bg-1)",
      color: "var(--fg-1)",
      borderTop: "1px solid var(--line-soft)",
      paddingTop: 88
    }}>
      <div className="wrap">

        {/* ---- Top band: brand + nav columns ---- */}
        <div className="footer-cols" style={{
          display: "grid",
          gridTemplateColumns: "auto repeat(3, minmax(224px, 1fr))",
          columnGap: 48, rowGap: 48,
          alignItems: "start",
          paddingBottom: 64
        }}>
          <div className="footer-brand" style={{ maxWidth: 280, flex: "0 0 auto" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontSize: 14, color: "var(--fg-2)" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                  <path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z" stroke="var(--fg-3)" strokeWidth="1.8" strokeLinejoin="round" />
                  <circle cx="12" cy="10" r="2.4" stroke="var(--fg-3)" strokeWidth="1.8" />
                </svg>
                México
              </span>
            </div>
          </div>

          <div className="footer-nav-group" style={{ display: "contents" }}>
          {COLS.map((col) =>
            <nav key={col.title} aria-label={col.title}>
              <h4 style={{
                margin: "0 0 18px", fontSize: 13, fontWeight: 600,
                letterSpacing: "0.02em", color: "var(--fg-1)"
              }}>{col.title}</h4>
              <ul style={{
                margin: 0, padding: 0, listStyle: "none",
                display: "flex", flexDirection: "column", gap: 13
              }}>
                {col.items.map((it) =>
                <li key={it.t}>
                    <a href={it.href || "#"} style={colLink} onMouseEnter={enter} onMouseLeave={leave}>
                      {it.t}
                      {it.badge &&
                    <span style={{
                      fontSize: 10, fontWeight: 600, letterSpacing: "0.02em",
                      color: "#FFFFFF", background: "var(--blue-500, #0530CE)",
                      borderRadius: 999, padding: "2px 8px", lineHeight: 1.4
                    }}>{it.badge}</span>
                    }
                    </a>
                  </li>
                )}
              </ul>
            </nav>
            )}
          </div>
        </div>

        {/* ---- Mid bar: copyright + social · partner ---- */}
        <div className="footer-mid" style={{
          borderTop: "1px solid var(--line-soft)",
          paddingTop: 28, paddingBottom: 28,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: "20px 32px"
        }}>
          <div className="footer-mid-left" style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <span style={{ fontSize: 13, color: "var(--fg-3)" }}>© 2026 Patrimonium Global Transfers S.A.P.I. de C.V. · Todos los derechos reservados.

            </span>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              {SOCIAL.map((s) =>
              <a
                key={s.label}
                href="#"
                aria-label={s.label}
                style={{
                  width: 34, height: 34, borderRadius: 9,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  background: "var(--surface-2, #F3F4F6)",
                  border: "1px solid var(--line, #E5E7EB)",
                  transition: "background 180ms, border-color 180ms"
                }}
                onMouseEnter={(e) => {e.currentTarget.style.background = "var(--blue-500, #0530CE)";e.currentTarget.style.borderColor = "var(--blue-500, #0530CE)";e.currentTarget.querySelector('svg').style.fill = "#FFFFFF";}}
                onMouseLeave={(e) => {e.currentTarget.style.background = "var(--surface-2, #F3F4F6)";e.currentTarget.style.borderColor = "var(--line, #E5E7EB)";e.currentTarget.querySelector('svg').style.fill = "var(--fg-2)";}}>

                  <svg width="15" height="15" viewBox="0 0 24 24" style={{ fill: "var(--fg-2)", transition: "fill 180ms" }} aria-hidden="true">
                    <path d={s.path} />
                  </svg>
                </a>
              )}
            </div>
          </div>

          <div className="footer-partner" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ fontSize: 12, color: "var(--fg-3)", whiteSpace: "nowrap" }}>Con el respaldo de</span>
            <img src="assets/platanus-logo.png" alt="Platanus Ventures" style={{ width: 156, height: "auto", display: "block" }} />
          </div>
        </div>

        {/* ---- Bottom band: legal disclaimer + BIG regulator logos ---- */}
        <div className="footer-legal" style={{
          borderTop: "1px solid var(--line-soft)",
          paddingTop: 36, paddingBottom: 56,
          display: "grid", gridTemplateColumns: "1fr auto",
          gap: 48, alignItems: "center"
        }}>
          <p style={{
            margin: 0, fontSize: 12.5, lineHeight: 1.7,
            color: "var(--fg-3)", maxWidth: 640
          }}>
            Meefi es una plataforma tecnológica financiera, no una entidad bancaria.
            Los servicios financieros son provistos a través de instituciones reguladas
            y supervisadas por la Comisión Nacional Bancaria y de Valores (CNBV) en México.
            Prohibida la reproducción total o parcial del contenido de este sitio.
          </p>

          <div className="footer-badges" style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", justifyContent: "flex-end" }}>
            <span style={{ fontSize: 12, color: "var(--fg-3)", whiteSpace: "nowrap" }}>Supervisado por<Fn n={8}/></span>
            <img src="assets/cnbv-logo.png" alt="CNBV" style={{ width: 90, height: "auto", display: "block" }} />
          </div>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;