const { useState, useEffect, useRef, createContext, useContext } = React;
// — i18n ————————————————————————————————————————————————
const I18N = {
en: {
eyebrow: 'Operational blueprints',
title: 'Systems in motion',
subtitle: 'Diagnostics and operating systems for marketing, sales, operations, delivery, and AI risk — built after mapping the process, not before.',
all: 'All',
selectSystem: 'Select system',
selectIndustry: 'Select industry',
showing: 'Showing',
of: 'of',
clearSelection: 'Clear selection',
noResults: 'No systems match those filters.',
noResultsHint: 'Try clearing one of the dropdowns to see more blueprints.',
reset: 'Reset filters',
metaRow: 'Process · Risk · Automation',
detail: {
back: 'Back to all systems',
overview: 'Overview',
challenge: 'The challenge',
approach: 'Our approach',
outcomes: 'Outcomes',
stack: 'Tools in play',
duration: 'Engagement',
zone: 'Location',
cta: 'Book a diagnostic call',
ctaSub: 'Every build starts with a diagnostic. We don\'t propose tooling before mapping the process.',
},
ctaEyebrow: 'The method',
ctaTitle: ['Your process ', '+', ' our orchestration ', '=', ' scalable operations.'],
ctaPrimary: 'Book a diagnostic call',
ctaSecondary: 'See how diagnosis works →',
sys: {
Diagnostic: 'Diagnostic',
Marketing: 'Marketing',
Sales: 'Sales',
Operations: 'Operations',
Delivery: 'Delivery',
'Cyber Security': 'Cyber Security',
WhatsApp: 'WhatsApp',
'CRM / Sheets': 'CRM / Sheets',
},
ind: {
'B2B Services': 'B2B Services',
'Aesthetic Clinic': 'Aesthetic Clinic',
'Real Estate': 'Real Estate',
Education: 'Education',
Dental: 'Dental',
Healthcare: 'Healthcare',
},
cta: {
diagnostic: 'Explore diagnostic',
system: 'Explore system',
pipeline: 'Explore pipeline',
flow: 'Explore flow',
review: 'Explore review',
},
ctaPerCase: {
1: 'Want clarity before automating?',
2: 'Want your leads to arrive with context, not just questions?',
3: 'Want your pipeline to stop living in WhatsApp?',
4: 'Want to operate with control without burdening your team?',
5: 'Want delivery not to end when the appointment ends?',
6: 'Want to automate without opening unnecessary risks?',
},
},
es: {
eyebrow: 'Blueprints operativos',
title: 'Sistemas en movimiento',
subtitle: 'Diagnósticos y sistemas operativos para marketing, ventas, operaciones, delivery y riesgo de IA — construidos después de mapear el proceso, no antes.',
all: 'Todos',
selectSystem: 'Seleccionar sistema',
selectIndustry: 'Seleccionar industria',
showing: 'Mostrando',
of: 'de',
clearSelection: 'Limpiar selección',
noResults: 'Ningún sistema coincide con esos filtros.',
noResultsHint: 'Prueba a limpiar uno de los menús para ver más blueprints.',
reset: 'Restablecer filtros',
metaRow: 'Proceso · Riesgo · Automatización',
detail: {
back: 'Volver a todos los sistemas',
overview: 'Visión general',
challenge: 'El reto',
approach: 'Nuestro enfoque',
outcomes: 'Resultados',
stack: 'Herramientas en juego',
duration: 'Engagement',
zone: 'Ubicación',
cta: 'Agenda una llamada diagnóstica',
ctaSub: 'Todo build empieza con diagnóstico. No proponemos tooling antes de mapear el proceso.',
},
ctaEyebrow: 'El método',
ctaTitle: ['Tu proceso ', '+', ' nuestra orquestación ', '=', ' operaciones que escalan.'],
ctaPrimary: 'Agenda una llamada diagnóstica',
ctaSecondary: 'Conoce cómo funciona el diagnóstico →',
sys: {
Diagnostic: 'Diagnóstico',
Marketing: 'Marketing',
Sales: 'Ventas',
Operations: 'Operaciones',
Delivery: 'Delivery',
'Cyber Security': 'Cyber Security',
WhatsApp: 'WhatsApp',
'CRM / Sheets': 'CRM / Sheets',
},
ind: {
'B2B Services': 'Servicios B2B',
'Aesthetic Clinic': 'Clínica estética',
'Real Estate': 'Inmobiliario',
Education: 'Educación',
Dental: 'Dental',
Healthcare: 'Salud',
},
cta: {
diagnostic: 'Explorar diagnóstico',
system: 'Explorar sistema',
pipeline: 'Explorar pipeline',
flow: 'Explorar flujo',
review: 'Explorar revisión',
},
ctaPerCase: {
1: '¿Quieres claridad antes de automatizar?',
2: '¿Quieres que tus leads lleguen con contexto, no solo con preguntas?',
3: '¿Quieres que tu pipeline deje de vivir en WhatsApp?',
4: '¿Quieres operar con control sin complicar al equipo?',
5: '¿Quieres que la entrega no termine cuando termina la cita?',
6: '¿Quieres automatizar sin abrir riesgos innecesarios?',
},
},
};
const LangCtx = createContext({ lang: 'es', t: I18N.es });
const useLang = () => useContext(LangCtx);
// — Filter options ——————————————————————————————————————
const SYSTEMS = ['Diagnostic', 'Marketing', 'Sales', 'Operations', 'Delivery', 'Cyber Security', 'WhatsApp', 'CRM / Sheets'];
const INDUSTRIES = ['B2B Services', 'Aesthetic Clinic', 'Real Estate', 'Education', 'Dental', 'Healthcare'];
// Areas — primary badge label
const AREA = {
Diagnostic: { en: 'DIAGNOSTIC', es: 'DIAGNÓSTICO' },
Marketing: { en: 'MARKETING', es: 'MARKETING' },
Sales: { en: 'SALES', es: 'VENTAS' },
Operations: { en: 'OPERATIONS', es: 'OPERACIONES' },
Delivery: { en: 'DELIVERY', es: 'DELIVERY' },
'Cyber Security': { en: 'CYBER SECURITY', es: 'CYBER SECURITY' },
};
// Secondary badge — short label
const SYS_BADGE = {
1: { en: 'OPERATIONAL MAPPING', es: 'MAPEO OPERATIVO' },
2: { en: 'WHATSAPP CAPTURE', es: 'CAPTACIÓN WHATSAPP' },
3: { en: 'WHATSAPP PIPELINE', es: 'PIPELINE WHATSAPP' },
4: { en: 'LIGHT CRM', es: 'CRM LIGERO' },
5: { en: 'POST-SERVICE', es: 'POST-SERVICIO' },
6: { en: 'RISK REVIEW', es: 'RISK REVIEW' },
};
const STUDIES = [
// 1 — Diagnostic — B2B services, Del Valle CDMX
{
id: 1,
area: 'Diagnostic',
industry: 'B2B Services',
system: 'Diagnostic',
zone: { en: 'Del Valle, Mexico City', es: 'Del Valle, Ciudad de México' },
title: { en: 'Operational map for a company that grew faster than its processes', es: 'Mapa operativo para una empresa que creció más rápido que sus procesos' },
description: { en: 'A diagnostic to clarify how leads come in, who handles them, where information gets lost, and which systems must exist before automating.', es: 'Un diagnóstico para ordenar cómo entran los leads, quién los atiende, dónde se pierde información y qué sistemas deben existir antes de automatizar.' },
ctaKey: 'diagnostic',
},
// 2 — Marketing — Aesthetic clinic, Laureles Medellín
{
id: 2,
area: 'Marketing',
industry: 'Aesthetic Clinic',
system: 'WhatsApp',
zone: { en: 'Laureles, Medellín', es: 'Laureles, Medellín' },
title: { en: 'Lead-capture flow for prospects asking about treatments and disappearing', es: 'Flujo de captación para leads que preguntan por tratamientos y desaparecen' },
description: { en: 'A conversational system that receives inquiries, identifies real interest, answers initial questions, and structures every prospect before handing them to the team.', es: 'Un sistema conversacional que recibe consultas, identifica interés real, responde dudas iniciales y ordena cada prospecto antes de pasarlo al equipo.' },
ctaKey: 'system',
},
// 3 — Sales — Real estate, Carretera a El Salvador, Guatemala
{
id: 3,
area: 'Sales',
industry: 'Real Estate',
system: 'WhatsApp',
zone: { en: 'Carretera a El Salvador, Guatemala', es: 'Carretera a El Salvador, Guatemala' },
title: { en: 'Commercial pipeline for real estate prospects arriving by chat', es: 'Pipeline comercial para prospectos inmobiliarios que llegan por chat' },
description: { en: 'A flow that classifies buyers, renters, and investors by budget, area, urgency, and the next commercial action.', es: 'Un flujo que clasifica compradores, rentistas e inversionistas por presupuesto, zona, urgencia y siguiente acción comercial.' },
ctaKey: 'pipeline',
},
// 4 — Operations — Private academy, Núñez Buenos Aires
{
id: 4,
area: 'Operations',
industry: 'Education',
system: 'CRM / Sheets',
zone: { en: 'Núñez, Buenos Aires', es: 'Núñez, Buenos Aires' },
title: { en: 'Operational dashboard to coordinate students, payments, schedules, and follow-up', es: 'Panel operativo para coordinar alumnos, pagos, horarios y seguimiento' },
description: { en: 'A simple control layer so administration can see each student\'s status without depending on scattered messages between coordination, sales, and teachers.', es: 'Una capa de control simple para que administración vea el estado de cada alumno sin depender de mensajes sueltos entre coordinación, ventas y profesores.' },
ctaKey: 'system',
},
// 5 — Delivery — Dental, Providencia Guadalajara
{
id: 5,
area: 'Delivery',
industry: 'Dental',
system: 'WhatsApp',
zone: { en: 'Providencia, Guadalajara', es: 'Providencia, Guadalajara' },
title: { en: 'Post-consultation follow-up for patients who need continuity', es: 'Seguimiento post-consulta para pacientes que necesitan continuidad' },
description: { en: 'A post-visit flow that accompanies the patient, reminds them of next steps, and surfaces questions before treatment continuity is lost.', es: 'Un flujo posterior a la visita que acompaña al paciente, recuerda próximos pasos y detecta dudas antes de que se pierda la continuidad del tratamiento.' },
ctaKey: 'flow',
},
// 6 — Cyber Security — Healthcare business, Chapinero Bogotá
{
id: 6,
area: 'Cyber Security',
industry: 'Healthcare',
system: 'Cyber Security',
zone: { en: 'Chapinero, Bogotá', es: 'Chapinero, Bogotá' },
title: { en: 'Risk review before connecting AI to sensitive data', es: 'Revisión de riesgo antes de conectar IA con datos sensibles' },
description: { en: 'A pre-implementation review to surface accesses, exposed data, critical dependencies, and control points before scaling automation.', es: 'Una revisión pre-implementación para detectar accesos, datos expuestos, dependencias críticas y puntos de control antes de escalar automatización.' },
ctaKey: 'review',
},
];
// — Infinity glyph ——————————————————————————————————————
function InfinityMark({ className = '', size = 14 }) {
return (
);
}
// — Language toggle ————————————————————————————————————
function LangToggle({ lang, setLang }) {
return (