/* global React */
// ============================================================
// CASOS DE USO — coverflow carousel
//
// Sits right after Audiences ("para empresas que cruzan
// fronteras"): Audiences shows the abstract cross-border flow,
// this section zooms into the 4 concrete operating models.
//
// A 3D coverflow: the CENTER card is in focus (sharp, 100%
// scale, elevated, prominent shadow); the lateral cards are
// smaller, blurred, lower opacity and pushed back in depth so
// you can intuit what comes next. Auto-rotates every 4s with a
// brisk ease-out; loops infinitely; manual nav via the dots.
// ============================================================

const { useState: cuUseState, useEffect: cuUseEffect, useRef: cuUseRef } = React;

// ---- Flag helper (same source as Audiences) ----
const CuFlag = ({ code }) => (
  <img
    className="cu-flag"
    src={`https://flagcdn.com/w40/${code}.png`}
    srcSet={`https://flagcdn.com/w80/${code}.png 2x`}
    width={18} height={13} alt="" loading="lazy" draggable="false"
  />
);

// ---- Mini-visuals, one per case ----

// CARD 1 · Startups — FX comparison: a high rate (struck out, grey) vs.
// Meefi's better rate (highlighted), with a green "same-day" settlement chip.
function CuVisualStartups() {
  return (
    <div className="cu-vis cu-panel">
      <div className="cu-panel-head">
        <span className="cu-panel-title">Tipo de cambio USD/MXN</span>
        <span className="cu-pill cu-pill-sent"><span className="cu-pill-dot" />Mismo día</span>
      </div>
      <div className="cu-fx">
        <div className="cu-fx-row cu-fx-row-old">
          <span className="cu-fx-label">Banco tradicional</span>
          <span className="cu-fx-rate cu-fx-rate-old">$17.10</span>
        </div>
        <div className="cu-fx-row cu-fx-row-new">
          <span className="cu-fx-label">
            <span className="cu-fx-spark" aria-hidden="true" />Tipo de cambio Meefi
          </span>
          <span className="cu-fx-rate cu-fx-rate-new">$17.30</span>
        </div>
      </div>
      <div className="cu-fx-foot">
        <span className="cu-fx-save">Ahorras <strong>$1.65</strong> por dólar</span>
        <span className="cu-fx-bps">− 8.7%</span>
      </div>
    </div>
  );
}

