/* ESCENARIOS DE IMPLEMENTACIÓN — software personalizado B2B */
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

const ICONS = {
  health: <><path d="M19 14c1.5-1.5 3-3.2 3-5.5A4.5 4.5 0 0 0 17.5 4c-1.4 0-2.7.7-3.5 1.7A4.6 4.6 0 0 0 10.5 4 4.5 4.5 0 0 0 6 8.5C6 13 14 19 14 19s1.1-.8 2.5-2"/><path d="M3 12h4l2-4 3 8 2-4h7"/></>,
  restaurant: <><path d="M3 2v7c0 1.7 1.3 3 3 3s3-1.3 3-3V2M6 2v20M21 15V2c-3 1-5 3.5-5 7v3h5M21 12v10"/></>,
  company: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="8.5" y="14" width="7" height="7" rx="1"/><path d="M6.5 10v2h11v-2M12 12v2"/></>,
  retail: <><path d="M3 9l2-6h14l2 6M5 13v8h14v-8"/><path d="M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0M9 21v-6h6v6"/></>,
  alert: <><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 17h.01"/></>,
  analyze: <><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4M11 8v6M8 11h6"/></>,
  blocks: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 17.5h7M17.5 14v7"/></>,
  impact: <><path d="M3 3v18h18"/><path d="m7 16 4-5 3 3 5-7"/><path d="M15 7h4v4"/></>,
  calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></>,
  database: <><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></>,
  zap: <><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></>,
  dashboard: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 17v-5M12 17V7M16 17v-8"/></>,
  workflow: <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h4a4 4 0 0 1 4 4v5M15 18h-4a4 4 0 0 1-4-4V9"/></>,
  report: <><path d="M6 2h9l5 5v15H6z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></>,
  check: <><path d="m5 12 4 4L19 6"/></>,
  arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
};

const Icon = ({ name, size = 20, className = '' }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{ICONS[name] || ICONS.blocks}</svg>
);

