/* 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.
// ============================================================
// baseHref: prefix for the "Security" section anchor so the footer works
//           unchanged on the landing page (baseHref="") and on standalone
//           pages like the legal docs (baseHref="Landing%20Page%20EN.html").
const { useState, useEffect } = React;

// Status copy is rendered natively (not the Better Stack iframe widget) so
// alignment/wrapping never depends on how a third-party page renders across
// different OSes/browsers/font substitutions. Icon/text styling mirrors the
// original Better Stack badge (soft color-halo circle + medium 14px label).
const STATUS_COPY_EN = {
  operational: { label: "All services operational", color: "#16A34A", icon: "check" },
  degraded: { label: "Degraded performance", color: "#D97706", icon: "exclaim" },
  downtime: { label: "Service disruption", color: "#DC2626", icon: "exclaim" },
  maintenance: { label: "Scheduled maintenance", color: "#2563EB", icon: "pause" }
};

function StatusIcon({ icon }) {
  return (
    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" style={{ flex: "0 0 auto" }}>
      <circle cx="9" cy="9" r="9" fill="currentColor" fillOpacity="0.2" />
      {icon === "check" &&
      <path fillRule="evenodd" clipRule="evenodd" fill="currentColor" d="M9 15C10.5913 15 12.1174 14.3679 13.2426 13.2426C14.3679 12.1174 15 10.5913 15 9C15 7.4087 14.3679 5.88258 13.2426 4.75736C12.1174 3.63214 10.5913 3 9 3C7.4087 3 5.88258 3.63214 4.75736 4.75736C3.63214 5.88258 3 7.4087 3 9C3 10.5913 3.63214 12.1174 4.75736 13.2426C5.88258 14.3679 7.4087 15 9 15ZM11.8245 7.50675C11.8779 7.45573 11.9208 7.39469 11.9506 7.32711C11.9805 7.25952 11.9967 7.18673 11.9984 7.11287C12.0001 7.03901 11.9873 6.96554 11.9606 6.89665C11.9339 6.82776 11.8939 6.76481 11.8429 6.71137C11.7919 6.65794 11.7308 6.61508 11.6632 6.58524C11.5956 6.5554 11.5229 6.53917 11.449 6.53746C11.3751 6.53575 11.3017 6.54861 11.2328 6.5753C11.1639 6.60199 11.1009 6.64198 11.0475 6.693C9.91968 7.77061 8.9301 8.98415 8.1015 10.3058L6.96 9.165C6.9085 9.10974 6.8464 9.06541 6.7774 9.03466C6.7084 9.00392 6.63392 8.98739 6.55839 8.98606C6.48286 8.98472 6.40784 8.99862 6.3378 9.02691C6.26776 9.0552 6.20414 9.09731 6.15072 9.15072C6.09731 9.20414 6.0552 9.26776 6.02691 9.3378C5.99862 9.40784 5.98472 9.48286 5.98606 9.55839C5.98739 9.63392 6.00392 9.7084 6.03466 9.7774C6.06541 9.8464 6.10973 9.9085 6.165 9.96L7.815 11.6108C7.8761 11.6719 7.95045 11.7181 8.0323 11.7458C8.11415 11.7736 8.2013 11.7821 8.28696 11.7707C8.37263 11.7593 8.45452 11.7283 8.52629 11.6802C8.59805 11.632 8.65775 11.568 8.70075 11.493C9.54556 10.0214 10.5976 8.67891 11.8245 7.50675Z" />
      }
      {icon === "exclaim" &&
      <>
        <rect x="8.1" y="4.5" width="1.8" height="6" rx="0.9" fill="currentColor" />
        <circle cx="9" cy="12.75" r="1.05" fill="currentColor" />
      </>
      }
      {icon === "pause" &&
      <>
        <rect x="6" y="5" width="2" height="8" rx="1" fill="currentColor" />
        <rect x="10" y="5" width="2" height="8" rx="1" fill="currentColor" />
      </>
      }
    </svg>
  );
}

function StatusBadgeEn() {
  const [state, setState] = useState(null);

  useEffect(() => {
    let cancelled = false;
    fetch("https://status.meefi.io/index.json")
      .then((r) => r.json())
      .then((data) => {
        if (!cancelled) setState(data && data.data && data.data.attributes && data.data.attributes.aggregate_state);
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  const copy = STATUS_COPY_EN[state];
  if (!copy) return null;

  return (
    <a
      href="https://status.meefi.io"
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        textDecoration: "none", whiteSpace: "nowrap"
      }}>
      <span style={{ color: copy.color, display: "inline-flex" }}>
        <StatusIcon icon={copy.icon} />
      </span>
      <span style={{ fontSize: 12, color: "var(--fg-2)" }}>{copy.label}</span>
    </a>
  );
}

function Footer({ baseHref = "" }) {
  // ---- Nav columns (real Meefi surfaces — no filler) ----
  // scrollTo: id of the landing section this item points to. feature/caso:
  // which card the section's rotating showcase should open on (Features /
  // Casos de uso). Legal items use a plain href.
  const COLS = [
  { title: "Product", items: [
    { t: "Business Account", scrollTo: "products", feature: 3 },
    { t: "International Payments", scrollTo: "spei-global", badge: "New" },
    { t: "Local Payments", scrollTo: "products", feature: 1 },
    { t: "Invoicing", scrollTo: "app" },
    { t: "Treasury", scrollTo: "products", feature: 4 }]
  },
  { title: "Solutions", items: [
    { t: "Startups", scrollTo: "casos-uso", caso: 0 },
    { t: "Importers", scrollTo: "casos-uso", caso: 1 },
    { t: "Exporters", scrollTo: "casos-uso", caso: 2 },
    { t: "Service Companies", scrollTo: "casos-uso", caso: 3 }]
  },
  { title: "Legal", items: [
    { t: "Privacy notice", href: "/en/legal/privacy-notice" },
    { t: "Terms and conditions", href: "/en/legal/terms-and-conditions" },
    { t: "Data protection", href: "/en/legal/data-protection" },
    { t: "Security", scrollTo: "security" }]
  }];

  // Section links scroll in place on the landing (and cue the right
  // showcase card). On the legal pages those sections aren't mounted, so
  // getElementById returns null and the href (`${baseHref}#id` → /en#id)
  // navigates back to the landing instead.
  const onNav = (e, it) => {
    if (!it.scrollTo) return;
    const el = document.getElementById(it.scrollTo);
    if (!el) return;
    e.preventDefault();
    el.scrollIntoView({ behavior: "smooth", block: "start" });
    if (typeof it.feature === "number") window.dispatchEvent(new CustomEvent("meefi:feature", { detail: it.feature }));
    if (typeof it.caso === "number") window.dispatchEvent(new CustomEvent("meefi:caso", { detail: it.caso }));
  };


  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 (monochrome, 24×24, single solid path) ----
  // Order preserved from the original row; the middle slot is now
  // Facebook (was X). Styling lives in styles.css (.footer-social).
  const SOCIAL = [
  { label: "LinkedIn", url: "https://www.linkedin.com/company/meefi", 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: "Facebook", url: "https://www.facebook.com/share/18RvNLtBEL/?mibextid=wwXIfr", path: "M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.87v2.25h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07Z" },
  { label: "Instagram", url: "https://www.instagram.com/meefi.io?igsh=ajZkbWc3Y2Fwb3R5&utm_source=qr", 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>
                Mexico
              </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 || (it.scrollTo ? `${baseHref}#${it.scrollTo}` : "#")} onClick={(e) => onNav(e, it)} 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 Ventrauren S.A.P.I. de C.V. · All rights reserved.

            </span>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              {SOCIAL.map((s) =>
              <a
                key={s.label}
                className="footer-social"
                href={s.url}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={s.label}
                data-hover="1">
                  <svg width="16" height="16" viewBox="0 0 24 24" 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" }}>Backed by</span>
            <a href="https://platan.us/" target="_blank" rel="noopener noreferrer" aria-label="Platanus Ventures" data-hover="1" style={{ display: "block", lineHeight: 0 }}>
              <img src="assets/platanus-logo.png" alt="Platanus Ventures" style={{ width: 156, height: "auto", display: "block" }} />
            </a>
          </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 is a financial technology platform, not a banking institution.
            Financial services are provided through institutions regulated and
            supervised by the National Banking and Securities Commission (CNBV) in Mexico
            and registered with the Financial Crimes Enforcement Network (FinCEN) in the United States.
            Total or partial reproduction of this site's content is prohibited.
          </p>

          <div className="footer-badges" style={{ display: "flex", alignItems: "center", justifyContent: "flex-end" }}>
            <StatusBadgeEn />
          </div>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;
window.FooterEn = Footer;