/* Header with mega menu + search + cart */ // Build "Ver todas las Hidrolavadoras" / "Ver todos los Repuestos" / etc. // Detect feminine plural by the first word ending in "as". const verTodosLabel = (catName) => { const first = String(catName || '').split(' ')[0] || ''; const fem = /as$/i.test(first); return (fem ? 'Ver todas las ' : 'Ver todos los ') + catName; }; /* ── Mega menu — only rendered for categories that have segments (Hidrolavadoras) ── */ const MegaMenu = ({ cat, onNavigate, onClose }) => { const main = cat.segments.filter(s => ['domesticas', 'profesionales', 'industriales'].includes(s.id)); const extras = cat.segments.filter(s => !['domesticas', 'profesionales', 'industriales'].includes(s.id)); const MAX = 7; return (
{/* 3 columnas principales */}
{main.map(seg => (
{seg.items.slice(0, MAX).map(item => ( ))} {seg.items.length > MAX && ( )}
))}
{/* Divisor */}
{/* Fila inferior: Accesorios, Repuestos + Ver todas */}
{extras.map(seg => ( ))}
); }; const HeaderBar = ({ onNavigate, onOpenCart, cartCount, onOpenMenu, onOpenSearch, currentRoute }) => { const [open, setOpen] = React.useState(null); const [hoveredSeg, setHoveredSeg] = React.useState(null); const closeT = React.useRef(null); const segCloseT = React.useRef(null); const { CATEGORIES } = window.RC_DATA; const enter = (id) => { clearTimeout(closeT.current); setOpen(id); }; const leave = () => { closeT.current = setTimeout(() => { setOpen(null); setHoveredSeg(null); }, 140); }; const enterSeg = (id) => { clearTimeout(segCloseT.current); setHoveredSeg(id); }; const leaveSeg = () => { segCloseT.current = setTimeout(() => setHoveredSeg(null), 80); }; const nav = CATEGORIES.slice(0, 5); const isActive = (slug) => currentRoute?.startsWith(`/categoria/${slug}`) || currentRoute?.startsWith('/tienda'); return ( {/* Top announce strip — OUTSIDE sticky header so it scrolls away */}
{/* Desktop: two-group layout (unchanged) */}
Envío gratis CABA/GBA 12 cuotas sin interés 15% OFF transferencia
{ e.preventDefault(); onNavigate('/reparaciones'); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}> Service { e.preventDefault(); onNavigate('/quienes-somos'); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}> Quiénes somos Tres Arroyos 456, Haedo
{/* Mobile: auto-scrolling marquee */}
{/* Main bar */}
{/* Mobile inline search — fills remaining space between logo and icons */}
{/* Desktop inline search — hidden on mobile via .hdr-search-icon rule */}
); }; // Mobile menu drawer — pro version const MobileMenu = ({ open, onClose, onNavigate, anim = 'side' }) => { const { CATEGORIES } = window.RC_DATA; const [expanded, setExpanded] = React.useState(null); // Reset accordion when drawer closes React.useEffect(() => { if (!open) setExpanded(null); }, [open]); if (!open) return null; const go = (path) => { onNavigate(path); onClose(); }; const toggle = (id) => setExpanded(prev => prev === id ? null : id); const isTop = anim === 'top'; const drawerStyle = isTop ? { position: 'absolute', top: 0, left: 0, right: 0, height: 'min(85vh, 720px)', background: 'var(--surface)', display: 'flex', flexDirection: 'column', boxShadow: '0 14px 32px rgba(11,18,32,0.20)', animation: 'mm-slide-down .3s cubic-bezier(.2,.7,.2,1)', borderBottomLeftRadius: 18, borderBottomRightRadius: 18, overflow: 'hidden', } : { position: 'absolute', top: 0, right: 0, bottom: 0, width: 'min(440px, 85vw)', background: 'var(--surface)', display: 'flex', flexDirection: 'column', boxShadow: '-12px 0 36px rgba(11,18,32,0.18)', animation: 'mm-slide .28s cubic-bezier(.2,.7,.2,1)', }; return (
{/* Backdrop */}
{/* Drawer */} {/* Animations */}
); }; // Inline desktop search — pill input that lives in the header, dropdown of // product matches appears directly below as the user types. Replaces the old // search icon → modal flow on desktop. Hidden on mobile (mobile keeps the // "hdr-mobile-search-inline" button + SearchModal). const InlineSearch = ({ onNavigate, className = '' }) => { const { PRODUCTS, ARS } = window.RC_DATA; const [q, setQ] = React.useState(''); const [focused, setFocused] = React.useState(false); const rootRef = React.useRef(null); const inputRef = React.useRef(null); React.useEffect(() => { if (!focused) return; const onDown = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setFocused(false); }; const onKey = (e) => { if (e.key === 'Escape') { setFocused(false); inputRef.current?.blur(); } }; document.addEventListener('mousedown', onDown); document.addEventListener('keydown', onKey); return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); }; }, [focused]); const results = q.trim().length > 0 ? PRODUCTS.filter((p) => (p.name + ' ' + p.brand + ' ' + p.sku).toLowerCase().includes(q.toLowerCase())).slice(0, 5) : []; const showDropdown = focused && q.trim().length > 0; return (
setQ(e.target.value)} onFocus={() => setFocused(true)} placeholder="Buscar productos" style={{ flex: 1, minWidth: 0, fontSize: 13, color: 'var(--ink)', border: 'none', outline: 'none', background: 'transparent' }} />
{showDropdown &&
{results.length === 0 ?
Sin resultados para "{q}".
: results.map((p, idx) => )}
}
); }; // Search modal — variant-driven (different layouts for desktop & mobile) const SearchModal = ({ open, onClose, onNavigate, desktopStyle = 'centered', mobileStyle = 'modal' }) => { const [q, setQ] = React.useState(''); const { PRODUCTS } = window.RC_DATA; // Track viewport so we can switch between desktop & mobile variants live. const [isMobile, setIsMobile] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < 768); React.useEffect(() => { const onR = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); // Reset query on close. React.useEffect(() => { if (!open) setQ(''); }, [open]); const results = q.trim().length > 0 ? PRODUCTS.filter(p => (p.name + ' ' + p.brand + ' ' + p.sku).toLowerCase().includes(q.toLowerCase())).slice(0, 8) : []; if (!open) return null; const variant = isMobile ? mobileStyle : desktopStyle; // ─────────────────────────── shared bits ──────────────────────────────── const popularTerms = ['Karma K-160', 'Kärcher HD', 'IPC 3070', 'Pico turbo 015', 'Manguera 10m', 'Bomba AR']; const InputBar = ({ dark, mono, big }) => (
setQ(e.target.value)} placeholder={mono ? 'Search products, brands, SKUs…' : 'Buscar hidrolavadoras, repuestos, marcas…'} style={{ flex: 1, fontSize: big ? 19 : 17, border: 'none', outline: 'none', background: 'transparent', color: dark ? '#fff' : 'var(--ink)', fontFamily: mono ? "'JetBrains Mono', ui-monospace, monospace" : undefined, letterSpacing: mono ? '-0.01em' : undefined }} />
); const PopularChips = ({ dark, label = 'Populares' }) => (
{label}
{popularTerms.map((t) => )}
); const ResultRow = ({ p, dark }) => ; const EmptyState = ({ dark }) =>
Sin resultados para "{q}".
; // ─────────────────────────── desktop variants ─────────────────────────── if (!isMobile) { // dark "command palette" (Cmd-K) variant if (desktopStyle === 'command') { return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
↑↓ navegar↵ abriresc cerrar
); } // full-width top bar (Algolia-style) if (desktopStyle === 'fullbar') { return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
); } // big two-column variant (results left, popular/categories right) if (desktopStyle === 'bigsplit') { const { CATEGORIES } = window.RC_DATA; return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
Categorías
{CATEGORIES.map((c) => )}
); } // default — centered modal return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
); } // ─────────────────────────── mobile variants ──────────────────────────── // fullscreen takeover if (mobileStyle === 'fullscreen') { return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
); } // bottom sheet — slides up from the bottom if (mobileStyle === 'bottomsheet') { return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
); } // dropdown — drops from below the header, no backdrop card padding if (mobileStyle === 'dropdown') { return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
); } // default mobile modal — same as desktop centered, but tighter return (
{q.trim().length === 0 && } {results.map((p) => )} {q.trim().length > 0 && results.length === 0 && }
); }; Object.assign(window, { HeaderBar, MobileMenu, SearchModal, InlineSearch, verTodosLabel });