/* global React */
// ============================================================
// FootnotesSection (EN) — legal / clarifying footnotes.
//
// Sits AFTER the <Footer/>, at the very bottom of the page. Mirrors
// Mercury's (mercury.com) disclaimer pattern: a divider and a small
// numbered list where each number maps to a <Fn n={x}/> superscript
// used across the landing.
//
// Numbering matches the on-page superscripts (1..8).
//
// ⚠️ DRAFT LEGAL TEXT — pending review by Meefi's legal/compliance team.
// ============================================================

const FOOTNOTES = [
  { n: 1, text: "Same-day payments and transfers: crediting times depend on the payment rail used. Depending on the country and currency, Meefi operates SPEI® in Mexico; FedNow (RTP), Same Day ACH, Next Day ACH and wire in the United States; and SEPA, GBP Faster Payments, PIX, COP bank transfer and ARS internationally. Each rail runs under its own hours and business days; SPEI operates 24 hours a day, 365 days a year. Same-day crediting is subject to each rail's or institution's cut-off times, business days, anti-money-laundering checks (AML/KYC) and correct entry of the beneficiary's details. Available rails may change without notice." },
  { n: 2, text: "Transparent fees: all applicable fees are disclosed before confirming each operation, in line with the Law for the Transparency and Ordering of Financial Services and CONDUSEF regulations. Foreign-currency operations may carry an exchange-rate spread." },
  { n: 3, text: "Coverage in 150+ countries and same-day in 70+ countries: the availability of countries, currencies and payment methods is offered through our network of regulated partners and may vary by jurisdiction, currency and applicable regulatory requirements at any given time. The figures are indicative and may change without notice." },
  { n: 4, text: "Exchange rate: the exchange rates shown are indicative and for information only; they do not constitute a firm offer. The final exchange rate is set at the time the operation is executed and may differ from the one shown. It is not the official rate (FIX) published by Banco de México." },
  { n: 5, text: "$100,000 MXN example: an illustrative figure used only to show how the product works. Actual amounts, fees and exchange rates depend on each operation, the client's profile and the conditions in effect at the time of the transaction." },
  { n: 6, text: "Onboarding in under 24 hours: average account-activation time based on internal Meefi data. Account opening is subject to identity verification and the anti-money-laundering processes (AML/KYC) required by applicable regulation, so actual time may vary case by case." },
  { n: 7, text: "Supervised by the CNBV and FinCEN: Meefi is a financial technology platform; it is not a banking institution and does not take deposits from the public on its own account. In Mexico, financial services are provided through Opciones Empresariales del Noreste, S.A. de C.V., S.F.P., a Sociedad Financiera Popular authorized, regulated and supervised by the National Banking and Securities Commission (CNBV) under the Ley de Ahorro y Crédito Popular. In the United States, services are offered through regulated institutions registered with the Financial Crimes Enforcement Network (FinCEN)." },
  { n: 8, text: "Global volume: total cumulative amount transacted through Meefi historically, based on internal Meefi data as of July 2026. The figure is updated periodically and may vary." },
];

function FootnotesSection() {
  return (
    <section className="fnotes" aria-label="Legal notes and disclaimers">
      <div className="wrap">
        <span className="fnotes-label">Notes and disclaimers</span>
        <ol className="fnotes-list">
          {FOOTNOTES.map((f) => (
            <li className="fnotes-item" key={f.n}>
              <sup className="fnotes-num">{f.n}</sup>
              <span className="fnotes-text">{f.text}</span>
            </li>
          ))}
        </ol>
      </div>
      <style>{FNOTES_CSS}</style>
    </section>
  );
}

const FNOTES_CSS = `
/* Light band at the very bottom, split from the footer by a subtle divider. */
.fnotes{ background:var(--bg-1); border-top:1px solid var(--line-soft);
  padding:40px 0 72px; }
.fnotes-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:20px; }
.fnotes-list{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:11px; max-width:900px; }
.fnotes-item{ position:relative; padding-left:22px;
  font-size:11.5px; line-height:1.65; color:var(--fg-3); }
.fnotes-num{ position:absolute; left:0; top:1px;
  font-size:10px; font-weight:700; color:var(--accent); line-height:1; }
.fnotes-text{ }

@media (max-width:680px){
  .fnotes{ padding:32px 0 56px; }
  .fnotes-item{ font-size:11px; }
}
`;

window.FootnotesSection = FootnotesSection;