// GOBIERNO — Áreas de aplicación por ministerio (selector interactivo)
// Cada área: casos + límites legales/éticos + SDM + KPI + CTA

const GobAreas = () => {
  const [active, setActive] = React.useState(0);
  const areas = [
    {
      k: 'TRANSPORTE Y OBRAS PÚBLICAS',
      icon: 'construction',
      color: '#0050BD',
      buyer: 'MOP · MTT · UOCT · agencias de infraestructura',
      sdm: 'SDM de Movilidad + SDM de Infraestructura',
      cases: [
        { n: 'Predicción de tráfico a 15 min · 24h · 72h',    kpi: 'Tiempo de viaje · fluidez · siniestros' },
        { n: 'Coordinación vial multi-organismo',              kpi: 'Ventana de intervención · calidad de servicio' },
        { n: 'Mantenimiento predictivo de infraestructura',    kpi: 'Vida útil · disponibilidad · costo mantenimiento' },
        { n: 'Gestión de activos · pavimentos · puentes',      kpi: 'Inversión priorizada · deterioro proyectado' },
        { n: 'Coordinación carretera–puerto',                   kpi: 'Congestión de acceso · tiempo mina/planta → puerto' },
        { n: 'Priorización de inversiones',                      kpi: 'ROI social · beneficio proyectado' },
        { n: 'Gestión de concesiones',                           kpi: 'Cumplimiento · KPIs de servicio' },
        { n: 'Respuesta ante interrupciones',                    kpi: 'Tiempo de reapertura · impacto en usuario' },
      ],
      limits: 'No sanciones automáticas al usuario · no perfilamiento de conductores · aprobación humana en cierres o desvíos.',
      cta: 'Ver estudio Ruta 78',
      ctaHref: 'gobierno-movilidad.html',
    },
    {
      k: 'SALUD PÚBLICA',
      icon: 'heart-pulse',
      color: '#F4024C',
      buyer: 'MINSAL · redes hospitalarias · SAMU · servicios de salud',
      sdm: 'SDM de Salud Pública + SDM de Coordinación Asistencial',
      cases: [
        { n: 'Predicción de demanda hospitalaria',              kpi: 'Camas ocupadas · triage · lead time' },
        { n: 'Coordinación de camas cross-red',                  kpi: 'Ocupación · derivaciones · tiempo espera' },
        { n: 'Distribución de medicamentos',                      kpi: 'Cobertura · quiebres · pérdidas por vencimiento' },
        { n: 'Gestión de inventario clínico',                     kpi: 'Rotación · quiebres críticos · costo' },
        { n: 'Coordinación de ambulancias',                       kpi: 'Tiempo de respuesta · cobertura territorial' },
        { n: 'Gestión de listas de espera',                       kpi: 'Tiempo espera · priorización clínica' },
        { n: 'Vigilancia de capacidad',                           kpi: 'Utilización · alerta temprana' },
        { n: 'Continuidad asistencial entre niveles',             kpi: 'Derivaciones cerradas · cumplimiento GES' },
      ],
      limits: 'No reemplazar diagnóstico clínico · no negar atención automáticamente · mantener responsabilidad médica · proteger datos de salud según ley.',
      cta: 'Ver salud pública',
      ctaHref: 'gobierno-salud.html',
    },
    {
      k: 'SEGURIDAD · INTERIOR · EMERGENCIAS',
      icon: 'shield-alert',
      color: '#B00238',
      buyer: 'MINSEG · ONEMI · CBCH · protección civil · gobiernos regionales',
      sdm: 'SDM de Emergencias + SDM de Continuidad de Servicios',
      cases: [
        { n: 'Visión operacional común entre organismos',         kpi: 'Tiempo de decisión · coordinación inter-institucional' },
        { n: 'Coordinación interinstitucional',                    kpi: 'Recursos desplegados · tiempo activación' },
        { n: 'Priorización de recursos ante emergencias',          kpi: 'Cobertura · atención por prioridad' },
        { n: 'Gestión de eventos climáticos',                       kpi: 'Anticipación · alerta temprana · daño evitado' },
        { n: 'Protección civil y logística de emergencia',          kpi: 'Tiempo de despliegue · continuidad servicios' },
        { n: 'Gestión de infraestructura crítica',                  kpi: 'Continuidad · respuesta ante degradación' },
        { n: 'Coordinación ante ciberincidentes',                   kpi: 'Tiempo de contención · servicios recuperados' },
      ],
      limits: 'No vigilancia masiva · no social scoring · no perfilamiento ciudadano opaco · no predicción automática de culpabilidad · no sanciones automáticas · aprobación humana en decisiones sobre derechos.',
      cta: 'Ver seguridad · emergencias',
      ctaHref: 'gobierno-seguridad.html',
    },
    {
      k: 'HACIENDA · TESORERÍA · CONTRALORÍA',
      icon: 'landmark',
      color: '#B8860B',
      buyer: 'Hacienda · DIPRES · Tesorería · Contraloría · SII · ChileCompra',
      sdm: 'SDM de Contratos + SDM de Integridad Pública + SDM de Presupuesto',
      cases: [
        { n: 'Detección de anomalías en pagos',                   kpi: 'Anomalías detectadas · casos investigados' },
        { n: 'Duplicidades y facturación irregular',              kpi: 'Duplicados detectados · valor recuperado' },
        { n: 'Priorización de auditorías',                         kpi: 'Cobertura de riesgo · casos priorizados' },
        { n: 'Contratación pública · fraude potencial',           kpi: 'Flags · investigación · cierre de casos' },
        { n: 'Seguimiento presupuestario en tiempo real',          kpi: 'Ejecución vs plan · alertas tempranas' },
        { n: 'Control de proyectos de inversión',                  kpi: 'Cumplimiento hitos · desviación de costo' },
        { n: 'Evaluación de proveedores',                          kpi: 'Score de riesgo · desempeño histórico' },
      ],
      limits: 'OMNIX prioriza investigación · no determina culpabilidad · no sanciona · segregación de funciones · debido proceso preservado · derecho a apelación.',
      cta: 'Ver eficiencia · integridad',
      ctaHref: 'gobierno-eficiencia.html',
    },
    {
      k: 'DESARROLLO SOCIAL',
      icon: 'users',
      color: '#0F5132',
      buyer: 'Desarrollo Social · IPS · SENAMA · SENADIS · programas sociales',
      sdm: 'SDM de Servicios Ciudadanos',
      cases: [
        { n: 'Expedientes · documentación faltante',              kpi: 'Tiempo de tramitación · error rate' },
        { n: 'Priorización de casos urgentes',                     kpi: 'Casos de riesgo atendidos oportunamente' },
        { n: 'Coordinación entre servicios y municipios',          kpi: 'Casos multi-servicio resueltos' },
        { n: 'Atención proactiva a beneficiarios',                 kpi: 'Cobertura · casos identificados' },
        { n: 'Detección de duplicidades e inconsistencias',        kpi: 'Cobertura · casos regularizados' },
      ],
      limits: 'No denegar beneficios automáticamente · mantener revisión humana · mecanismos de apelación operativos · protección de datos personales por diseño · sin discriminación.',
      cta: 'Ver servicios públicos',
      ctaHref: 'gobierno-servicios.html',
    },
    {
      k: 'MEDIO AMBIENTE · TERRITORIO',
      icon: 'tree-pine',
      color: '#0F5132',
      buyer: 'MMA · CONAF · DGA · SEA · SMA · MINVU · gobiernos regionales',
      sdm: 'SDM de Medio Ambiente + SDM de Gestión Hídrica',
      cases: [
        { n: 'Monitoreo ambiental',                                kpi: 'Calidad de aire · agua · cumplimiento norma' },
        { n: 'Gestión hídrica · cuencas · sequías',                kpi: 'Balance hídrico · alerta temprana' },
        { n: 'Incendios · anticipación y respuesta',                kpi: 'Tiempo de detección · área protegida' },
        { n: 'Inspecciones ambientales',                            kpi: 'Cobertura · casos priorizados · cumplimiento' },
        { n: 'Permisos ambientales · seguimiento',                  kpi: 'Tiempo tramitación · cumplimiento condiciones' },
        { n: 'Infraestructura crítica territorial',                  kpi: 'Continuidad · resiliencia ante eventos' },
        { n: 'Planificación territorial',                            kpi: 'Uso de suelo · cumplimiento planes' },
      ],
      limits: 'Decisiones normativas mantienen responsabilidad técnica autorizada · no sanciones automáticas · aprobación humana en resoluciones · derecho a apelación técnica.',
      cta: 'Ver territorio · medio ambiente',
      ctaHref: 'gobierno-territorio.html',
    },
    {
      k: 'GOBIERNOS REGIONALES Y MUNICIPALES',
      icon: 'building-2',
      color: '#52557A',
      buyer: 'Gobiernos regionales · municipalidades · SUBDERE',
      sdm: 'SDM de Servicios Municipales + SDM de Territorio',
      cases: [
        { n: 'Gestión de reclamos ciudadanos',                    kpi: 'Tiempo de respuesta · resolución en primera línea' },
        { n: 'Permisos · patentes · edificación',                   kpi: 'Tiempo tramitación · calidad de servicio' },
        { n: 'Mantenimiento urbano · alumbrado',                   kpi: 'Tiempo reparación · disponibilidad' },
        { n: 'Gestión de residuos',                                kpi: 'Cobertura · reciclaje · costo por hab.' },
        { n: 'Movilidad urbana y estacionamiento',                 kpi: 'Rotación · fluidez · cobertura' },
        { n: 'Fiscalización local',                                kpi: 'Cobertura · casos priorizados' },
        { n: 'Emergencias locales',                                kpi: 'Tiempo de respuesta · continuidad' },
        { n: 'Planificación y presupuesto municipal',              kpi: 'Ejecución · alineación con plan' },
      ],
      limits: 'Autonomía municipal respetada · integraciones bajo convenio · datos ciudadanos protegidos · aprobación humana en resoluciones administrativas.',
      cta: 'Ver servicios públicos',
      ctaHref: 'gobierno-servicios.html',
    },
  ];
  const a = areas[active];
  return (
    <section id="areas" style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Áreas de aplicación · por ministerio" color="#0050BD"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000', maxWidth: 900 }}>
            Elija una misión pública · vea el escenario de aplicación.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: '0 0 56px', maxWidth: 720 }}>
            Cada dominio con su SDM propietario, casos, límites legales y éticos, y KPI de misión. Escenario modelado · no resultado real.
          </p>
        </Reveal>

        {/* Tab selector */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, marginBottom: 24, border: '1.5px solid #1E1F26' }}>
          {areas.map((ar, i) => (
            <button key={ar.k} onClick={() => setActive(i)} style={{
              padding: '14px 12px', border: 'none', textAlign: 'left', cursor: 'pointer',
              background: active === i ? '#000' : '#FFF',
              color: active === i ? '#FFF' : '#1E1F26',
              borderRight: (i < 6) ? '1px solid #E4EBF3' : 'none',
              transition: 'all 220ms',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <i data-lucide={ar.icon} width="18" height="18" style={{ strokeWidth: 1.5, color: active === i ? ar.color : '#96A3B5' }}/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: active === i ? ar.color : '#96A3B5' }}>0{i+1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11, letterSpacing: '-0.005em', lineHeight: 1.2 }}>{ar.k}</div>
            </button>
          ))}
        </div>

        {/* Active panel */}
        <div key={active} style={{
          border: '1.5px solid #1E1F26', background: '#FFF', padding: 40,
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 40,
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: a.color, marginBottom: 12 }}>ÁREA · 0{active+1}</div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, letterSpacing: '-0.025em', color: '#000', margin: '0 0 24px', lineHeight: 1.1 }}>
              {a.k}
            </h3>
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Buyer institucional</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.55 }}>{a.buyer}</div>
            </div>
            <div style={{ marginBottom: 20 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>SDM recomendado</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: a.color, fontWeight: 500 }}>{a.sdm}</div>
            </div>
            {/* Límites */}
            <div style={{ padding: '16px 18px', background: '#FBF3D9', border: '1px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>LÍMITES LEGALES Y ÉTICOS</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6 }}>{a.limits}</div>
            </div>
            <div style={{ marginTop: 24 }}>
              <Button variant="primary" icon="arrow-right" href={a.ctaHref}>{a.cta}</Button>
            </div>
          </div>

          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 16 }}>
              Casos de aplicación · con KPI de misión
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {a.cases.map((c, i) => (
                <div key={c.n} style={{
                  padding: '14px 16px', background: '#FAFBFD', border: '1px solid #E4EBF3',
                  display: 'grid', gridTemplateColumns: '32px 1.4fr 1fr', gap: 12, alignItems: 'center',
                }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: a.color }}>{String(i+1).padStart(2, '0')}</span>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#000', letterSpacing: '-0.005em', lineHeight: 1.35 }}>{c.n}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.04em', lineHeight: 1.4 }}>{c.kpi}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { GobAreas });