// ProductosTabs.jsx — 7 tabs × 19 sub-familias (estructura real Neugreen) const { useState: useStateTabs } = React; const TAB_DATA = [ { id: 'convencional', label: 'Limpieza convencional', short: '01', accent: 'blue', eyebrow: '01 · Limpieza convencional', title: 'Soluciones profesionales para espacios y operaciones.', body: 'Línea base de químicos para limpieza cotidiana. Cumplimiento COFEPRIS, NOM-016 y FDA/EPA cuando aplica. Disponible de 1L a 200L y a granel.', sub: [ { name: 'Limpieza general', desc: 'Multiusos, desengrasantes y limpiadores para superficies, pisos, vidrios y baños.', sector: 'Oficinas, comercios y operación cotidiana.' }, { name: 'Lavandería', desc: 'Detergentes, blanqueadores y suavizantes para textil de alto volumen.', sector: 'Hotelería, hospitales y lavanderías industriales.' }, { name: 'Cocina', desc: 'Desengrasantes, desincrustantes y limpiadores compatibles con grado alimenticio.', sector: 'Cocinas industriales y procesos alimenticios.' }, { name: 'Autos', desc: 'Shampoo, ceras y limpiadores para detallado vehicular y flota.', sector: 'Autolavados, agencias y flotas.' }, ], }, { id: 'enzimatica', label: 'Limpieza enzimática', short: '02', accent: 'green', eyebrow: '02 · Limpieza enzimática especializada', title: 'Tecnología que limpia en profundidad, no enmascara.', body: 'Formulaciones a base de enzimas y microorganismos seleccionados. Reduce DBO/DQO documentada en cliente, sin químicos agresivos ni residuos en agua residual.', sub: [ { name: 'Limpieza general enzimática', desc: 'Limpiadores con enzimas que degradan materia orgánica residual.', sector: 'Superficies con biocarga alta y proceso alimenticio.' }, { name: 'Detergentes enzimáticos para lavandería', desc: 'Quita manchas proteicas, grasas y sangre en una sola dosis.', sector: 'Hospitales, restaurantes y procesos industriales.' }, { name: 'Eliminadores de olores', desc: 'Neutralización enzimática de moléculas orgánicas (H₂S, mercaptanos, amoníaco).', sector: 'Baños públicos, drenajes y áreas de proceso.' }, { name: 'Bacterias para trampas de grasa', desc: 'Bioaumentación dirigida. Mantiene PTARs y trampas operando sin químico agresivo.', sector: 'PTARs municipales, industriales y cocinas con trampa.' }, ], }, { id: 'desinfeccion', label: 'Desinfección', short: '03', accent: 'blue', eyebrow: '03 · Desinfección', title: 'Desde uso convencional hasta aplicación industrial.', body: 'Familia completa de desinfectantes con cobertura regulatoria. Selección por concentración, ingrediente activo y nivel de criticidad.', note: 'Disponibles en altas concentraciones y listos para usar (LPU).', sub: [ { name: 'Desinfectantes convencionales', desc: 'Cuaternarios, peroxídicos y clorados con cumplimiento COFEPRIS.', sector: 'Uso diario en comercios, oficinas y operación general.' }, { name: 'Desinfectantes especializados', desc: 'Sanitizantes grado alimenticio y áreas críticas con respaldo FDA/EPA.', sector: 'Procesos regulados, áreas críticas y grado farmacéutico.' }, { name: 'Desinfectantes industriales', desc: 'Alta concentración para dosificación automatizada en procesos.', sector: 'PTAR, torres de enfriamiento y procesos industriales.' }, ], }, { id: 'bodycare', label: 'Body Care', short: '04', accent: 'green', eyebrow: '04 · Body Care', title: 'Línea de cuidado personal para marca privada y hotelería.', body: 'Formulaciones balanceadas (pH 5.5) con fragancia premium. Disponibles como amenidad hotelera o producto consumer bajo marca privada.', sub: [ { name: 'Jabones corporales', desc: 'Surfactantes suaves con fragancia premium y respaldo dermatológico.', sector: 'Hotelería, gimnasios y marca privada residencial.' }, { name: 'Shampoo corporal', desc: 'Formulación pH 5.5 sin sulfatos agresivos. Amenidad o consumer.', sector: 'Amenidad hotelera o marca privada premium.' }, { name: 'Acondicionador', desc: 'Misma fragancia que el shampoo, con perfil de cabello variable.', sector: 'Línea completa hotelera o consumer.' }, { name: 'Cremas corporales', desc: 'Hidratación con activos naturales y fragancia coordinada.', sector: 'Amenidad premium y marca privada.' }, ], }, { id: 'mascotas', label: 'Mascotas', short: '05', accent: 'green', eyebrow: '05 · Mascotas', title: 'Cuidado especializado para tus animales.', body: 'Formulaciones específicas para piel animal, sin tensoactivos agresivos. Disponible como marca propia o privada.', sub: [ { name: 'Shampoo para mascotas', desc: 'Formulación específica para piel canina y equina, pH neutro.', sector: 'Estéticas caninas, criaderos y consumer.' }, ], }, { id: 'aroma', label: 'Aroma Experience', short: '06', accent: 'blue', eyebrow: '06 · Aroma Experience', title: 'Aromatización profesional de espacios comerciales e institucionales.', body: 'No solo perfumamos: combinamos enzimas neutralizadoras con fragancias profesionales. Equipo + aroma + mantenimiento, en venta o modalidad mensual.', sub: [ { name: 'Fragancias', desc: 'Aromas profesionales en concentración técnica: cítricos, florales, amaderados, marca propia exclusiva.', sector: 'Hoteles, lobbies, retail y espacios comerciales.' }, { name: 'Difusores de aroma', desc: 'Equipos de aromatización continua: nebulizadores, dispersores eléctricos, sistemas centralizados.', sector: 'Lobbies, áreas comunes y baños de alto tráfico.' }, { name: 'Servicio de aromatización de espacios', desc: 'Venta de equipo o modalidad mensual con servicio incluido (equipo + aroma + mantenimiento).', sector: 'Cadenas, hoteles boutique y operación institucional.' }, ], }, { id: 'jarciera', label: 'Jarciería e institucional', short: '07', accent: 'blue', eyebrow: '07 · Jarciería e institucional', title: 'Todo el material de limpieza para operación profesional.', body: 'Inventario activo en planta SLP. Cubre 100 % de la canasta operativa: químicos, accesorios, consumibles, protección y desechables.', sub: [ { name: 'Cepillos y fibras', desc: 'Cepillos industriales, fibras verdes/azules/blancas, esponjas técnicas.', sector: 'Cocina, baños, mantenimiento general.' }, { name: 'Cestos y contenedores', desc: 'Cestos de basura, contenedores especializados y separadores de residuos.', sector: 'Oficinas, comercios y operación institucional.' }, { name: 'Envases y atomizadores', desc: 'Garrafas, botellas, atomizadores y dispensadores para operación y marca privada.', sector: 'Re-envase y dosificación manual.' }, { name: 'General', desc: 'Trapeadores, mopas, jaladores, hojas y consumibles de uso diario.', sector: 'Limpieza general y mantenimiento.' }, { name: 'Limpieza de pisos', desc: 'Cubetas, exprimidores y sistemas de mopa con presión.', sector: 'Operación de housekeeping y limpieza profesional.' }, { name: 'Papel y desechables', desc: 'Papel sanitario, toalla en rollo, servilleta y jabón en hojas.', sector: 'Sanitarios, comedores y áreas comunes.' }, { name: 'Plásticos y accesorios', desc: 'Bolsas, fundas, contenedores plásticos y conos de seguridad.', sector: 'Operación general y seguridad.' }, { name: 'Protección y uso personal', desc: 'Guantes, cubrebocas, lentes, mandiles y botas industriales.', sector: 'Operación con normativa de seguridad.' }, { name: 'Textiles de limpieza', desc: 'Microfibras, paños técnicos y toallas industriales.', sector: 'Housekeeping y limpieza fina.' }, { name: 'WC y sanitarios', desc: 'Desinfectantes específicos para WC, escobillas y dispensadores sanitarios.', sector: 'Baños públicos y de alta rotación.' }, ], }, ]; // ──────────────────────────────────────────────────────────── // Subfamilia accordion card // ──────────────────────────────────────────────────────────── function SubCard({ s, accent, isOpen, onToggle }) { const isGreen = accent === 'green'; return ( ); } // ──────────────────────────────────────────────────────────── // Tab panel // ──────────────────────────────────────────────────────────── function TabPanel({ tab }) { const isGreen = tab.accent === 'green'; const [open, setOpen] = useStateTabs(null); // Reset open state when tab changes React.useEffect(() => setOpen(null), [tab.id]); const colCount = tab.sub.length <= 1 ? 1 : (tab.sub.length <= 4 ? 2 : 3); return (
{/* Heading row */}
{tab.eyebrow}

