/* global React, Icons, SectionHeading, Counter */
// ============================================================
// SECURITY SECTION
//
// Two ideas behind this version:
//
// 1) Background "circuit board" — instead of a few long traces
//    with simple animated dots, we render a DENSE grid of short
//    segments (~24 paths) at smaller scale, and each animated
//    pulse is a comet-trail BEAM (a thin rect with an internal
//    transparent→blue→transparent gradient that travels along
//    the path with rotate="auto"). Same elegant technique used
//    by the node connectors in the Audiences section.
//
// 2) Feature cards — moved away from the soft "frosted white
//    card with a centred icon" look (which read too similar to
//    the Testimonials section that follows). Now each card is
//    a STRUCTURAL panel: a vertical brand-blue accent bar on
//    the left, a small square icon plaque + title on a single
//    row at top, description below, and a status row at the
//    bottom with a pulsing dot. Reads as "security/control",
//    not "review/quote".
// ============================================================

const SECURITY = [
  {
    icon: "Lock",
    title: "Login protegido con IA",
    description: "Nuestro modelo detecta patrones sospechosos y bloquea accesos no autorizados en tiempo real.",
    chip: "IA · Anti-fraude",
  },
  {
    icon: "Shield",
    title: "Disponible y protegido 24/7",
    description: "Tu dinero no se presta ni se invierte. Disponible cuando lo necesites.",
    chip: "24/7",
  },
  {
    icon: "Settings",
    title: "Roles y permisos granulares",
    description: "Decide quién puede ver, mover o aprobar fondos. Cada acción queda trazada con auditoría.",
    chip: "Permisos · Auditoría",
  },
];

// ============================================================
// Circuit grid — dense set of short orthogonal traces with
// occasional 90° corner kinks, plus subtle nodes at junctions.
// All paths share one comet-beam gradient.
// ============================================================
// Each path now uses cubic (C) curves at every elbow instead of
// chamfered straight (L) segments. The cubic has horizontal
// tangents at both endpoints, so the surrounding L segments
// connect smoothly — the comet beam's rotate="auto" rotation
// is continuous across the corner instead of snapping.
const CIRCUIT_PATHS = [
  // top band
  "M 0 40 L 90 40 C 100 40 90 50 100 50 L 220 50",
  "M 260 50 L 360 50 C 370 50 360 60 370 60 L 470 60",
  "M 510 60 L 620 60 C 630 60 620 50 630 50 L 720 50",
  "M 760 50 L 860 50 C 870 50 860 40 870 40 L 960 40",
  // upper mid
  "M 40 100 L 140 100 C 150 100 140 110 150 110 L 260 110",
  "M 300 110 L 410 110 C 420 110 410 100 420 100 L 520 100",
  "M 560 100 L 660 100 C 670 100 660 110 670 110 L 780 110",
  "M 820 110 L 930 110",
  // middle band
  "M 0 170 L 80 170 C 90 170 80 160 90 160 L 200 160 C 210 160 200 170 210 170 L 320 170",
  "M 360 170 L 470 170 C 480 170 470 180 480 180 L 600 180",
  "M 640 180 L 760 180 C 770 180 760 170 770 170 L 880 170 C 890 170 880 180 890 180 L 960 180",
  // lower mid
  "M 60 230 L 170 230 C 180 230 170 240 180 240 L 280 240",
  "M 320 240 L 430 240 C 440 240 430 230 440 230 L 540 230",
  "M 580 230 L 700 230 C 710 230 700 240 710 240 L 820 240",
  "M 860 240 L 960 240",
  // bottom band
  "M 0 300 L 110 300 C 120 300 110 290 120 290 L 240 290",
  "M 280 290 L 380 290 C 390 290 380 300 390 300 L 510 300",
  "M 550 300 L 660 300 C 670 300 660 290 670 290 L 780 290",
  "M 820 290 L 960 290",
  // vertical risers (a few, for visual rhythm)
  "M 220 50 L 220 110",
  "M 470 60 L 470 170",
  "M 720 50 L 720 110",
  "M 280 240 L 280 290",
  "M 600 180 L 600 230",
  "M 820 240 L 820 290",
];

// Junction nodes — placed at a subset of path bends.
const CIRCUIT_NODES = [
  [220, 50], [470, 60], [720, 50], [220, 110], [470, 110],
  [320, 170], [600, 180], [820, 170],
  [280, 240], [600, 230], [820, 240],
  [240, 290], [510, 300], [780, 290],
];

