// ScrollCue — indicador de scroll-down reutilizable.
//
// RTC-0022/A nació inline en el hero; RTC-0023/A lo extrae a este componente
// para reutilizarlo (hero + pie de Equipo) sin duplicar estilos. El aspecto y
// el comportamiento son idénticos al original: botón circular sobrio (anillo
// ink-subtle, chevron ink, fondo transparente) cuya FLECHA rebota suave (CSS
// .rt-scroll-cue / .rt-scroll-cue__icon, globales en index.html, ambas
// desactivadas bajo reduce-motion). El click hace scroll SUAVE a `targetId`
// (salto directo si el usuario pidió reduce-motion).
//
// Props:
//   · targetId     — id del elemento al que se scrollea (sin '#').
//   · fadeOnScroll — si true, se desvanece y queda no-clickeable apenas el
//                    usuario baja del umbral (comportamiento del hero, que
//                    vive arriba de todo). Por defecto false: visible siempre
//                    (p. ej. al pie de Equipo, que ya está scrolleado).
//   · dark         — RTC-0026/A: variante para fondo OSCURO (Enfoque). En claro
//                    (default) el anillo y el chevron usan ink/ink-subtle; con
//                    dark pasan a blanco/translúcido para contrastar sobre
//                    --bg-deep. No afecta a las instancias en fondo claro
//                    (hero/Equipo/Áreas), que no pasan la prop.
//   · label        — aria-label accesible del botón.
//   · style        — estilos extra del caller; sirven sobre todo para el
//                    POSICIONAMIENTO (el hero lo ubica absolute centrado al
//                    pie; Equipo lo centra en flujo con un wrapper flex). Se
//                    fusiona al final para poder pisar lo que haga falta.
function ScrollCue({ targetId, fadeOnScroll = false, dark = false, label = "Ir a la siguiente sección", style = {} }) {
  const [atTop, setAtTop] = React.useState(true);

  React.useEffect(() => {
    if (!fadeOnScroll) return; // sin fade no hace falta escuchar el scroll
    const onScroll = () => setAtTop(window.scrollY < 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [fadeOnScroll]);

  const go = () => {
    const el = document.getElementById(targetId);
    if (!el) return;
    const reduce =
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    el.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
  };

  const visible = fadeOnScroll ? atTop : true;

  return (
    <button
      type="button"
      aria-label={label}
      className={"rt-scroll-cue" + (dark ? " rt-scroll-cue--on-dark" : "")}
      onClick={go}
      style={{
        width: 48,
        height: 48,
        borderRadius: "50%",
        // RTC-0026/A: en fondo oscuro el anillo y el chevron pasan a blanco
        // translúcido / near-white para contrastar; el chevron hereda
        // currentColor del botón. En claro se mantienen ink-subtle / ink.
        border: dark ? "1px solid rgba(255,255,255,0.4)" : "1px solid var(--ink-subtle)",
        background: "transparent",
        color: dark ? "var(--ink-inverse)" : "var(--ink)",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 0,
        cursor: "pointer",
        opacity: visible ? 1 : 0,
        pointerEvents: visible ? "auto" : "none",
        transition:
          "opacity 400ms var(--ease-std), border-color 250ms var(--ease-std), background 250ms var(--ease-std)",
        ...style,
      }}
    >
      <span
        className="rt-scroll-cue__icon"
        aria-hidden="true"
        style={{ display: "inline-flex" }}
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </span>
    </button>
  );
}

Object.assign(window, { ScrollCue });