// ─────────────────────────────────────────────────────────── // Componentes compartidos — Fundación Minnesota // ─────────────────────────────────────────────────────────── const { useState, useEffect, useRef } = React; // ── Ala (isotipo) — PNG pre-teñido por color de marca (robusto: sin CSS mask) function wingTone(color) { const c = String(color || "").toLowerCase(); let file = "durazno", opacity = 1; const m = c.match(/rgba?\([^)]*?,\s*([0-9.]+)\s*\)/); if (m) opacity = parseFloat(m[1]); if (c.includes("--verde") || c.includes("93,174,158") || c.includes("93, 174, 158")) file = "verde"; else if (c.includes("--pinar") || c.includes("47,111,98") || c.includes("47, 111, 98")) file = "pinar"; else if (c.includes("--papel") || c.includes("251,248,244") || c.includes("251, 248, 244")) file = "papel"; else if (c.includes("--tinta") || c.includes("28,28,28")) file = "tinta"; else file = "durazno"; return { file, opacity }; } function Wing({ color = "var(--durazno)", style = {}, className = "", title }) { const { file, opacity } = wingTone(color); return ( ); } // ── Registro global de elementos a revelar (scroll-based, robusto en cualquier iframe) const RevealRegistry = (() => { const items = new Set(); let raf = 0; function check() { raf = 0; const vh = window.innerHeight || document.documentElement.clientHeight; items.forEach((it) => { const r = it.el.getBoundingClientRect(); if (r.top < vh * 0.92 && r.bottom > 0) { it.cb(); items.delete(it); } }); } function schedule() { if (!raf) raf = requestAnimationFrame(check); } if (typeof window !== "undefined") { window.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule, { passive: true }); window.addEventListener("load", schedule); // Reintentos por si el iframe aún no tiene tamaño al montar [60, 200, 500, 1000, 1600].forEach((t) => setTimeout(schedule, t)); // Reacciona a reflows tardíos (Tailwind CDN aplicando estilos, // fuentes o imágenes que cambian la altura del documento) if (window.ResizeObserver) { const ro = new ResizeObserver(schedule); const startRO = () => { if (document.body) ro.observe(document.body); }; if (document.body) startRO(); else window.addEventListener("DOMContentLoaded", startRO); } } return { add(el, cb) { const it = { el, cb }; items.add(it); schedule(); return () => items.delete(it); }, }; })(); // ── Reveal on scroll: fade + movimiento, con stagger y variante opcionales // variant: "up" (def) | "left" | "right" | "scale". x = distancia horizontal. function Reveal({ children, as = "div", delay = 0, y = 24, x, variant = "up", className = "", style = {}, ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce) { setShown(true); return; } const remove = RevealRegistry.add(el, () => setShown(true)); // chequeo inicial por si ya está en viewport al montar const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight || 800; if (r.top < vh * 0.95) setShown(true); // Failsafe: nunca dejar contenido oculto permanentemente const fail = setTimeout(() => setShown(true), 1800); return () => { remove(); clearTimeout(fail); }; }, []); const El = as; const vClass = variant === "left" ? "rv-left " : variant === "right" ? "rv-right " : variant === "scale" ? "rv-scale " : ""; const xVal = x != null ? x : (variant === "left" ? -40 : variant === "right" ? 40 : 0); return ( {children} ); } // ── Controlador de parallax: mueve cada [data-parallax] según el scroll. // Si data-motion="off" o prefers-reduced-motion, el CSS fuerza transform:none. const ParallaxController = (() => { let raf = 0; function frame() { raf = 0; const vh = window.innerHeight || document.documentElement.clientHeight || 800; const els = document.querySelectorAll("[data-parallax]"); els.forEach((el) => { const speed = parseFloat(el.getAttribute("data-speed")) || 0.06; const r = el.getBoundingClientRect(); const center = r.top + r.height / 2; let offset = (center - vh / 2) * -speed; // hacia arriba al bajar offset = Math.max(-80, Math.min(80, offset)); // acotado: efecto sutil, nunca se dispara el.style.setProperty("--p", offset.toFixed(1) + "px"); }); } function schedule() { if (!raf) raf = requestAnimationFrame(frame); } if (typeof window !== "undefined") { window.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule, { passive: true }); window.addEventListener("load", schedule); [100, 400, 900].forEach((t) => setTimeout(schedule, t)); } return { schedule }; })(); // ── Barra de progreso de scroll (arriba de todo) ── function ScrollProgress() { const ref = useRef(null); useEffect(() => { const bar = ref.current; if (!bar) return; let raf = 0; const update = () => { raf = 0; const doc = document.documentElement; const max = (doc.scrollHeight - doc.clientHeight) || 1; const pct = Math.min(1, Math.max(0, window.scrollY / max)); bar.style.width = (pct * 100).toFixed(2) + "%"; }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); return