/* global React, useSectionProgress */

const REASONS = [
  {
    n: "01",
    title: "Agilidad Lyncared",
    short: "Agilidad",
    desc: "Somos pequeños para atender tu llamada nosotros mismos. Suficientemente grandes para gestionar un bloque entero. Sin centralitas, sin colas de tickets — línea directa con el técnico que se presenta.",
    chip: "Línea directa",
    accent: "#5EE9F2",
  },
  {
    n: "02",
    title: "Perfil técnico dual",
    short: "Doble perfil",
    desc: "Ingeniería de seguridad ciudadana más redes IT. Dos disciplinas que casi nunca conviven bajo el mismo techo — aquí sí, en cada trabajo, a cargo de los fundadores.",
    chip: "Seguridad + IT",
    accent: "#F5B547",
  },
  {
    n: "03",
    title: "Confianza a prueba de todo",
    short: "Confianza",
    desc: "Fundados por dos amigos con 15 años trabajando codo con codo. Los mismos estándares, el mismo apretón de manos, la misma respuesta al teléfono — siempre.",
    chip: "Dos fundadores, una promesa",
    accent: "#5EE9F2",
  },
];

function WhyUs() {
  const [containerRef, progress] = useSectionProgress();

  const activeIndex = Math.min(2, Math.floor(progress * 3));
  const local = progress * 3 - activeIndex;

  return (
    <section
      id="por-que"
      ref={containerRef}
      style={{
        position: "relative",
        height: "320vh",
        background: "linear-gradient(180deg, var(--navy-900) 0%, var(--navy-850) 30%, var(--navy-900) 100%)",
      }}
    >
      <div className="why-sticky-panel">
        <BackgroundNumeral index={activeIndex} />
        <SideRail activeIndex={activeIndex} progress={progress} />

        <div className="container why-container">
          <div className="section-head why-eyebrow">
            <span className="eyebrow">
              <span className="dash"></span>
              Por qué elegir Lyncared
            </span>
          </div>

          <div className="why-stage">
            {REASONS.map((r, i) => {
              const isActive = i === activeIndex;
              const offset = i - activeIndex;
              let opacity = 0;
              let translateY = 0;
              let scale = 1;
              if (offset < 0) {
                opacity = 0;
                translateY = -80;
              } else if (offset === 0) {
                const fadeIn = Math.min(1, Math.max(0, local * 4));
                opacity = i === 0 ? 1 : fadeIn;
                translateY = i === 0 ? 0 : (1 - fadeIn) * 40;
                if (local > 0.75 && i < REASONS.length - 1) {
                  const fadeOut = (local - 0.75) / 0.25;
                  opacity = 1 - fadeOut;
                  translateY = -fadeOut * 40;
                }
              } else {
                opacity = 0;
                translateY = 60;
                scale = 0.96;
              }

              return (
                <div
                  key={r.n}
                  className="why-slide"
                  style={{
                    position: "absolute",
                    inset: 0,
                    opacity,
                    transform: `translateY(${translateY}px) scale(${scale})`,
                    transition: "opacity 200ms ease",
                    pointerEvents: isActive ? "auto" : "none",
                  }}
                >
                  <div
                    style={{
                      display: "inline-flex",
                      width: "fit-content",
                      alignItems: "center",
                      gap: 12,
                      padding: "8px 16px",
                      borderRadius: 999,
                      background: "rgba(255,255,255,0.04)",
                      border: `1px solid ${r.accent}55`,
                      marginBottom: 28,
                    }}
                  >
                    <span
                      style={{
                        width: 8,
                        height: 8,
                        borderRadius: 999,
                        background: r.accent,
                        boxShadow: `0 0 12px ${r.accent}`,
                      }}
                    />
                    <span
                      style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: 11,
                        letterSpacing: "0.14em",
                        textTransform: "uppercase",
                        color: r.accent,
                      }}
                    >
                      {r.chip}
                    </span>
                  </div>

                  <h2 className="why-title">
                    {r.title.split(" ").map((w, wi) => (
                      <span key={wi} style={{ display: "inline-block", marginRight: 18 }}>{w}</span>
                    ))}
                  </h2>
                  <p style={{ fontSize: 20, lineHeight: 1.5, color: "var(--text-dim)", maxWidth: "52ch" }}>
                    {r.desc}
                  </p>
                </div>
              );
            })}
          </div>

          <div className="why-pills">
            {REASONS.map((r, i) => (
              <div
                key={r.n}
                style={{
                  padding: "10px 18px",
                  borderRadius: 999,
                  background: i === activeIndex ? "rgba(94, 233, 242, 0.1)" : "rgba(255,255,255,0.03)",
                  border: i === activeIndex ? "1px solid rgba(94, 233, 242, 0.4)" : "1px solid rgba(255,255,255,0.06)",
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  color: i === activeIndex ? "var(--cyan)" : "var(--text-mute)",
                  transition: "all .3s ease",
                }}
              >
                {r.n} {r.short}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BackgroundNumeral({ index }) {
  return (
    <div
      className="why-numeral"
      aria-hidden="true"
      style={{
        position: "absolute",
        right: "-4%",
        top: "50%",
        transform: "translateY(-50%)",
        fontFamily: "var(--font-display)",
        fontSize: "min(80vh, 60vw)",
        fontWeight: 400,
        letterSpacing: "-0.05em",
        lineHeight: 1,
        color: "transparent",
        WebkitTextStroke: "1px rgba(94, 233, 242, 0.18)",
        opacity: 0.7,
        pointerEvents: "none",
        userSelect: "none",
      }}
    >
      0{index + 1}
    </div>
  );
}

function SideRail({ activeIndex, progress }) {
  return (
    <div
      style={{
        position: "absolute",
        left: "var(--pad-x)",
        top: "50%",
        transform: "translateY(-50%)",
        display: "flex",
        flexDirection: "column",
        gap: 14,
        zIndex: 4,
      }}
      className="why-rail"
    >
      {REASONS.map((r, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ width: 2, height: 36, background: "rgba(255,255,255,0.1)", position: "relative", overflow: "hidden" }}>
            {i === activeIndex && (
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  background: "var(--cyan)",
                  transformOrigin: "top",
                  transform: `scaleY(${Math.min(1, progress * 3 - i)})`,
                }}
              />
            )}
            {i < activeIndex && (
              <div style={{ position: "absolute", inset: 0, background: "var(--cyan)" }} />
            )}
          </div>
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.14em",
              color: i === activeIndex ? "var(--cyan)" : "var(--text-mute)",
              transition: "color .3s ease",
            }}
          >
            {r.n}
          </span>
        </div>
      ))}
      <style>{`
        @media (max-width: 720px) { .why-rail { display: none !important; } }
      `}</style>
    </div>
  );
}

window.WhyUs = WhyUs;