// CARD 2 · Importadoras — outgoing payments, status "Enviado"
function CuVisualImport() {
  const rows = [
    { code: "cn", name: "Proveedor · Shenzhen", amt: "$48,200 USD" },
    { code: "us", name: "Supplier · Miami",     amt: "$12,500 USD" },
    { code: "eu", name: "Fábrica · Milán",      amt: "€9,800 EUR" },
  ];
  return (
    <div className="cu-vis cu-panel">
      <div className="cu-panel-head">
        <span className="cu-panel-title">Pagos salientes</span>
        <span className="cu-panel-sub">Hoy</span>
      </div>
      <ul className="cu-rows">
        {rows.map((r) => (
          <li key={r.name} className="cu-row">
            <span className="cu-row-l"><CuFlag code={r.code} /><span className="cu-row-name">{r.name}</span></span>
            <span className="cu-row-r">
              <span className="cu-amt">{r.amt}</span>
              <span className="cu-pill cu-pill-sent"><span className="cu-pill-dot" />Enviado</span>
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// CARD 3 · Exportadoras — incoming foreign currency → one MXN account
function CuVisualExport() {
  const rows = [
    { code: "us", name: "Cliente USA",    amt: "+$32,000 USD" },
    { code: "eu", name: "Cliente Europa", amt: "+€18,400 EUR" },
    { code: "cn", name: "Cliente Asia",   amt: "+¥120,000 CNY" },
  ];
  return (
    <div className="cu-vis cu-panel">
      <div className="cu-panel-head">
        <span className="cu-panel-title">Pagos entrantes</span>
        <span className="cu-panel-sub">Liquidado</span>
      </div>
      <ul className="cu-rows">
        {rows.map((r) => (
          <li key={r.name} className="cu-row">
            <span className="cu-row-l"><CuFlag code={r.code} /><span className="cu-row-name">{r.name}</span></span>
            <span className="cu-amt cu-amt-in">{r.amt}</span>
          </li>
        ))}
      </ul>
      <div className="cu-panel-foot">
        <span className="cu-foot-l"><CuFlag code="mx" />Tu cuenta MXN</span>
        <span className="cu-foot-r">$1,184,600 MXN</span>
      </div>
    </div>
  );
}

// CARD 4 · Empresas de servicios — CFDI ligado al SAT + conciliación
function CuVisualServicios() {
  return (
    <div className="cu-vis cu-panel cu-panel-doc">
      <div className="cu-doc-head">
        <span className="cu-doc-kind">Factura CFDI</span>
        <span className="cu-pill cu-pill-sat"><span className="cu-pill-dot" />SAT · Validado</span>
      </div>
      <div className="cu-doc-meta">
        <span className="cu-doc-row"><span>Folio</span><span className="cu-mono">A-2048</span></span>
        <span className="cu-doc-row"><span>UUID</span><span className="cu-mono">3F9C…E1A7</span></span>
        <span className="cu-doc-row"><span>Total</span><span className="cu-mono">$58,000 MXN</span></span>
      </div>
      <div className="cu-doc-recon">
        <span className="cu-recon-check" aria-hidden="true">
          <svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
        Conciliado automáticamente con el pago
      </div>
    </div>
  );
}

// ---- Cards ----
const CASOS_CARDS = [
  {
    tag: "Startups",
    title: <>Baja dinero al mejor tipo de cambio<Fn n={4}/>, sin importar dónde esté tu matriz.</>,
    Visual: CuVisualStartups,
    anchor: "Mejor FX · mismo día",
  },
  {
    tag: "Importadoras",
    title: <>Paga a tus proveedores del mundo, el mismo día<Fn n={1}/>.</>,
    Visual: CuVisualImport,
    anchor: "+70 países · mismo día",
  },
  {
    tag: "Exportadoras",
    title: "Cobra de tus clientes extranjeros, sin intermediarios.",
    Visual: CuVisualExport,
    anchor: "Directo a tu cuenta MX",
  },
  {
    tag: "Empresas de servicios",
    title: "Factura, cobra y concilia desde un solo lugar.",
    Visual: CuVisualServicios,
    anchor: "Integrado al SAT",
  },
];

const CU_N = CASOS_CARDS.length;

function CasosUsoSection() {
  const [active, setActive] = cuUseState(0);
  const [started, setStarted] = cuUseState(false);
  const sectionRef = cuUseRef(null);

  // Kick off the carousel the first time the section scrolls into view, then
  // disconnect. Once started it runs forever — no pausing on hover, scroll-out
  // or tab change.
  cuUseEffect(() => {
    const el = sectionRef.current;
    if (!el || typeof IntersectionObserver !== "function") { setStarted(true); return; }
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) { setStarted(true); io.disconnect(); }
      },
      { threshold: 0.25 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Auto-advance: 4s dwell per card, looping infinitely once started.
  cuUseEffect(() => {
    if (!started) return;
    const id = setTimeout(() => setActive((a) => (a + 1) % CU_N), 4000);
    return () => clearTimeout(id);
  }, [active, started]);

  // Relative offset of card i from the active one, wrapped into (-CU_N/2, CU_N/2].
  const relOffset = (i) => {
    let rel = (i - active + CU_N) % CU_N;
    if (rel > CU_N / 2) rel -= CU_N;
    return rel;
  };

  // Coverflow transform per relative offset (% shifts are relative to card width).
  const cardStyle = (rel) => {
    const sign = Math.sign(rel);
    const abs = Math.abs(rel);
    if (rel === 0) {
      return { transform: "translateX(-50%) translateY(-10px) scale(1)", opacity: 1, filter: "none", zIndex: 30 };
    }
    if (abs === 1) {
      return {
        transform: `translateX(calc(-50% + ${sign * 76}%)) scale(0.88) rotateY(${-sign * 16}deg)`,
        opacity: 0.5, filter: "blur(1.6px)", zIndex: 20,
      };
    }
    // far / behind (rel === ±2)
    return {
      transform: `translateX(calc(-50% + ${sign * 118}%)) scale(0.78) rotateY(${-sign * 22}deg)`,
      opacity: 0, filter: "blur(3px)", zIndex: 10, pointerEvents: "none",
    };
  };

  return (
    <section
      className="cu-section"
      id="casos-uso"
      data-screen-label="Casos de uso"
      ref={sectionRef}
    >
      <div className="cu-ambient" aria-hidden="true" />

      <div className="cu-wrap">
        <header className="cu-header">
          <span className="cu-badge reveal">
            <span className="cu-badge-dot" aria-hidden="true" />
            Casos de uso
          </span>
          <h2 className="cu-headline reveal" style={{ "--reveal-delay": "80ms" }}>
            Hecho para <span className="cu-grad">cómo opera tu empresa.</span>
          </h2>
          <p className="cu-lede reveal" style={{ "--reveal-delay": "160ms" }}>
            Cada negocio mueve su dinero distinto. Meefi se adapta al tuyo.
          </p>
        </header>

        <div className="cu-stage reveal" style={{ "--reveal-delay": "220ms" }}>
          <div className="cu-track">
            {CASOS_CARDS.map((c, i) => {
              const rel = relOffset(i);
              const isActive = rel === 0;
              const Visual = c.Visual;
              return (
                <article
                  key={c.tag}
                  className={`cu-card${isActive ? " is-active" : ""}`}
                  style={cardStyle(rel)}
                  aria-hidden={!isActive}
                  onClick={() => !isActive && setActive(i)}
                >
                  <div className="cu-card-inner">
                    <span className="cu-tag">{c.tag}</span>
                    <h3 className="cu-card-title">
                      {c.title}
                    </h3>
                    <Visual />
                    <div className="cu-anchor">
                      <span className="cu-anchor-dot" aria-hidden="true" />
                      <span className="cu-anchor-text">{c.anchor}</span>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>

        <div className="cu-dots" role="tablist" aria-label="Casos de uso">
          {CASOS_CARDS.map((c, i) => (
            <button
              key={c.tag}
              className={`cu-dot${i === active ? " is-active" : ""}`}
              role="tab"
              aria-selected={i === active}
              aria-label={c.tag}
              onClick={() => setActive(i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.CasosUsoSection = CasosUsoSection;