const implementationScenarios = [
  { id:'clinicas', industry:'Salud', title:'Clínica con múltiples sucursales', icon:'health', accent:'#16a36a', soft:'#edf9f4',
    situation:'Una clínica con varias sucursales necesita centralizar la gestión de citas, expedientes médicos y comunicación con los pacientes. El uso de herramientas separadas genera trabajo manual, información duplicada y poca visibilidad para la administración.',
    challenges:['Información fragmentada','Procesos manuales en recepción','Coordinación entre sucursales','Visibilidad administrativa limitada'],
    solutionComponents:[['Plataforma web personalizada','blocks','Base central de la operación'],['Agenda centralizada','calendar','Citas compartidas entre sedes'],['Recordatorios automatizados','zap','Comunicación sin tareas repetitivas'],['Expediente digital compartido','database','Historial disponible con permisos'],['Dashboard administrativo','dashboard','Visibilidad clara para dirección'],['Integraciones mediante APIs','workflow','Conexión con herramientas existentes'],['Reportes operativos','report','Información útil para decidir']],
    expectedImpact:[['Información centralizada','Los equipos acceden a una única fuente de información.'],['Menor trabajo manual','Las tareas repetitivas pueden automatizarse.'],['Mejor coordinación','Las sucursales trabajan sobre procesos conectados.'],['Mejor experiencia','Pacientes y médicos reciben una atención más fluida.'],['Mayor control operativo','La dirección obtiene más visibilidad sobre la operación.'],['Escalabilidad','La solución puede crecer junto con la clínica.']] },
  { id:'restaurantes', industry:'Restaurantes', title:'Cadena de restaurantes', icon:'restaurant', accent:'#c98213', soft:'#fff8e8',
    situation:'Una cadena de restaurantes necesita coordinar ventas, inventario, compras y operación entre sucursales. Los registros manuales y archivos separados dificultan conocer existencias, costos y necesidades de abastecimiento.',
    challenges:['Inventarios separados','Falta de trazabilidad','Compras reactivas','Reportes operativos tardíos'],
    solutionComponents:[['Sistema operativo personalizado','blocks','Procesos diseñados para la cadena'],['Inventario por sucursal','database','Existencias centralizadas'],['Integración con puntos de venta','workflow','Ventas conectadas con inventario'],['Automatización de compras','zap','Reglas para abastecimiento'],['Panel de indicadores','dashboard','Lectura clara de la operación'],['Gestión de insumos y recetas','report','Control de componentes y consumo'],['Análisis de demanda','analyze','Apoyo para planificar compras']],
    expectedImpact:[['Control de inventario','Mayor visibilidad sobre insumos y existencias.'],['Menos tareas repetitivas','Los registros manuales pueden reducirse.'],['Mejor coordinación','Compras, cocina y administración trabajan conectadas.'],['Compras organizadas','El abastecimiento sigue reglas y datos comunes.'],['Información oportuna','La operación puede consultarse en tiempo real.'],['Mejores decisiones','Los responsables cuentan con información más clara.']] },
  { id:'empresas', industry:'Empresas', title:'Empresa con sistemas desconectados', icon:'company', accent:'#2878c8', soft:'#eef6ff',
    situation:'Una empresa utiliza distintas plataformas para ventas, contabilidad, logística y soporte. La información debe copiarse entre sistemas, los reportes requieren consolidación manual y cada área trabaja con versiones diferentes de los datos.',
    challenges:['Sistemas aislados','Duplicación de información','Reportes manuales','Baja trazabilidad entre áreas'],
    solutionComponents:[['Hub de integración','workflow','Punto central para conectar sistemas'],['Sincronización mediante APIs','blocks','Datos consistentes entre plataformas'],['Automatización de flujos','zap','Acciones coordinadas entre áreas'],['Dashboard ejecutivo','dashboard','Indicadores en una sola vista'],['Alertas de inconsistencias','alert','Detección de datos que requieren revisión'],['Reportes automáticos','report','Consolidación sin copiado manual'],['Seguimiento de operaciones','database','Historial y trazabilidad']],
    expectedImpact:[['Datos consistentes','Las áreas consultan información centralizada.'],['Menos duplicación','Se reduce el copiado de datos entre herramientas.'],['Mejor coordinación','Los departamentos trabajan sobre flujos conectados.'],['Procesos más ágiles','Las tareas administrativas pueden automatizarse.'],['Visibilidad directiva','La dirección obtiene una lectura integral.'],['Base preparada para crecer','La arquitectura admite nuevas áreas e integraciones.']] },
  { id:'retail', industry:'Retail', title:'Comercio omnicanal', icon:'retail', accent:'#7957c5', soft:'#f5f1ff',
    situation:'Un comercio vende mediante tiendas físicas y canales digitales, pero cada canal administra inventario, precios y pedidos por separado. Esto limita la visibilidad del stock y complica devoluciones, promociones y atención al cliente.',
    challenges:['Inventario separado por canal','Precios inconsistentes','Devoluciones complejas','Información comercial fragmentada'],
    solutionComponents:[['Plataforma omnicanal','blocks','Operación común para todos los canales'],['Sincronización de inventario','database','Stock compartido y actualizado'],['Integración e-commerce y POS','workflow','Canales físicos y digitales conectados'],['Gestión central de precios','dashboard','Reglas comerciales desde un solo lugar'],['Flujo de devoluciones','report','Proceso consistente entre canales'],['Automatizaciones comerciales','zap','Acciones repetitivas coordinadas'],['IA cuando sea aplicable','analyze','Asistencia basada en datos disponibles']],
    expectedImpact:[['Inventario consistente','Los canales trabajan sobre existencias compartidas.'],['Ventas más ágiles','Los procesos comerciales tienen menos fricción.'],['Mejor experiencia','El cliente recibe atención coherente en cada canal.'],['Control comercial','Precios y promociones se administran centralmente.'],['Atención coordinada','Los equipos consultan el mismo contexto.'],['Nuevos canales','La solución puede extenderse con el crecimiento.']] },
];

const ProcessRail = () => <div className="scenario-method"><span>Así lo llevaríamos a cabo</span><ol className="scenario-process" aria-label="Proceso de Martz Forge"><li><span className="process-node">01</span><strong>Discovery</strong></li><li><span className="process-node">02</span><strong>Diseño</strong></li><li><span className="process-node">03</span><strong>Desarrollo</strong></li><li><span className="process-node">04</span><strong>Lanzamiento</strong></li><li><span className="process-node">05</span><strong>Evolución</strong></li></ol></div>;

