const { Button, Card, Badge, Tag, Icon, LayerFlow } = window.DatnovaDesignSystem_e8e0a8;

const LINEAS = [
  {
    id: 'plataformas', icon: 'database', accent: 'var(--dn-layer-ingestion)',
    t: 'Plataformas de datos',
    lead: 'Arquitectura Lakehouse sobre Azure y Databricks, gobernada desde el día uno.',
    body: 'Diseñamos el camino completo del dato: captura, procesamiento por capas, catálogo y consumo. La gobernanza no se agrega al final — se define en el primer sprint, cuando todavía es barata.',
    puntos: ['Ingesta batch y streaming desde ERP, POS, CRM e IoT', 'Modelo medallion (bronze / silver / gold) con contratos de esquema', 'Control de costo por workload, medido por sprint'],
    steps: [
      { layer: 'ingestion', title: 'Fuentes y captura', detail: 'Conectores a sistemas core y eventos de operación.', tools: 'Azure Data Factory · Event Hubs', icon: 'download' },
      { layer: 'processing', title: 'Lakehouse medallion', detail: 'Transformación declarativa y versionada.', tools: 'Databricks · Delta Lake', icon: 'workflow' },
      { layer: 'governance', title: 'Catálogo y permisos', detail: 'Un dueño por dominio, linaje de punta a punta.', tools: 'Unity Catalog · Purview', icon: 'shield-check' },
      { layer: 'consumption', title: 'Capa semántica', detail: 'Una definición de cada métrica, reutilizable.', tools: 'Power BI · APIs', icon: 'layers' },
    ],
  },
  {
    id: 'analitica', icon: 'line-chart', accent: 'var(--dn-layer-processing)',
    t: 'Analítica & BI',
    lead: 'Dashboards y KPIs que el negocio realmente usa para decidir.',
    body: 'Empezamos por la decisión, no por el tablero. Cada vista responde una pregunta con dueño, frecuencia y umbral de acción. Si nadie decide con ella, se elimina.',
    puntos: ['Inventario de decisiones por área antes de construir', 'Una sola definición de cada métrica, versionada', 'Adopción medida: quién abre, con qué frecuencia, para qué decisión'],
    steps: [
      { layer: 'processing', title: 'Modelo de negocio', detail: 'Métricas y jerarquías acordadas con el área.', tools: 'dbt-style SQL · Delta', icon: 'sigma' },
      { layer: 'governance', title: 'Certificación', detail: 'Métricas certificadas vs. exploratorias, separadas.', tools: 'Unity Catalog', icon: 'badge-check' },
      { layer: 'consumption', title: 'Tableros de decisión', detail: 'Una vista por decisión, con umbral de acción.', tools: 'Power BI', icon: 'line-chart' },
      { layer: 'consumption', title: 'Adopción', detail: 'Uso real monitoreado y depuración trimestral.', tools: 'Telemetría de uso', icon: 'activity' },
    ],
  },
  {
    id: 'ia', icon: 'brain-circuit', accent: 'var(--dn-ai)', ai: true,
    t: 'IA aplicada',
    lead: 'De PoC a producción: casos de uso con resultados medibles.',
    body: 'Un piloto que no puede pasar a producción no es un piloto: es una demostración. Definimos el criterio de producción — latencia, costo por inferencia, monitoreo, dueño — antes de entrenar el primer modelo.',
    puntos: ['Criterio de paso a producción escrito antes del primer experimento', 'Monitoreo de deriva, costo y calidad de salida en operación', 'Casos de uso priorizados por impacto sobre el P&L, no por novedad'],
    steps: [
      { layer: 'ingestion', title: 'Datos de entrenamiento', detail: 'Features versionadas, no extractos manuales.', tools: 'Feature Store', icon: 'database' },
      { layer: 'processing', title: 'Experimentación', detail: 'Métrica de negocio como criterio, no solo AUC.', tools: 'MLflow · Databricks', icon: 'flask-conical' },
      { layer: 'governance', title: 'Control y trazabilidad', detail: 'Versión, dataset y aprobación registrados.', tools: 'MLflow Registry', icon: 'shield-check' },
      { layer: 'consumption', title: 'Servicio en producción', detail: 'Inferencia monitoreada, con dueño operativo.', tools: 'Azure OpenAI · Endpoints', icon: 'plug' },
    ],
  },
  {
    id: 'gobernanza', icon: 'shield-check', accent: 'var(--dn-layer-governance)',
    t: 'Gobernanza de datos',
    lead: 'Calidad, seguridad y cumplimiento que habilitan la IA, no la frenan.',
    body: 'La gobernanza que nadie usa es un documento. Implementamos control en el pipeline: reglas de calidad ejecutables, permisos por dominio y evidencia de cumplimiento generada automáticamente.',
    puntos: ['Reglas de calidad como código, con alerta y responsable', 'Permisos por dominio y por rol, auditables', 'Evidencia de cumplimiento generada por el pipeline'],
    steps: [
      { layer: 'governance', title: 'Modelo de dominios', detail: 'Quién es dueño de qué dato y de qué decisión.', tools: 'Data ownership', icon: 'users' },
      { layer: 'processing', title: 'Calidad ejecutable', detail: 'Expectativas por tabla, cortan el pipeline.', tools: 'Delta expectations', icon: 'check-check' },
      { layer: 'governance', title: 'Acceso y linaje', detail: 'Permisos centralizados, linaje automático.', tools: 'Unity Catalog · Purview', icon: 'git-branch' },
      { layer: 'consumption', title: 'Evidencia', detail: 'Reporte de cumplimiento sin trabajo manual.', tools: 'Power BI', icon: 'file-check' },
    ],
  },
  {
    id: 'cloud', icon: 'cloud-cog', accent: 'var(--dn-layer-consumption)',
    t: 'Migración y modernización cloud',
    lead: 'Incremental, validada sprint por sprint. Sin big-bang.',
    body: 'Migramos por dominio, con el sistema anterior operando en paralelo hasta que la validación pasa. Cada sprint deja algo funcionando en producción y un camino de retorno si algo falla.',
    puntos: ['Migración por dominio, con operación en paralelo y punto de retorno', 'Comparación automática de resultados entre legado y destino', 'Costo cloud proyectado y verificado en cada sprint'],
    steps: [
      { layer: 'ingestion', title: 'Inventario y dependencias', detail: 'Qué existe, quién lo consume, qué se apaga.', tools: 'Assessment', icon: 'list-checks' },
      { layer: 'processing', title: 'Migración por dominio', detail: 'Un dominio por sprint, en paralelo al legado.', tools: 'Databricks · ADF', icon: 'move-right' },
      { layer: 'governance', title: 'Validación cruzada', detail: 'Resultados comparados antes de apagar nada.', tools: 'Pruebas automáticas', icon: 'scale' },
      { layer: 'consumption', title: 'Corte y cierre', detail: 'Apagado del legado y costo verificado.', tools: 'Cost management', icon: 'power' },
    ],
  },
];

