// StoryCarousel.jsx — Split 3D carousel: Story · Wiggins · Why Now
// Ported from the CodePen split-3D pattern; jQuery replaced with vanilla JS.
// Images: drop your photos into assets/carousel/ as story.jpg, wiggins.jpg, field.jpg
function CarouselStyles() {
return (
);
}
// ── Slide data ─────────────────────────────────────────────────
const CAROUSEL_SLIDES = [
{
key: "story",
leftLabel: "NICARAGUA",
leftSub: "La Isla | 2004",
image: "assets/IMG/NIC1303_1608.jpg",
bg: "linear-gradient(155deg, #0d1921 0%, #1a4560 60%, #0d2535 100%)",
overline: "THE STORY",
headline: "The Island of Widows.",
body: [
"There is a community in Nicaragua where so many men have died of heat-driven kidney disease that the locals call it La Isla de Viudas, The Island of Widows. Over half the families were headed by women whose husbands, sons, and brothers had succumbed to the same disease, doing the same kind of work, in the same heat.",
"That community is where La Isla Network started. Two decades later, our team has followed the same disease, chronic kidney disease driven by extreme heat and hard labor, across three continents. Tens of thousands of shade tents in Central America. Migrant workers in the Middle East. Now, increasingly, farmworkers in California and Texas, construction crews in Southern Europe.",
"It is preventable. Water, shade, scheduled rest, training. We know exactly what works. Companies that have put our recommendations in place have seen heat-related hospitalizations drop by 80 percent, and productivity rise by 10 to 20 percent.",
"What you can do this summer is reach the worksites we have not gotten to yet. That is what this campaign is for.",
],
pullQuote: null,
},
{
key: "wiggins",
leftLabel: "TEXAS",
leftSub: "June 2026",
image: "assets/IMG/watermelon-in-texas.jpg",
bg: "linear-gradient(155deg, #0f141e 0%, #171c29 55%, #0f1620 100%)",
overline: "THE WIGGINS WATERMELON PROJECT",
headline: "One farmer in Texas changed the calculus.",
body: [
"A few months ago, a watermelon farmer in Wiggins reached out. He had watched his crew struggle in the heat for years. He told us he would put up the money himself to do this right. He just needed a partner who knew the science, the field, and the workers.",
"That partner is La Isla Network. And we cannot do this work without you. The Wiggins Watermelon Project starts this June. Our team will design the heat-safety program around his actual operation, train his supervisors, set up the water and rest schedule, and measure what changes.",
"Your funds are what let us send a small communications team to the farm to interview workers, capture the story, and turn one farmer's commitment into a national case study. A grant cannot move fast enough to do that. You can.",
],
pullQuote: { text: "The next farmer who writes to us is who your gift is for.", sub: null },
},
{
key: "whynow",
leftLabel: "IN THE FIELD",
leftSub: "Right now.",
image: "assets/IMG/_MG_1271xs.jpg",
bg: "linear-gradient(155deg, #111820 0%, #1a3245 55%, #0d1a2a 100%)",
overline: "WHY NOW",
headline: "Why this summer.",
body: [
"Workers are in the field right now. The harvest does not wait. The climate is not slowing down.",
"Your gift funds the parts of our work institutional grants cannot. Rapid response when a new community is identified. Materials translated into a new language. Field visits in the gap between major projects. The flexible dollars that decide whether protection reaches the next jobsite or stops at the last one.",
"That is what your gift this summer does.",
],
hasCountdown: true,
hasCTA: true,
},
];
// ── Component ──────────────────────────────────────────────────
function StoryCarousel({ onDonate }) {
const containerRef = React.useRef(null);
const dotsRef = React.useRef(null);
// Countdown
const days = Math.max(0, Math.ceil((new Date("2026-07-31T23:59:59") - new Date()) / 86400000));
// ── Render faces (shared by both spinners) ───────────────────
const Faces = () => CAROUSEL_SLIDES.map((slide, i) => (
{/* Left: image + atmospheric label */}
0{i + 1}
{slide.overline}
{slide.leftLabel}
{/*
{slide.leftSub}
*/}
{/* Right: readable content */}
{slide.overline}
{slide.headline}
{slide.body.map((p, j) =>
{p}
)}
{slide.pullQuote && (
{slide.pullQuote.text}
{slide.pullQuote.sub &&
{slide.pullQuote.sub}
}
)}
{slide.hasCountdown && (
{days} days left in the campaign
)}
{slide.hasCTA && (
)}
));
// ── Vanilla JS carousel logic ────────────────────────────────
React.useEffect(() => {
const container = containerRef.current;
if (!container) return;
const stage = container.querySelector(".lc-stage");
const N = CAROUSEL_SLIDES.length;
let activeIndex = 0;
let disabled = false;
let lastSpinTime = 0;
const SPIN_DUR = 1000;
const MOBILE_DUR = 720;
const DWELL_VH = 60; // scroll distance (vh) per slide
const isMobile = () => window.innerWidth <= 700;
const getFaces = idx => container.querySelectorAll(`.lc-face[data-index="${idx}"]`);
const getDots = () => dotsRef.current ? dotsRef.current.querySelectorAll(".lc-dot") : [];
const spin = (inc = 1) => {
if (disabled || !inc) return;
// Clamp to ±1 — never jump multiple slides from a single scroll event
const step = Math.sign(inc);
const now = Date.now();
const dur = isMobile() ? MOBILE_DUR : SPIN_DUR;
// Cooldown: reject if previous animation hasn't finished
if (now - lastSpinTime < dur + 50) return;
lastSpinTime = now;
disabled = true;
activeIndex = ((activeIndex + step) % N + N) % N;
getFaces(activeIndex).forEach(f => f.classList.add("js-next"));
if (step > 0) stage.classList.add("js-spin-fwd");
else stage.classList.add("js-spin-bwd");
getDots().forEach((d, i) => d.classList.toggle("active", i === activeIndex));
setTimeout(() => {
container.querySelectorAll(".lc-face.js-active").forEach(f => f.classList.remove("js-active"));
container.querySelectorAll(".lc-face.js-next").forEach(f => {
f.classList.remove("js-next");
f.classList.add("js-active");
});
stage.classList.add("lc-no-transition");
stage.classList.remove("js-spin-fwd", "js-spin-bwd");
setTimeout(() => {
stage.classList.remove("lc-no-transition");
disabled = false;
}, 100);
}, dur);
};
// Dot clicks — allow direct jump to any slide
getDots().forEach(dot => {
dot.addEventListener("click", e => {
e.preventDefault();
const target = parseInt(dot.getAttribute("data-index"), 10);
if (target === activeIndex) return;
// For dot clicks bypass the ±1 clamp — spin one step at a time instantly
const step = Math.sign(target - activeIndex);
spin(step);
});
});
// Prev / Next buttons
const prev = container.querySelector(".lc-prev");
const next = container.querySelector(".lc-next");
if (prev) prev.addEventListener("click", () => spin(-1));
if (next) next.addEventListener("click", () => spin(1));
// Keyboard (only when carousel is in view)
const onKey = e => {
const rect = container.getBoundingClientRect();
const inView = rect.top < window.innerHeight && rect.bottom > 0;
if (!inView) return;
if (e.key === "ArrowUp" || e.key === "ArrowLeft") spin(-1);
if (e.key === "ArrowDown" || e.key === "ArrowRight") spin(1);
};
document.addEventListener("keyup", onKey);
// Touch swipe — 80px threshold + 120ms time gate to prevent tap misfires
let ty0 = null;
let touchTime = 0;
const onTS = e => { ty0 = e.touches[0].clientY; touchTime = Date.now(); };
const onTE = e => {
if (ty0 === null) return;
const elapsed = Date.now() - touchTime;
const dy = ty0 - e.changedTouches[0].clientY;
ty0 = null; // consume gesture
if (elapsed < 120) return; // tap, not swipe
if (Math.abs(dy) > 80) spin(dy > 0 ? 1 : -1);
};
container.addEventListener("touchstart", onTS, { passive: true });
container.addEventListener("touchend", onTE, { passive: true });
// ── Scroll-track: map page scroll to slide index ──────────────
// Each slide gets DWELL_VH of scroll distance; last slide has an extra
// DWELL_VH exit buffer before the section unsticks.
const track = container.closest(".lc-scroll-track");
const dwellPx = () => window.innerHeight * (DWELL_VH / 100);
const trackTop = track
? track.getBoundingClientRect().top + window.scrollY
: 0;
const onScroll = () => {
if (!track) return;
const scrolledIntoTrack = window.scrollY - trackTop;
const targetIndex = Math.min(
N - 1,
Math.max(0, Math.floor(scrolledIntoTrack / dwellPx()))
);
if (targetIndex !== activeIndex) spin(targetIndex - activeIndex);
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => {
document.removeEventListener("keyup", onKey);
container.removeEventListener("touchstart", onTS);
container.removeEventListener("touchend", onTE);
window.removeEventListener("scroll", onScroll);
};
}, []);
// Each slide gets 60vh of scroll dwell; +60vh exit buffer holds the last slide
// before the section unsticks and the next section appears.
const DWELL_VH = 60;
const trackHeight = `calc(${CAROUSEL_SLIDES.length + 1} * ${DWELL_VH}vh)`;
return (