const ScenarioPanel = ({ scenario }) => {
  const contactUrl = `contacto.html?servicio=${encodeURIComponent('Software personalizado')}&industria=${encodeURIComponent(scenario.industry)}&escenario=${encodeURIComponent(scenario.title)}`;
  return <div id={`panel-${scenario.id}`} role="tabpanel" aria-labelledby={`tab-${scenario.id}`} className="scenario-panel">
    <ProcessRail />
    <div className="scenario-layout">
      <div className="scenario-main">
        <span className="scenario-badge" style={{ color: scenario.accent, background: scenario.soft }}><Icon name={scenario.icon} size={17}/> Ejemplo ilustrativo · {scenario.industry}</span>
        <h2>{scenario.title}</h2>
        <section className="scenario-section"><h3><span className="scenario-title-icon"><Icon name="alert"/></span>Situación actual</h3><p>{scenario.situation}</p></section>
        <section className="scenario-section"><h3><span className="scenario-title-icon"><Icon name="analyze"/></span>Desafíos detectados</h3><div className="scenario-chips">{scenario.challenges.map(x=><span key={x}>{x}</span>)}</div></section>
        <section className="scenario-section"><h3><span className="scenario-title-icon"><Icon name="blocks"/></span>Solución propuesta</h3><div className="solution-grid">{scenario.solutionComponents.map(([title,icon,desc])=><article key={title} className="solution-component" tabIndex="0"><Icon name={icon}/><div><strong>{title}</strong><small>{desc}</small></div></article>)}</div></section>
      </div>
      <aside className="impact-panel"><div className="impact-heading"><span><Icon name="impact"/></span><div><h3>Impacto esperado</h3><p>Resultados que una implementación adaptada podría aportar a la operación.</p></div></div><div className="impact-grid">{scenario.expectedImpact.map(([title,desc])=><article key={title} className="impact-card"><Icon name="check"/><div><strong>{title}</strong><p>{desc}</p></div></article>)}</div><a href={contactUrl} className="btn btn-primary scenario-cta">Analizar una solución para mi empresa <Icon name="arrow" size={17}/></a><small className="scenario-cta-note">Cuéntanos sobre tu operación y evaluaremos el enfoque más adecuado.</small></aside>
    </div>
  </div>;
};

const CasApp = () => {
  const [active,setActive]=useStateC(0); const tabsRef=useRefC([]); const scenario=implementationScenarios[active];
  const selectTab=(index,focus=false)=>{ const next=(index+implementationScenarios.length)%implementationScenarios.length; setActive(next); history.replaceState(null,'',`#${implementationScenarios[next].id}`); if(focus) tabsRef.current[next]?.focus(); };
  const onKey=(e,i)=>{ if(e.key==='ArrowRight'||e.key==='ArrowDown'){e.preventDefault();selectTab(i+1,true)} if(e.key==='ArrowLeft'||e.key==='ArrowUp'){e.preventDefault();selectTab(i-1,true)} if(e.key==='Home'){e.preventDefault();selectTab(0,true)} if(e.key==='End'){e.preventDefault();selectTab(implementationScenarios.length-1,true)} };
  useEffectC(()=>{ const id=location.hash.slice(1); const i=implementationScenarios.findIndex(x=>x.id===id); if(i>=0)setActive(i); },[]);
  return <><SiteNav current="casos"/><section className="page-hero scenario-hero"><div className="page-hero-bg"/><div className="container"><div className="crumb"><a href="../index.html">Inicio</a><span className="sep">/</span><span>Escenarios</span></div><div className="section-eyebrow">Software personalizado</div><h1>Escenarios de <span className="grad">implementación</span></h1><p className="lede">Conoce cómo Martz Forge puede analizar procesos específicos y diseñar soluciones tecnológicas adaptadas a diferentes industrias.</p><p className="scenario-disclaimer">Los siguientes son ejemplos ilustrativos y no representan proyectos ejecutados para clientes específicos.</p></div></section><main className="scenario-section-wrap"><div className="container"><div className="scenario-tabs" role="tablist" aria-label="Industrias">{implementationScenarios.map((s,i)=><button ref={el=>tabsRef.current[i]=el} key={s.id} id={`tab-${s.id}`} role="tab" aria-selected={active===i} aria-controls={`panel-${s.id}`} tabIndex={active===i?0:-1} onClick={()=>selectTab(i)} onKeyDown={e=>onKey(e,i)} className={`scenario-tab ${active===i?'active':''}`} style={{'--accent':s.accent,'--soft':s.soft}}><Icon name={s.icon}/><span>{s.industry}</span></button>)}</div><ScenarioPanel key={scenario.id} scenario={scenario}/></div></main><SiteFooter/></>;
};

ReactDOM.createRoot(document.getElementById('root')).render(<CasApp/>);