// Bom Pain — Sections components // Depends on globals: React, Illus, BPData const { useState, useEffect, useRef } = React; // Hook: reveal-on-scroll for any element function useReveal(threshold = 0.18) { const ref = useRef(null); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); // also draw any pencil illustrations within e.target.querySelectorAll(".bp-illus").forEach((s) => s.classList.add("bp-drawn")); } }); }, { threshold: 0.05, rootMargin: "0px 0px -8% 0px" } ); obs.observe(ref.current); return () => obs.disconnect(); }, [threshold]); return ref; } // Reveal wrapper function Reveal({ children, className = "", delay = 0, ...rest }) { const ref = useReveal(); return (
{children}
); } // ─── Decorative SVG icons ───────────────────────────────────────────────────── function DecoCookie({ style, className = "" }) { return ( ); } function DecoLeaf({ style, className = "" }) { return ( ); } function DecoCroissant({ style, className = "" }) { return ( ); } function DecoStar({ style, className = "" }) { return ( ); } function DecoDots({ style, className = "" }) { return ( ); } function DecoCup({ style, className = "" }) { return ( ); } // ============= NAV ============= function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } // ============= FLOATING WHATSAPP ============= function FloatingWhatsApp() { return ( WhatsApp ); } // ============= HERO ============= function Hero({ variant = "a" }) { const ref = useReveal(0.05); useEffect(() => { if (ref.current) { ref.current.querySelectorAll(".bp-illus").forEach((s) => s.classList.add("bp-drawn")); ref.current.classList.add("in"); } }, []); return (
Bom Pain Café
Boulangerie · Café · Ñemby

Bom Pain. El arte del pan.

Café artesanal, panadería fresca y los sabores de siempre.

Reservar mesa → Ver el menú →
{[...BPData.marquee, ...BPData.marquee].map((s, i) => ( {s} ))}
); } // ============= ABOUT ============= function About() { return (
Café con croissants en Bom Pain
Nuestra historia

Donde el café — te espera cada mañana

Abrimos en 2023 con una idea simple: un lugar donde el café sea de verdad, el almuerzo sepa a casa y siempre haya algo rico en la vitrina. Somos un café de barrio con alma — atendido por sus dueños, para los de siempre y para quien nos descubra.

03 Años con vos
7am Abrimos cada día
∞ Razones para volver
); } // ============= MENU ============= function Menu() { const [menuData, setMenuData] = useState(null); const [tab, setTab] = useState(null); useEffect(() => { window.loadBPMenu() .then(menu => { setMenuData(menu); setTab(Object.keys(menu)[0] ?? null); }) .catch(() => { setMenuData(BPData.menu); setTab(Object.keys(BPData.menu)[0] ?? null); }); }, []); const tabs = menuData ? Object.keys(menuData) : []; const active = (menuData && tab) ? (menuData[tab] ?? { label: '', items: [] }) : null; // Re-trigger draw animation when tab changes const gridRef = useRef(null); useEffect(() => { if (!gridRef.current) return; const items = gridRef.current.querySelectorAll(".bp-illus"); items.forEach((s) => s.classList.remove("bp-drawn")); requestAnimationFrame(() => { requestAnimationFrame(() => items.forEach((s) => s.classList.add("bp-drawn"))); }); }, [tab]); return ( ); } // ============= GALLERY — Instagram Carousel ============= function extractIgId(url) { const m = (url || '').match(/\/p\/([^/?#]+)/); return m ? m[1] : null; } function Gallery() { const [igPosts, setIgPosts] = useState(null); const [ready, setReady] = useState(false); const trackRef = useRef(null); const viewportRef = useRef(null); const sectionRef = useRef(null); const drag = useRef({ on: false, startX: 0, startTX: 0 }); // Only load iframes when the section is near the viewport useEffect(() => { const obs = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setReady(true); obs.disconnect(); } }, { rootMargin: '300px' } ); if (sectionRef.current) obs.observe(sectionRef.current); return () => obs.disconnect(); }, []); useEffect(() => { if (!ready) return; window.loadBPInstagram() .then(data => setIgPosts(data?.length ? data : window.IG_FALLBACK)) .catch(() => setIgPosts(window.IG_FALLBACK)); }, [ready]); const posts = igPosts ?? window.IG_FALLBACK; const doubled = [...posts, ...posts]; const DUR = posts.length * 9; const getTX = () => { const t = trackRef.current; return t ? new DOMMatrix(getComputedStyle(t).transform).m41 : 0; }; // Resume CSS animation from the current manual position — no visual jump const resumeAnim = (fromX) => { const t = trackRef.current; if (!t) return; const half = t.scrollWidth / 2; const norm = ((-fromX) % half + half) % half; const delay = -(norm / half) * DUR; // Set new animation while inline transform still overrides → no jump t.style.animation = `ig-scroll ${DUR}s linear ${delay}s infinite`; requestAnimationFrame(() => { t.style.transform = ''; }); }; useEffect(() => { const vp = viewportRef.current; const track = trackRef.current; if (!vp || !track) return; const d = drag.current; const begin = (clientX) => { d.on = true; d.startX = clientX; d.startTX = getTX(); track.style.animation = 'none'; track.style.transform = `translate3d(${d.startTX}px,0,0)`; vp.classList.add('dragging'); }; const move = (clientX) => { if (!d.on) return; track.style.transform = `translate3d(${d.startTX + clientX - d.startX}px,0,0)`; }; const end = () => { if (!d.on) return; d.on = false; vp.classList.remove('dragging'); resumeAnim(getTX()); }; // ── Mouse via Pointer Capture (no window listeners) ────────────────────── const onPtrDown = (e) => { if (e.pointerType === 'touch') return; e.preventDefault(); vp.setPointerCapture(e.pointerId); begin(e.clientX); }; const onPtrMove = (e) => { if (e.pointerType !== 'touch') move(e.clientX); }; const onPtrUp = (e) => { if (e.pointerType !== 'touch') end(); }; // ── Touch with horizontal/vertical detection ───────────────────────────── let ty0 = 0, dir = null; const onTouchStart = (e) => { ty0 = e.touches[0].clientY; dir = null; begin(e.touches[0].clientX); }; const onTouchMove = (e) => { if (!d.on) return; const t = e.touches[0]; if (dir === null) { const ax = Math.abs(t.clientX - d.startX); const ay = Math.abs(t.clientY - ty0); if (ax > 6 || ay > 6) dir = ax >= ay ? 'h' : 'v'; } if (dir === 'v') { end(); return; } // vertical → free the page scroll if (dir === 'h') { e.preventDefault(); move(t.clientX); } }; const onTouchEnd = () => end(); vp.addEventListener('pointerdown', onPtrDown); vp.addEventListener('pointermove', onPtrMove); vp.addEventListener('pointerup', onPtrUp); vp.addEventListener('pointercancel', onPtrUp); vp.addEventListener('touchstart', onTouchStart, { passive: true }); vp.addEventListener('touchmove', onTouchMove, { passive: false }); vp.addEventListener('touchend', onTouchEnd, { passive: true }); return () => { vp.removeEventListener('pointerdown', onPtrDown); vp.removeEventListener('pointermove', onPtrMove); vp.removeEventListener('pointerup', onPtrUp); vp.removeEventListener('pointercancel', onPtrUp); vp.removeEventListener('touchstart', onTouchStart); vp.removeEventListener('touchmove', onTouchMove); vp.removeEventListener('touchend', onTouchEnd); }; }, [igPosts]); return (