// sections.jsx — all visual section components // Reads from props: data (content object), L (i18n strings), lang ("es"|"en") // Each section is wrapped in
const { useState, useEffect, useRef, useMemo, useCallback } = React; // helpers ──────────────────────────────────────────────────────────────── const pickByLang = (obj, key, lang) => obj?.[`${key}_${lang}`] ?? obj?.[key] ?? ""; // Reveal — fades children in on scroll, with a safety-net fallback that // guarantees visibility even if IntersectionObserver never fires (some iframe // contexts, headless renderers, html-to-image captures, etc.) function Reveal({ children, delay=0, as:Tag="div", className="", ...rest }) { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; let done = false; // safety net: always reveal after 1.4s even if IO never fires const fallback = setTimeout(() => { if (!done) { done = true; setShown(true); } }, 1400 + delay); const io = new IntersectionObserver(([e]) => { if (e.isIntersecting && !done) { done = true; clearTimeout(fallback); setTimeout(() => setShown(true), delay); io.disconnect(); } }, { threshold:.12 }); io.observe(el); return () => { clearTimeout(fallback); io.disconnect(); }; }, [delay]); return {children}; } // Watercolor field — many SVG-blurred shapes drifting in the background ── function WatercolorField({ density=8, hue="sage" }) { // generate stable positions once const blobs = useMemo(() => { const out = []; for (let i=0; i