// Sectores.jsx — 3×3 grid of industries served + drawer lateral con one pagers const { useState: useSectoresState, useEffect: useSectoresEffect } = React; /* ── Inline SVG icons ──────────────────────────────────────── */ const IcoX = () => ; const IcoExternal = () => ; const IcoDownload = () => ; const IcoArrow = () => ; const IcoMsg = () => ; /* ── Sector drawer config ──────────────────────────────────── */ const SECTOR_DATA = { Alimenticio: { drawerTitle: 'Food Service', desc: 'Químicos, dosificación automática SEKO y jarciería para restaurantes, comedores y cadenas de comida rápida. Un solo proveedor para toda la operación.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-alimenticio.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'alimenticio' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-alimenticio.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'alimenticio' }, { type: 'link', label: 'Ver todos los productos', href: 'productos.html' }, ], }, Hospitalidad: { drawerTitle: 'Hotelería', desc: 'Lavandería institucional, cocina, habitaciones, body care y aromatización de espacios. Todo lo que necesita una operación hotelera en un solo proveedor.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-hospitalidad.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'hospitalidad' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-hospitalidad.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'hospitalidad' }, { type: 'link', label: 'Ver todos los productos', href: 'productos.html' }, ], }, Industrial: { drawerTitle: 'Industrial', desc: 'Dos propuestas según tu necesidad: limpieza y desinfección en naves industriales, o tratamiento de agua y procesos industriales avanzados.', acciones: [ { type: 'primary-alt-row', items: [ { label: 'Limpieza en planta', onClick: () => window.open('assets/docs/onepager-industrial-limpieza.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'industrial-limpieza' }, { label: 'Tratamiento de agua', onClick: () => window.open('assets/docs/onepager-industrial-agua.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'industrial-agua' }, ]}, { type: 'download', label: 'Descargar — Limpieza en planta', href: 'assets/docs/onepager-industrial-limpieza.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'industrial-limpieza' }, { type: 'download', label: 'Descargar — Tratamiento de agua', href: 'assets/docs/onepager-industrial-agua.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'industrial-agua' }, { type: 'link', label: 'Ver soluciones industriales', href: 'industrial.html' }, ], }, Manufactura: { drawerTitle: 'Manufactura y Marca Privada', desc: 'Desarrollamos y fabricamos tu línea de productos. Formulación, producción, envasado y etiquetado en planta propia SLP. Tú pones la marca, nosotros ponemos todo lo demás.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-manufactura.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'manufactura' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-manufactura.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'manufactura' }, { type: 'link', label: 'Conocer el proceso →', href: 'manufactura.html' }, ], }, Educativo: { drawerTitle: 'Sector Educativo', desc: 'Productos de limpieza, jarciería, papel y desechables para escuelas, colegios y universidades. Surtido completo, entrega puntual y pedido recurrente mensual sin complicaciones.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-educativo.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'educativo' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-educativo.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'educativo' }, { type: 'link', label: 'Ver todos los productos', href: 'productos.html' }, ], }, Salud: { drawerTitle: 'Salud', desc: 'Desinfectantes BEIZUM® certificados, sanitizantes, lavandería clínica y dosificación automática SEKO para clínicas, consultorios y centros médicos. Fichas técnicas y HDS incluidas.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-salud.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'salud' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-salud.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'salud' }, { type: 'link', label: 'Ver productos →', href: 'productos.html' }, ], }, Comercial: { drawerTitle: 'Comercial', desc: 'Limpieza, desinfección y aromatización profesional para plazas comerciales, edificios de oficinas y espacios de alto tráfico. Imagen impecable en cada área del espacio.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-comercial.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'comercial' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-comercial.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'comercial' }, { type: 'link', label: 'Ver todos los productos', href: 'productos.html' }, ], }, 'Oficinas y Espacios de Trabajo': { drawerTitle: 'Oficinas y Espacios de Trabajo', desc: 'Limpieza, sanitarios, aromatización y jarciería para oficinas, coworkings, PyMES y centros de negocios. Pedido recurrente sin complicaciones.', acciones: [ { type: 'primary', label: 'Ver One Pager', onClick: () => window.open('assets/docs/onepager-oficinas.html', '_blank'), 'data-track': 'onepager-view', 'data-sector': 'oficinas' }, { type: 'download', label: 'Descargar PDF', href: 'assets/docs/onepager-oficinas.pdf', hasPdf: false, 'data-track': 'onepager-download', 'data-sector': 'oficinas' }, { type: 'link', label: 'Ver todos los productos', href: 'productos.html' }, ], }, Distribuidores: { drawerTitle: 'Distribuidores', desc: 'Programa de distribución con margen comercial, soporte técnico, material de ventas y manufactura de marca privada disponible.', acciones: [ { type: 'primary', label: 'Conocer el programa', href: 'manufactura.html' }, { type: 'link', label: 'Hablar con un asesor', href: 'contacto.html' }, ], }, }; /* ── Drawer action renderer ─────────────────────────────────── */ function DrawerAccion({ a }) { const baseBtn = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, width: '100%', borderRadius: 8, padding: '11px 16px', fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', boxSizing: 'border-box', textDecoration: 'none', }; if (a.type === 'primary-alt-row') { return (