{tab.title}

{tab.body}

{tab.sub.length} sub-familia{tab.sub.length === 1 ? '' : 's'} · clic para ver alcance
{tab.note && (
Nota: {tab.note}
)} {/* Sub-family accordion grid */}
{tab.sub.map((s, i) => ( setOpen(open === i ? null : i)} /> ))}
{/* CTA row */}
¿Te interesa esta línea?
Te enviamos cotización con SKU, MOQ y ficha técnica en menos de 24 h hábiles.
Solicitar cotización de {tab.label}
); } // ──────────────────────────────────────────────────────────── // Root // ──────────────────────────────────────────────────────────── function ProductosTabs() { const initial = (() => { if (typeof window === 'undefined') return 'convencional'; const ids = TAB_DATA.map(t => t.id); const hash = (window.location.hash || '').replace('#', ''); const params = new URLSearchParams(window.location.search); const q = params.get('tab') || params.get('linea'); return ids.includes(hash) ? hash : (ids.includes(q) ? q : 'convencional'); })(); const [active, setActive] = useStateTabs(initial); const tab = TAB_DATA.find(t => t.id === active); return (
{/* Tab strip — wraps to multiple rows when narrow (never scroll) */}
{TAB_DATA.map(t => { const isActive = t.id === active; const isGreen = t.accent === 'green'; return ( ); })}
); } // Responsive styles injected once via a global style tag if (typeof document !== 'undefined' && !document.getElementById('ng-tabs-responsive')) { const s = document.createElement('style'); s.id = 'ng-tabs-responsive'; s.textContent = ` @media (max-width: 768px) { .ng-tab-heading { grid-template-columns: 1fr !important; gap: 16px !important; } .ng-tab-heading > div:last-child { text-align: left !important; } .ng-subfam-grid { grid-template-columns: 1fr !important; } .ng-tablist button { padding: 12px 14px !important; font-size: 14px !important; min-height: 44px !important; } .ng-tab-cta-row { flex-direction: column !important; padding: 20px 16px !important; } .ng-tab-cta-btn { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } } `; document.head.appendChild(s); } window.ProductosTabs = ProductosTabs;