"use client";
// components/landing/PrizeSlider.tsx
// §1.2 "Big prize banner — the hook." A rotating banner that cycles through
// slides every ~5s: current-period prizes, then previous winners, etc. This is a
// SHELL built to slot the team's delivered art (Alex + Churchill): pass real
// slides (banner artwork + the inspirational beneficiary image) via the `slides`
// prop. Until the art lands, the landing feeds it the confirmed prizes so the
// banner is never empty, and a calm placeholder shows when there is nothing yet.
//
// Accessibility (WCAG 2.2.2 pause/stop/hide): auto-advance pauses on hover and
// keyboard focus and is fully disabled under prefers-reduced-motion. Slides are
// navigable by dots; the active slide is announced politely. The crossfade is a
// pure CSS opacity transition (no GSAP dependency at the call site), so it
// degrades to an instant swap when motion is reduced.
import * as React from "react";
import { AnimatedHeading } from "./AnimatedHeading";
export interface PrizeSlide {
id: string;
/** Optional banner image (sponsor/host art lives off our remotePatterns, so a
* plain lazy is used, matching PrizeGrid). */
imageUrl?: string | null;
/** Small eyebrow tag, e.g. "Premio destacado" or "Ganador anterior". */
kicker?: string;
title: string;
caption?: string;
}
function usePrefersReducedMotion(): boolean {
const [reduced, setReduced] = React.useState(false);
React.useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) return;
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
const update = () => setReduced(mq.matches);
update();
mq.addEventListener?.("change", update);
return () => mq.removeEventListener?.("change", update);
}, []);
return reduced;
}
export interface PrizeSliderProps {
slides: PrizeSlide[];
/** Auto-advance interval. Defaults to 5s per the brief. */
intervalMs?: number;
className?: string;
}
export function PrizeSlider({
slides,
intervalMs = 5000,
className = "",
}: PrizeSliderProps) {
const reduced = usePrefersReducedMotion();
const [active, setActive] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const count = slides.length;
// Clamp during render (never in an effect) so a shrinking slide set can never
// leave the shown index out of range, with no setState-in-effect.
const safeActive = count > 0 ? Math.min(active, count - 1) : 0;
// Auto-advance. Disabled when there is one (or no) slide, when paused
// (hover/focus), or when the user prefers reduced motion.
React.useEffect(() => {
if (reduced || paused || count < 2) return;
const id = window.setInterval(() => {
setActive((i) => (i + 1) % count);
}, intervalMs);
return () => window.clearInterval(id);
}, [reduced, paused, count, intervalMs]);
if (count === 0) {
return (
Teletón
Pronto verás aquí los premios de la Rifa Solidaria.