/* global React */
// ============================================================
// Disconnect — asymmetric hub-and-orbit layout.
// LEFT  : large Meefi hub framed by 3 concentric orbital rings
//         (each with planet-style markers, rotating at its own
//         offset & speed).
// RIGHT : 3 numbered items. A SINGLE large arc bows out from
//         off-screen top to off-screen bottom, threading through
//         all three items.
// ============================================================

const ITEMS = [
  {
    num: "01",
    title: "Tesorería global",
    desc: "Cobra, paga, compra divisas y envía pagos internacionales desde una sola plataforma diseñada para empresas que operan local y globalmente.",
    Icon: (p) => (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
        <circle cx="12" cy="12" r="10"/>
        <path d="M2 12h20"/>
        <path d="M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"/>
      </svg>
    ),
  },
  {
    num: "02",
    title: "Facturación y conciliación automática",
    desc: "Conecta pagos, cobros y facturas para reducir trabajo manual, errores y seguimiento operativo.",
    Icon: (p) => (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
        <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/>
        <path d="M14 2v4a2 2 0 0 0 2 2h4"/>
        <path d="m9 14 2 2 4-4"/>
      </svg>
    ),
  },
  {
    num: "03",
    title: "Cumplimiento sin fricciones",
    desc: "Cada cliente, proveedor, factura y movimiento queda documentado desde el origen, reduciendo riesgos de auditoría e interrupciones innecesarias.",
    Icon: (p) => (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      </svg>
    ),
  },
];

// ============================================================
// Background — the big sweeping arc that passes BEHIND the 3
// item icons and exits off-screen at top and bottom.
//
// In viewBox 1080×700, the icon centres land at:
//   Item 1: (706, 119)   (left: 60% → start + 22 + 14 + 22 = 58 → 706)
//   Item 2: (749, 350)   (left: 64% → 749)
//   Item 3: (706, 581)
// The unique circle through those 3 points is centred at
// (~107, 350) with r ≈ 642 — large enough to clearly leave the
// stage top & bottom when overflow is visible.
// ============================================================
function FlowArc() {
  return (
    <svg
      className="disc-arc"
      viewBox="0 0 1080 700"
      preserveAspectRatio="xMidYMid meet"
      aria-hidden="true"
    >
      <path
        d="M 107 -292 A 642 642 0 0 1 107 992"
        fill="none"
        stroke="rgba(234,240,251,0.32)"
        strokeWidth="1.25"
        strokeLinecap="round"
      />
    </svg>
  );
}

// ============================================================
// Hub orbits — 3 concentric rings drawn inside .disc-hub-frame
// (so they're guaranteed to share the hub's centre and scale).
// viewBox 0 0 100 100 ≡ hub frame. Centre = (50, 50).
// Hub fills the frame (r=50); rings sit just outside.
// Each ring rotates at its own speed/direction so the planet
// markers drift independently.
// ============================================================
function HubOrbits() {
  const ring = "rgba(234,240,251,0.42)";
  return (
    <svg
      className="disc-orbits"
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid meet"
      aria-hidden="true"
    >
      {/* Ring 1 — closest, CCW, solid */}
      <g className="disc-orbit disc-orbit-1">
        <circle cx="50" cy="50" r="58" fill="none"
                stroke={ring} strokeWidth="0.4"/>
        <circle cx="-8"  cy="50"  r="1.3" fill="rgba(140,160,246,1)"/>
        <rect   x="49"   y="107"  width="2"   height="2"
                fill="rgba(234,240,251,0.95)"/>
        {/* added markers */}
        <circle cx="91"  cy="91"  r="0.9" fill="rgba(234,240,251,0.85)"/>
        <rect   x="78.2" y="-0.7" width="1.4" height="1.4"
                fill="rgba(140,160,246,0.95)"/>
      </g>

      {/* Ring 2 — CW, dashed */}
      <g className="disc-orbit disc-orbit-2">
        <circle cx="50" cy="50" r="68" fill="none"
                stroke={ring} strokeWidth="0.4"
                strokeDasharray="0.6 2.4"/>
        <circle cx="50"  cy="-18" r="1.1" fill="rgba(234,240,251,0.9)"/>
        <circle cx="118" cy="50"  r="1.4" fill="rgba(140,160,246,0.95)"/>
        {/* added markers */}
        <rect   x="1.2"  y="97.2" width="1.6" height="1.6"
                fill="rgba(234,240,251,0.9)"/>
        <circle cx="-14" cy="27"  r="0.8" fill="rgba(234,240,251,0.8)"/>
      </g>

      {/* Ring 3 — outermost, CCW, faint */}
      <g className="disc-orbit disc-orbit-3">
        <circle cx="50" cy="50" r="80" fill="none"
                stroke="rgba(234,240,251,0.28)" strokeWidth="0.4"/>
        <circle cx="-30" cy="50"  r="0.9" fill="rgba(234,240,251,0.85)"/>
        <circle cx="130" cy="50"  r="0.7" fill="rgba(234,240,251,0.85)"/>
        <rect   x="49"   y="-31"  width="1.6" height="1.6"
                fill="rgba(140,160,246,1)"/>
        {/* added markers */}
        <circle cx="10"  cy="119" r="1.1" fill="rgba(140,160,246,0.9)"/>
        <rect   x="118.5" y="9.5" width="1.4" height="1.4"
                fill="rgba(234,240,251,0.9)"/>
      </g>
    </svg>
  );
}

function DisconnectSection() {
  return (
    <section className="disc-section">
      <div className="wrap">
        <div className="disc-head">
          <h2 className="disc-headline reveal">
            <span>Una sola plataforma.</span>
            <span className="disc-headline-twist">Todo resuelto.</span>
          </h2>
        </div>

        <div className="disc-stage reveal" style={{ "--reveal-delay": "120ms" }}>
          {/* Arc inside the stage so it shares the items' coordinate system.
              overflow:visible + section overflow:hidden → arc exits off-screen. */}
          <FlowArc/>

          {/* Hub — wrapped in a frame so its orbits stay perfectly centred on it */}
          <div className="disc-hub-frame">
            <HubOrbits/>
            <div className="disc-hub">
              <span className="disc-hub-glow" aria-hidden="true"/>
              <img
                className="disc-hub-logo"
                src="assets/meefi-logo.png"
                alt="Meefi"
                draggable="false"
              />
            </div>
          </div>

          {/* Items */}
          <ol className="disc-items">
            {ITEMS.map((it, i) => {
              const Icon = it.Icon;
              return (
                <li
                  key={i}
                  className={`disc-item disc-item-${i + 1}`}
                  style={{ "--reveal-delay": `${200 + i * 110}ms` }}
                >
                  <span className="disc-item-num">{it.num}</span>
                  <span className="disc-item-icon">
                    <Icon width="20" height="20"/>
                  </span>
                  <div className="disc-item-body">
                    <h3 className="disc-item-title">{it.title}</h3>
                    <p className="disc-item-desc">{it.desc}</p>
                  </div>
                </li>
              );
            })}
          </ol>
        </div>
      </div>
    </section>
  );
}

window.DisconnectSection = DisconnectSection;