function SectionImplementacion() {
  const { RUTA, RECURSOS, CONCLUSIONES, ORIENTACIONES } = window.DATA;
  return (
    <div className="fade-up">
      <SectionHeader
        num="04 / 04"
        kicker="Implementación · evaluación · cierre"
        title={<>De la intención al <em className="font-display italic font-normal text-sage-600">cambio</em> sostenido en la cultura escolar.</>}
        subtitle="Una ruta clara, indicadores cuantitativos y cualitativos, y orientaciones para que las prácticas se sostengan más allá del primer año."
      />

      {/* Ruta */}
      <div className="mb-14">
        <div className="flex items-end justify-between mb-6">
          <h2 className="font-display text-3xl tracking-tightish flex items-center gap-3">
            <span className="inline-flex w-9 h-9 rounded-lg bg-teal-100 text-teal-700 items-center justify-center"><Icon name="Route" size={18} /></span>
            Ruta de implementación
          </h2>
          <Chip>5 fases · 9+ meses · permanente</Chip>
        </div>

        <Card className="overflow-hidden">
          <div className="divide-y hairline">
            {RUTA.map((r, i) => (
              <div key={i} className="grid md:grid-cols-[160px_120px_1fr_220px] gap-4 md:gap-6 p-5 md:p-6 items-start hover:bg-paper-warm/40 transition-colors">
                <div className="flex items-center gap-3">
                  <span className="inline-flex w-10 h-10 rounded-lg bg-teal-50 text-teal-700 items-center justify-center shrink-0">
                    <Icon name={r.icon} size={18} />
                  </span>
                  <div className="min-w-0">
                    <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-ink-muted">Fase {String(i+1).padStart(2,'0')}</div>
                    <div className="font-display text-lg tracking-tightish text-ink leading-tight">{r.fase}</div>
                  </div>
                </div>
                <div>
                  <div className="text-[10px] uppercase tracking-[0.16em] font-semibold text-ink-muted mb-1">Duración</div>
                  <div className="text-sm font-medium text-ink">{r.duracion}</div>
                </div>
                <div>
                  <div className="text-[10px] uppercase tracking-[0.16em] font-semibold text-ink-muted mb-1.5">Acciones</div>
                  <ul className="space-y-1">
                    {r.acciones.map((a, j) => (
                      <li key={j} className="flex items-start gap-2 text-sm text-ink-soft leading-snug">
                        <span className="mt-1.5 w-1 h-1 rounded-full bg-teal-500 shrink-0"></span>
                        <span>{a}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <div className="text-[10px] uppercase tracking-[0.16em] font-semibold text-ink-muted mb-1">Responsables</div>
                  <div className="text-sm text-ink-soft leading-snug">{r.responsables}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* Recursos necesarios */}
        <div className="mt-5">
          <div className="text-[11px] uppercase tracking-[0.18em] font-semibold text-ink-muted mb-3">Recursos necesarios</div>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
            {RECURSOS.map((r, i) => (
              <div key={i} className="border hairline rounded-xl bg-white p-4 flex flex-col items-center text-center gap-2">
                <span className="inline-flex w-10 h-10 rounded-lg bg-paper-warm text-ink-soft items-center justify-center">
                  <Icon name={r.icon} size={18} />
                </span>
                <div className="text-[12.5px] font-medium text-ink leading-snug">{r.nombre}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Evaluación */}
      <div className="mb-14">
        <h2 className="font-display text-3xl tracking-tightish mb-5 flex items-center gap-3">
          <span className="inline-flex w-9 h-9 rounded-lg bg-amber-100 text-amber-600 items-center justify-center"><Icon name="BarChart3" size={18} /></span>
          Evaluación de impacto
        </h2>
        <div className="grid md:grid-cols-2 gap-5">
          <Card className="p-7 relative overflow-hidden">
            <div className="absolute inset-y-0 left-0 w-1 bg-teal-500"></div>
            <div className="pl-2">
              <div className="flex items-center gap-2 mb-3">
                <Icon name="Hash" size={16} className="text-teal-600" />
                <span className="text-[11px] uppercase tracking-[0.18em] font-medium text-teal-700">Cuantitativa</span>
              </div>
              <h3 className="font-display text-2xl tracking-tightish text-ink">Indicadores medibles</h3>
              <ul className="mt-4 space-y-3">
                {[
                  ['Asistencia escolar', 'Tasa mensual y comparativa interanual.'],
                  ['Reportes disciplinarios', 'Volumen, tipo y reincidencia.'],
                  ['Rendimiento académico', 'Promedios y variabilidad por aula.'],
                  ['Uso de prácticas', 'Frecuencia de aplicación de las 10 actividades.'],
                ].map(([t, d], i) => (
                  <li key={i} className="flex items-start gap-3">
                    <Icon name="Dot" size={20} className="text-teal-500 -ml-1.5 shrink-0" />
                    <div>
                      <div className="text-ink font-medium">{t}</div>
                      <div className="text-sm text-ink-muted">{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </Card>

          <Card className="p-7 relative overflow-hidden">
            <div className="absolute inset-y-0 left-0 w-1 bg-coral-500"></div>
            <div className="pl-2">
              <div className="flex items-center gap-2 mb-3">
                <Icon name="MessageCircleHeart" size={16} className="text-coral-600" />
                <span className="text-[11px] uppercase tracking-[0.18em] font-medium text-coral-700">Cualitativa</span>
              </div>
              <h3 className="font-display text-2xl tracking-tightish text-ink">Calidad del vínculo</h3>
              <ul className="mt-4 space-y-3">
                {[
                  ['Clima de aula', 'Percepciones de seguridad, escucha y respeto.'],
                  ['Resolución de conflictos', 'Calidad de los acuerdos y su cumplimiento.'],
                  ['Voz estudiantil', 'Participación significativa en decisiones.'],
                  ['Cultura institucional', 'Lenguaje socioemocional en docentes y familias.'],
                ].map(([t, d], i) => (
                  <li key={i} className="flex items-start gap-3">
                    <Icon name="Dot" size={20} className="text-coral-500 -ml-1.5 shrink-0" />
                    <div>
                      <div className="text-ink font-medium">{t}</div>
                      <div className="text-sm text-ink-muted">{d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </Card>
        </div>
      </div>

      {/* Conclusiones */}
      <div className="mb-14">
        <h2 className="font-display text-3xl tracking-tightish mb-5 flex items-center gap-3">
          <span className="inline-flex w-9 h-9 rounded-lg bg-sage-100 text-sage-600 items-center justify-center"><Icon name="Flag" size={18} /></span>
          Conclusiones y recomendaciones
        </h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {CONCLUSIONES.map((c, i) => (
            <Card key={i} className="p-5">
              <span className="inline-flex w-10 h-10 rounded-lg bg-sage-50 text-sage-600 items-center justify-center">
                <Icon name={c.icon} size={18} />
              </span>
              <div className="mt-4 font-display text-xl tracking-tightish text-ink leading-tight">{c.titulo}</div>
              <p className="mt-2 text-sm text-ink-muted leading-relaxed">{c.desc}</p>
            </Card>
          ))}
        </div>
      </div>

      {/* Orientaciones */}
      <div className="mb-14">
        <h2 className="font-display text-3xl tracking-tightish mb-5 flex items-center gap-3">
          <span className="inline-flex w-9 h-9 rounded-lg bg-lilac-100 text-lilac-600 items-center justify-center"><Icon name="Compass" size={18} /></span>
          Orientaciones para docentes
        </h2>
        <Card className="overflow-hidden">
          <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x hairline">
            {ORIENTACIONES.map((o, i) => (
              <div key={i} className="p-6">
                <div className="flex items-start gap-4">
                  <span className="inline-flex w-11 h-11 rounded-xl bg-lilac-50 text-lilac-600 items-center justify-center shrink-0">
                    <Icon name={o.icon} size={20} />
                  </span>
                  <div>
                    <div className="font-display text-xl tracking-tightish text-ink">{o.titulo}</div>
                    <p className="mt-1.5 text-ink-soft leading-relaxed">{o.desc}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Closing card */}
      <Card className="p-8 md:p-10 bg-ink text-paper relative overflow-hidden">
        <div className="absolute top-0 right-0 w-72 h-72 rounded-full bg-coral-500/15 -translate-y-24 translate-x-24 blur-2xl"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-teal-500/20 translate-y-24 -translate-x-24 blur-2xl"></div>
        <div className="relative max-w-3xl">
          <div className="text-[11px] uppercase tracking-[0.18em] text-paper/60 mb-3 flex items-center gap-2">
            <Icon name="Sparkle" size={14} /> Cierre
          </div>
          <p className="font-display text-3xl md:text-4xl leading-tight tracking-tighter2 text-paper">
            “El vínculo seguro es la base del aprendizaje. Antes de enseñar contenidos, enseñemos a habitar las emociones.”
          </p>
          <div className="mt-6 flex flex-wrap items-center gap-3 text-paper/60 text-sm">
            <Chip className="bg-white/10 text-paper border-white/10">U.E. Intercultural Julio Verne</Chip>
            <Chip className="bg-white/10 text-paper border-white/10">DECE · Comité de Mediación</Chip>
            <Chip className="bg-white/10 text-paper border-white/10">Quito · Santa Lucía</Chip>
          </div>
        </div>
      </Card>
    </div>
  );
}

window.SectionImplementacion = SectionImplementacion;