function ServiciosScreen({ onNavigate }) {
  return (
    <main>
      <PageHead eyebrow="Servicios" title="Cinco líneas de servicio, un solo estándar de ejecución"
        lead="Todas empiezan igual: un diagnóstico de 2 semanas que define qué se puede ejecutar, en qué orden y con qué criterio de aceptación.">
        <div className="row" style={{ marginTop: 6 }}>
          {LINEAS.map(l => (
            <button key={l.id} className="pill pill-dark" onClick={() => onNavigate('servicios', l.id)}>
              <span className="chev chev-sm" style={{ borderLeftColor: l.accent }} />{l.t}
            </button>
          ))}
        </div>
      </PageHead>

      {LINEAS.map((l, i) => (
        <Section key={l.id} id={l.id} tone={i % 2 ? 'muted' : 'light'}>
          <div className="split" style={{ alignItems: 'start' }}>
            <div style={{ display: 'grid', gap: 18, alignContent: 'start' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <Icon name={l.icon} size={28} color={l.accent} />
                <span className="dn-label" style={{ fontSize: 11, color: 'var(--text-muted)' }}>0{i + 1} · Línea de servicio</span>
                {l.ai ? <Badge tone="ai">IA / ML</Badge> : null}
              </div>
              <h2 style={{ textWrap: 'pretty' }}>{l.t}</h2>
              <p className="dn-lead" style={{ maxWidth: 560 }}>{l.lead}</p>
              <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-body)', maxWidth: 560, textWrap: 'pretty' }}>{l.body}</p>
            </div>
            <div style={{ display: 'grid', gap: 20, alignContent: 'start' }}>
              <ul style={{ display: 'grid', gap: 10, margin: 0, padding: 0, listStyle: 'none' }}>
                {l.puntos.map(p => (
                  <li key={p} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'start', fontSize: 15, lineHeight: 1.55, color: 'var(--text-body)' }}>
                    <span className="chev chev-sm" style={{ borderLeftColor: l.accent, marginTop: 6 }} />{p}
                  </li>
                ))}
              </ul>
              <div>
                <Button variant="secondary" iconTrailing="arrow-right" onClick={() => onNavigate('diagnostico')}>Diagnosticar esta línea en 2 semanas</Button>
              </div>
            </div>
          </div>
          <div className="diagram-col" style={{ marginTop: 44 }}>
            <LayerFlow steps={l.steps} />
          </div>
        </Section>
      ))}

      <Section tone="light" tight>
        <Card padding="lg" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 20, alignItems: 'center' }}>
          <Icon name="info" size={22} color="var(--text-muted)" />
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>
            Somos partners de Microsoft y Databricks: cada línea de servicio se implementa sobre Azure y Databricks, con el entorno que ya opera en tu empresa.
          </p>
        </Card>
      </Section>

      <CtaBand onNavigate={onNavigate} title="Empieza por donde duele hoy." body="El diagnóstico de 2 semanas define cuál de estas cinco líneas mueve tu operación primero, con qué arquitectura y en qué orden de sprints." />
    </main>
  );
}

Object.assign(window, { ServiciosScreen, LINEAS });