{a.items.map((it, i) => ( ))}

); } if (a.type === 'primary') { if (a.onClick) { return ( ); } return ( {a.label} ); } if (a.type === 'download') { if (!a.hasPdf) return null; return ( { e.currentTarget.style.borderColor = '#0055b8'; e.currentTarget.style.color = '#0055b8'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = '#E2E8F2'; e.currentTarget.style.color = '#0B1B2B'; }} >{a.label} ); } if (a.type === 'link') { return ( e.currentTarget.style.textDecoration = 'underline'} onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'} >{a.label} ); } return null; } /* ── Main component ─────────────────────────────────────────── */ function Sectores() { const [activeSector, setActiveSector] = useSectoresState(null); // Escape key useSectoresEffect(() => { const handler = (e) => { if (e.key === 'Escape') setActiveSector(null); }; document.addEventListener('keydown', handler); return () => document.removeEventListener('keydown', handler); }, []); // Body scroll lock useSectoresEffect(() => { document.body.style.overflow = activeSector ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [activeSector]); const sectores = [ { name: 'Alimenticio', icon: }, { name: 'Manufactura', icon: }, { name: 'Hospitalidad', icon: }, { name: 'Educativo', icon: }, { name: 'Salud', icon: }, { name: 'Comercial', icon: }, { name: 'Industrial', icon: }, { name: 'Oficinas y Espacios de Trabajo', icon: }, { name: 'Distribuidores', icon: }, ]; const activeData = activeSector ? SECTOR_DATA[activeSector] : null; const activeIcon = activeSector ? sectores.find(s => s.name === activeSector)?.icon : null; return ( <>

Sectores que atendemos

Donde la operación no puede parar.

Nueve verticales con dosis, normativa y soporte adaptados.

Cobertura nacional · base SLP

{/* Grid */}

{sectores.map((s, i) => ( ))}

{/* ── Overlay ─────────────────────────────────────────── */}

setActiveSector(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(11,27,43,0.55)', zIndex: 998, opacity: activeSector ? 1 : 0, pointerEvents: activeSector ? 'auto' : 'none', transition: 'opacity 280ms ease-out', }} /> {/* ── Drawer ──────────────────────────────────────────── */}

{activeData && ( <> {/* Header */}

{activeIcon && (

{React.cloneElement(activeIcon, { width: 20, height: 20, stroke: '#fff' })}

)} {activeData.drawerTitle}

{/* Body */}

{activeData.desc}

{activeData.acciones.map((a, i) => ( ))}

{/* Footer */}

e.currentTarget.style.textDecoration = 'underline'} onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'} > ¿Preguntas? Escríbenos por WhatsApp →

)}

); } window.Sectores = Sectores;