// 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 café.

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
); } // ============= SUBCAT ICON ============= // k = icon key stored in Notion's Icono field (e.g. 'croissant', 'cafe', 'desayuno') function SubcatIcon({ k = '', size = 20 }) { const key = (k || '').toLowerCase().trim(); const p = { fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }; const box = "0 0 32 32"; const s = { width: size, height: size, flexShrink: 0, display: "block" }; if (key === 'croissant') return ( ); if (key === 'medialuna') return ( ); if (key === 'mbeju') return ( ); if (key === 'especial') return ( ); if (key === 'desayuno') return ( ); if (key === 'cafe') return ( ); if (key === 'frappe') return ( ); if (key === 'milkshake') return ( ); if (key === 'sandwich') return ( ); if (key === 'horno') return ( ); if (key === 'empanada') return ( ); if (key === 'minuta') return ( ); if (key === 'hamburguesa') return ( ); if (key === 'postre') return ( ); if (key === 'helado') return ( ); if (key === 'jarra') return ( ); if (key === 'vaso') return ( ); if (key === 'gaseosa') return ( ); if (key === 'bebida') return ( ); if (key === 'almuerzo') return ( ); if (key === 'guarnicion') return ( ); // fallback return ( ); } // ============= MENU ============= function MenuItem({ item, modoVista, delay }) { return (
{modoVista && item.imagenUrl ? (
{item.name}
) : (
)}

{item.name}

{item.tags &&
{item.tags}
} {item.desc &&

{item.desc}

}
{item.price}
); } function Menu() { const [menuData, setMenuData] = useState(null); const [tab, setTab] = useState(null); const [subTab, setSubTab] = 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); }); }, []); // Auto-select first subcategory whenever the category changes (never leave empty) useEffect(() => { if (!menuData || !tab) { setSubTab(null); return; } const subs = menuData[tab]?.subcategories ?? []; setSubTab(subs.length > 0 ? subs[0].id : null); }, [tab, menuData]); const tabs = menuData ? Object.keys(menuData) : []; const active = menuData && tab ? menuData[tab] ?? null : null; const subs = active?.subcategories ?? []; const activeSub = subTab ? subs.find(s => s.id === subTab) ?? null : null; const modoVista = !!active?.modoVista; // For categories with no subcategories (legacy / daily special), show items directly const directItems = subs.length === 0 ? (active?.directItems ?? active?.items ?? []) : []; const itemsRef = useRef(null); useEffect(() => { if (!itemsRef.current) return; const svgs = itemsRef.current.querySelectorAll(".bp-illus"); svgs.forEach(s => s.classList.remove("bp-drawn")); requestAnimationFrame(() => requestAnimationFrame(() => svgs.forEach(s => s.classList.add("bp-drawn")))); }, [subTab]); 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 trackRef = useRef(null); const viewportRef = useRef(null); useEffect(() => { window.loadBPInstagram() .then(data => setIgPosts(data?.length ? data : window.IG_FALLBACK)) .catch(() => setIgPosts(window.IG_FALLBACK)); }, []); const posts = igPosts ?? window.IG_FALLBACK; const doubled = [...posts, ...posts]; // Drag-to-scroll useEffect(() => { const viewport = viewportRef.current; const track = trackRef.current; if (!viewport || !track) return; const animDuration = posts.length * 9; let isDragging = false; let startX = 0; let startTranslateX = 0; const getTranslateX = (el) => new DOMMatrix(window.getComputedStyle(el).transform).m41; const onDown = (e) => { const clientX = e.touches ? e.touches[0].clientX : e.clientX; isDragging = true; startX = clientX; startTranslateX = getTranslateX(track); track.style.animation = 'none'; track.style.transform = `translateX(${startTranslateX}px)`; viewport.style.cursor = 'grabbing'; }; const onMove = (e) => { if (!isDragging) return; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const dx = clientX - startX; track.style.transform = `translateX(${startTranslateX + dx}px)`; }; const onUp = () => { if (!isDragging) return; isDragging = false; viewport.style.cursor = 'grab'; const finalX = getTranslateX(track); const halfWidth = track.scrollWidth / 2; let norm = (-finalX) % halfWidth; if (norm < 0) norm += halfWidth; const delay = -(norm / halfWidth) * animDuration; track.style.transform = ''; track.style.animation = 'none'; requestAnimationFrame(() => requestAnimationFrame(() => { track.style.animation = `ig-scroll ${animDuration}s linear ${delay}s infinite`; })); }; viewport.addEventListener('mousedown', onDown); window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); viewport.addEventListener('touchstart', onDown, { passive: true }); window.addEventListener('touchmove', onMove, { passive: true }); window.addEventListener('touchend', onUp); return () => { viewport.removeEventListener('mousedown', onDown); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); viewport.removeEventListener('touchstart', onDown); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onUp); }; }, [igPosts]); return (