// Comet beams — pick a subset of paths to animate, with
// staggered timing so the page feels alive but not chaotic.
const BEAM_ASSIGNMENTS = [
  { i: 0,  dur: 4.6, begin: 0.0 },
  { i: 2,  dur: 5.2, begin: 0.8 },
  { i: 4,  dur: 4.4, begin: 1.4 },
  { i: 6,  dur: 5.0, begin: 2.2 },
  { i: 8,  dur: 5.6, begin: 0.4 },
  { i: 10, dur: 4.8, begin: 1.8 },
  { i: 12, dur: 5.4, begin: 2.6 },
  { i: 14, dur: 4.6, begin: 3.2 },
  { i: 16, dur: 5.0, begin: 1.0 },
  { i: 18, dur: 4.4, begin: 2.0 },
  { i: 20, dur: 5.2, begin: 3.6 },
  { i: 22, dur: 4.8, begin: 0.6 },
];

function CircuitBeam({ pathId, dur, begin }) {
  // Shorter comet → less of the beam sits "off-tangent" across a
  // curve, so direction changes read as continuously smooth.
  const W = 9;
  const H = 1.4;
  return (
    <g>
      <rect
        x={-W / 2}
        y={-H / 2}
        width={W}
        height={H}
        rx={H / 2}
        fill="url(#sec-beam-grad)"
      >
        <animateMotion
          dur={`${dur}s`}
          begin={`${begin}s`}
          repeatCount="indefinite"
          rotate="auto"
        >
          <mpath href={`#${pathId}`}/>
        </animateMotion>
      </rect>
    </g>
  );
}

function Circuit({ on }) {
  return (
    <div className={`sec-circuit ${on ? "is-on" : ""}`} aria-hidden="true">
      <svg viewBox="0 0 960 340" preserveAspectRatio="xMidYMid slice">
        <defs>
          {/* Comet gradient: transparent → blue core → transparent */}
          <linearGradient id="sec-beam-grad" x1="0" y1="0.5" x2="1" y2="0.5">
            <stop offset="0%"   stopColor="rgba(5,48,206,0)"/>
            <stop offset="35%"  stopColor="rgba(5,48,206,0.45)"/>
            <stop offset="50%"  stopColor="rgba(140,160,246,0.95)"/>
            <stop offset="65%"  stopColor="rgba(5,48,206,0.45)"/>
            <stop offset="100%" stopColor="rgba(5,48,206,0)"/>
          </linearGradient>

          {/* Path defs — declared once so beams can mpath them */}
          {CIRCUIT_PATHS.map((d, i) => (
            <path key={`p-${i}`} id={`sec-p-${i}`} d={d}/>
          ))}
        </defs>

        {/* Base traces — thin, very low opacity */}
        {CIRCUIT_PATHS.map((d, i) => (
          <use key={`use-${i}`} href={`#sec-p-${i}`} className="sec-trace"/>
        ))}

        {/* Junction nodes */}
        {CIRCUIT_NODES.map(([cx, cy], i) => (
          <circle key={`n-${i}`} className="sec-node" cx={cx} cy={cy} r="1.8"/>
        ))}

        {/* Comet beams */}
        {on && BEAM_ASSIGNMENTS.map(({ i, dur, begin }) => (
          <CircuitBeam key={`b-${i}`} pathId={`sec-p-${i}`} dur={dur} begin={begin}/>
        ))}
      </svg>
    </div>
  );
}

// ============================================================
// SECURITY CARD — structural panel, not "review card"
// ============================================================
function SecurityCard({ item, i }) {
  const Ico = Icons[item.icon];
  return (
    <article
      className="sec-card reveal"
      data-hover="1"
      style={{ "--reveal-delay": `${i * 100}ms` }}
    >
      {/* Vertical accent bar on the left edge */}
      <span className="sec-card-bar" aria-hidden="true"/>

      {/* Top row: small icon plaque + title */}
      <header className="sec-card-head">
        <span className="sec-card-icon">
          <Ico size={18} stroke={1.7} color="var(--accent)"/>
        </span>
        <h3 className="sec-card-title">{item.title}</h3>
      </header>

      {/* Description */}
      <p className="sec-card-desc">{item.description}</p>

      {/* Status row at the bottom */}
      <footer className="sec-card-status">
        <span className="sec-card-status-dot" aria-hidden="true"/>
        <span className="sec-card-status-label">Activo</span>
        <span className="sec-card-status-sep" aria-hidden="true"/>
        <span className="sec-card-status-chip">{item.chip}</span>
      </footer>
    </article>
  );
}

function SecuritySection() {
  return (
    <section
      id="security"
      data-screen-label="Seguridad"
      style={{ position: "relative", background: "var(--bg-1)", padding: "124px 0", overflow: "hidden" }}
    >
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <SectionHeading
          eyebrow="Seguridad"
          statement="La protección estándar se queda corta."
          twist="Meefi va más allá."
        />

        <div className="sec-grid">
          {SECURITY.map((s, i) => (
            <SecurityCard key={s.title} item={s} i={i}/>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SecuritySection = SecuritySection;