/* TresCaminos.jsx — three cards showing the paths into a service branch.
 * For Legales: ThemisX, Agendar Cita, Documentos LawTech.
 * For Técnicos: Diagnóstico, Agendar Reunión, Propuesta Técnica.
 * Wrapped in an int-section so the parent page only needs to drop this in.
 */
function TresCaminos({ variant, paths, onThemisXClick, onCitaClick, tint = true }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  const isLegal = variant === "legal";

  const handleClick = (action) => {
    if (action === "themisx") onThemisXClick && onThemisXClick();
    else if (action === "cita") onCitaClick && onCitaClick();
  };

  // Particle positions for the ThemisX card aurora. Pre-computed so they don't
  // jump around on re-render. Mix of sizes and animation delays makes the field
  // feel organic instead of mechanical.
  const PARTICLES = [
    { l: "12%", t: "20%", d: 0,    dur: 7,   s: 3 },
    { l: "85%", t: "15%", d: 1.2,  dur: 9,   s: 2 },
    { l: "30%", t: "70%", d: 2.5,  dur: 8,   s: 4 },
    { l: "65%", t: "55%", d: 0.7,  dur: 10,  s: 2 },
    { l: "78%", t: "82%", d: 3,    dur: 7.5, s: 3 },
    { l: "20%", t: "50%", d: 1.7,  dur: 9,   s: 2 },
    { l: "50%", t: "30%", d: 4.2,  dur: 11,  s: 2 },
    { l: "92%", t: "45%", d: 2,    dur: 8.5, s: 3 },
    { l: "8%",  t: "75%", d: 3.5,  dur: 9.5, s: 2 },
    { l: "55%", t: "88%", d: 0.4,  dur: 8,   s: 3 },
  ];

  return (
    <section className={"int-section" + (tint ? " tint" : "")} id="caminos">
      <div className="int-container">
        <div className="int-section-head">
          <h2>{isLegal ? "Dos formas de comenzar tu trámite" : "Dos formas de iniciar contigo"}</h2>
          <p>{isLegal ? "Elige el camino que mejor se ajuste a la urgencia, el detalle del caso y tu disponibilidad." : "Elige la alternativa que mejor se adapte a tu necesidad técnica, el nivel de detalle y la rapidez de atención requerida."}</p>
        </div>
        <div className={"tres-caminos " + variant}>
          {paths.map(p => {
            const isThemisX = p.action === "themisx";
            return (
              <article key={p.title}
                className={"path" + (isThemisX ? " themisx-card" : "")}
                onClick={() => handleClick(p.action)}
                role="button" tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleClick(p.action); } }}>
                {isThemisX && (
                  <>
                    <span className="aurora" aria-hidden="true"></span>
                    <span className="grid-lines" aria-hidden="true"></span>
                    <span className="particles" aria-hidden="true">
                      {PARTICLES.map((pt, i) => (
                        <span key={i} style={{
                          left: pt.l, top: pt.t,
                          width: pt.s + "px", height: pt.s + "px",
                          animationDelay: pt.d + "s",
                          animationDuration: pt.dur + "s",
                        }} />
                      ))}
                    </span>
                  </>
                )}
                <div className="icon">
                  {p.icon === "star"
                    ? <span className="star" aria-hidden="true">✦</span>
                    : <i data-lucide={p.icon}></i>}
                </div>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
                <span className="more">{p.cta} <i data-lucide="arrow-right"></i></span>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TresCaminos });