function SectionContexto() {
  return (
    <div className="fade-up">
      <SectionHeader
        num="01 / 04"
        kicker="Contexto · Ficha técnica"
        title={<>Escuelas que <em className="font-display italic font-normal text-coral-600">sienten</em>, <em className="font-display italic font-normal text-teal-600">dialogan</em> y <em className="font-display italic font-normal text-sage-600">transforman</em>.</>}
        subtitle="Buenas prácticas socioemocionales en el aula. Un dosier para la Unidad Educativa Intercultural Julio Verne, basado en CASEL, RULER y bases de neurociencia educativa."
      />

      {/* Problema callout */}
      <div className="grid lg:grid-cols-3 gap-5 mb-12">
        <Card className="p-6 lg:col-span-2 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-40 h-40 bg-coral-50 rounded-full -translate-y-16 translate-x-16"></div>
          <div className="relative">
            <div className="flex items-center gap-2 mb-3">
              <span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-coral-100 text-coral-600">
                <Icon name="TriangleAlert" size={16} />
              </span>
              <span className="text-[11px] uppercase tracking-[0.18em] font-medium text-coral-700">Presentación del problema</span>
            </div>
            <p className="font-display text-2xl leading-snug tracking-tightish text-ink max-w-2xl">
              Estudiantes de 6 a 12 años del sector urbano de Santa Lucía, Quito, presentan conflictos, desmotivación, acoso y altos niveles de estrés pospandemia.
            </p>
            <p className="mt-4 text-ink-soft leading-relaxed max-w-2xl">
              El equipo docente tiene experiencia, pero suele resistir nuevas metodologías, carece de formación en salud mental y muestra desgaste emocional. Los problemas disciplinarios suelen originarse en necesidades emocionales no atendidas.
            </p>
          </div>
        </Card>

        <Card className="p-6 bg-ink text-paper">
          <div className="text-[11px] uppercase tracking-[0.18em] text-paper/60 mb-3">Frase orientadora</div>
          <p className="font-display italic text-xl leading-snug text-paper/95">
            “Educar también es enseñar a reconocer, expresar, comprender y transformar las emociones para convivir con dignidad y aprender con sentido.”
          </p>
          <div className="mt-6 flex items-center gap-2 text-paper/50 text-xs">
            <Icon name="Quote" size={14} />
            <span>Marco del dosier</span>
          </div>
        </Card>
      </div>

      {/* Ficha técnica */}
      <div className="mb-12">
        <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-teal-100 text-teal-700 items-center justify-center"><Icon name="FileText" size={18} /></span>
          Ficha técnica
        </h2>
        <Card className="overflow-hidden">
          <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x hairline">
            {[
              { l: 'Tipo de herramienta', v: 'Dosier', icon: 'FileBox' },
              { l: 'Sostenimiento',       v: 'Privado', icon: 'Building2' },
              { l: 'Nivel educativo',     v: 'Elemental y Básica media · 6–12 años', icon: 'GraduationCap' },
              { l: 'Destinatarios',       v: 'Docentes · DECE · directivos · familias · estudiantes líderes', icon: 'Users' },
              { l: 'Responsable',         v: 'Kevin Alexander Silva Miranda · DECE · Coord. Académica', icon: 'UserCog' },
              { l: 'Fundamentación',      v: 'CASEL · RULER · Neurociencia educativa', icon: 'BookOpen' },
            ].map((row, i) => (
              <div key={i} className="p-5 flex items-start gap-3">
                <span className="inline-flex w-9 h-9 rounded-lg bg-paper-warm items-center justify-center text-ink-soft shrink-0">
                  <Icon name={row.icon} size={16} />
                </span>
                <div className="min-w-0">
                  <div className="text-[11px] uppercase tracking-[0.14em] text-ink-muted font-medium">{row.l}</div>
                  <div className="mt-1 text-ink font-medium text-[15px] leading-snug">{row.v}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Contextualización */}
      <div className="mb-12">
        <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-coral-100 text-coral-600 items-center justify-center"><Icon name="MapPin" size={18} /></span>
          Contextualización
        </h2>
        <div className="grid lg:grid-cols-3 gap-5">
          <Card className="p-6">
            <Stat value="90%" label="Ingresos medios-altos" hint="Composición socioeconómica de las familias" accent="teal" />
          </Card>
          <Card className="p-6">
            <Stat value="40%" label="Hogares monoparentales" hint="O familias con dinámicas complejas" accent="coral" />
          </Card>
          <Card className="p-6">
            <Stat value="10%" label="Inestabilidad o violencia" hint="Estudiantes que enfrentan vulnerabilidad" accent="amber" />
          </Card>
        </div>
      </div>

      {/* Fortalezas / Debilidades */}
      <div className="grid lg:grid-cols-2 gap-5 mb-12">
        <Card className="p-6">
          <div className="flex items-center gap-2 mb-4">
            <span className="inline-flex w-8 h-8 rounded-lg bg-sage-100 text-sage-600 items-center justify-center"><Icon name="Sprout" size={16} /></span>
            <h3 className="font-display text-2xl tracking-tightish">Fortalezas</h3>
          </div>
          <ul className="space-y-3">
            {[
              'Compromiso docente con el desarrollo académico.',
              'Liderazgo estudiantil activo.',
              'Acompañamiento profesional del DECE en lo socioemocional.',
            ].map((it, i) => (
              <li key={i} className="flex items-start gap-3">
                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-sage-500 shrink-0"></span>
                <span className="text-ink-soft leading-relaxed">{it}</span>
              </li>
            ))}
          </ul>
        </Card>

        <Card className="p-6">
          <div className="flex items-center gap-2 mb-4">
            <span className="inline-flex w-8 h-8 rounded-lg bg-coral-100 text-coral-600 items-center justify-center"><Icon name="AlertCircle" size={16} /></span>
            <h3 className="font-display text-2xl tracking-tightish">Debilidades</h3>
          </div>
          <ul className="space-y-3">
            {[
              'Desinterés directivo en la atención de la salud mental.',
              'Prácticas de crianza que desestiman la dimensión emocional.',
              'Limitado compromiso docente con la educación socioemocional.',
              'Habilidades socioemocionales aún incipientes en el estudiantado.',
            ].map((it, i) => (
              <li key={i} className="flex items-start gap-3">
                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-coral-500 shrink-0"></span>
                <span className="text-ink-soft leading-relaxed">{it}</span>
              </li>
            ))}
          </ul>
        </Card>
      </div>

      {/* Objetivos */}
      <div>
        <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="Target" size={18} /></span>
          Objetivos
        </h2>
        <Card className="p-7 relative overflow-hidden">
          <div className="absolute inset-y-0 left-0 w-1 bg-gradient-to-b from-teal-500 via-coral-500 to-amber-500"></div>
          <div className="pl-3">
            <div className="text-[11px] uppercase tracking-[0.18em] text-ink-muted font-medium mb-2">Objetivo general</div>
            <p className="font-display text-2xl leading-snug tracking-tightish text-ink max-w-3xl">
              Fortalecer el bienestar emocional, la convivencia escolar y el aprendizaje significativo mediante prácticas socioemocionales restaurativas e inclusivas, basadas en los marcos CASEL y RULER.
            </p>
            <div className="grid md:grid-cols-3 gap-4 mt-7">
              {[
                { i: 'Heart',     t: 'Competencias',     d: 'Fortalecer competencias socioemocionales en estudiantes y docentes.' },
                { i: 'Handshake', t: 'Convivencia',      d: 'Implementar prácticas restaurativas y preventivas en la convivencia.' },
                { i: 'Shield',    t: 'Ambiente seguro',  d: 'Promover entornos emocionalmente seguros e inclusivos.' },
              ].map((o, i) => (
                <div key={i} className="border hairline rounded-xl p-4 bg-paper">
                  <Icon name={o.i} size={18} className="text-ink-soft mb-3" />
                  <div className="font-medium text-ink">{o.t}</div>
                  <div className="text-sm text-ink-muted mt-1 leading-relaxed">{o.d}</div>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

window.SectionContexto = SectionContexto;