/* global React, utmLink */

const ONG_AREA = { base: "ong", label: "Soy una ONG" };

const ONG_ITEMS = [
  { slug: "contexto", label: "Qué ocurre en el mercado laboral" },
  { slug: "perfiles", label: "Qué perfiles se demandan más" },
  { slug: "valoran", label: "Qué valoran las personas candidatas" },
  { slug: "ofertas", label: "Redactar ofertas claras e inclusivas" },
  { slug: "seleccion", label: "Buenas prácticas en selección" },
  { slug: "transparencia", label: "Transparencia salarial" },
  { slug: "inclusion", label: "Inclusión y accesibilidad" },
  { slug: "talento", label: "Atraer y fidelizar talento" },
  { slug: "publicar", label: "Cómo publicar en Hacesfalta.org" },
];

function OngLanding() {
  const { go } = useRoute();
  return (
    <main>
      <Breadcrumbs trail={[{ label: "Inicio", to: "/" }, { label: "Soy una ONG" }]} />
      <section className="wrap hero" style={{ paddingTop: 8 }}>
        <Eyebrow>Apartado para ONG y entidades empleadoras</Eyebrow>
        <h1 style={{ marginTop: 16 }}>Atraer, seleccionar y cuidar al <span className="accent">talento social</span>.</h1>
        <p className="lede">
          Una guía práctica para personas responsables de equipos, RRHH y dirección de entidades del Tercer
          Sector. Datos del mercado, perfiles más demandados, qué valoran las personas candidatas y cómo
          mejorar tus procesos de selección.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
          <button className="btn btn-ink" onClick={() => go("/ong/publicar")}>Publicar una oferta →</button>
          <button className="btn btn-ghost" onClick={() => go("/ong/ofertas")}>Mejorar mis ofertas</button>
        </div>
      </section>
      <section className="wrap section-tight">
        <div className="cards-grid">
          {ONG_ITEMS.map(it => (
            <a key={it.slug} className="mini-card" href={publicHref(`/ong/${it.slug}`)}>
              <Icon slug={it.slug} />
              <h4>{it.label}</h4>
            </a>
          ))}
        </div>
      </section>
    </main>
  );
}

// 1. Contexto del mercado laboral
function OngContexto() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="contexto"
      related={[
        { area: "Soy una ONG", title: "Qué perfiles se demandan más", to: "/ong/perfiles" },
        { area: "Conocer el sector", title: "Tendencias y retos 2026", to: "/general/tendencias" },
        { area: "Soy una ONG", title: "Atraer y fidelizar talento", to: "/ong/talento" },
      ]}>
      <Eyebrow>Para entidades · Contexto</Eyebrow>
      <h1>Qué está ocurriendo en el mercado laboral del Tercer Sector.</h1>
      <p className="lede">
        Si gestionas o coordinas una entidad, conviene tener clara la fotografía del momento: dónde aprieta la
        captación, qué cambia en las expectativas de las personas candidatas y qué nuevas exigencias está
        introduciendo el entorno. Hemos resumido lo más relevante.
      </p>

      <h2>Cinco fuerzas que están transformando el empleo del sector</h2>
      <Accordion items={[
        { q: "1. Más competencia por perfiles cualificados",
          a: <>
            <p>El sector compite con la empresa privada y la administración pública por profesionales de
            tecnología, datos, captación, comunicación y dirección. La propuesta de valor basada solo en
            propósito ya no garantiza atraer y retener.</p>
            <p><strong>Implicación:</strong> revisa salarios, condiciones y plan de desarrollo. Si no puedes
            competir en salario, compite con claridad y autenticidad sobre lo que sí puedes ofrecer.</p>
          </> },
        { q: "2. Equipos cada vez más multidisciplinares",
          a: <>
            <p>Solo <strong>1 de cada 4 ofertas</strong> está pensada para un único perfil profesional. La
            mayoría busca combinaciones de competencias.</p>
            <p><strong>Implicación:</strong> tu manera de definir vacantes —y de redactar ofertas— necesita
            virar de la búsqueda del currículum tipo a la búsqueda de competencias, actitudes y potencial.</p>
          </> },
        { q: "3. Digitalización e IA, también dentro",
          a: <>
            <p>La IA generativa, la captación digital y la analítica están entrando en gestión, comunicación,
            fundraising y atención. La brecha de competencias digitales es real.</p>
            <p><strong>Implicación:</strong> plan de formación interno, perfiles puente y revisión ética del
            uso de IA en intervenciones con personas vulnerables.</p>
          </> },
        { q: "4. Conciliación y salud mental como condición",
          a: <>
            <p>El bienestar laboral pesa más que nunca en la decisión de aceptar (o quedarse en) un puesto. Y
            convive con presupuestos ajustados y alto desgaste emocional propio del sector.</p>
            <p><strong>Implicación:</strong> políticas reales de conciliación, supervisión y cuidado del
            equipo. No basta el discurso.</p>
          </> },
        { q: "5. Polarización social y exigencia de transparencia",
          a: <>
            <p>La labor social se ve cuestionada en discursos públicos y, a la vez, las personas candidatas
            piden mayor coherencia: salarios visibles, procesos limpios, decisiones explicables.</p>
            <p><strong>Implicación:</strong> incorpora transparencia salarial y comunicación clara como parte
            del proceso de selección, no como anexo.</p>
          </> },
      ]} />

      <Callout kind="tip" label="Donde mirar los datos">
        <p style={{ margin: 0 }}>
          Para profundizar, consulta el <Link to="/general/datos">apartado de datos</Link> y las <Link
          to="/general/tendencias">tendencias 2026</Link> en la versión general de la guía.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 2. Perfiles que se demandan más
function OngPerfiles() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="perfiles"
      related={[
        { area: "Soy una ONG", title: "Qué valoran las personas candidatas", to: "/ong/valoran" },
        { area: "Busco empleo", title: "Categorías de empleo", to: "/busco-empleo/categorias" },
        { area: "Soy una ONG", title: "Atraer y fidelizar talento", to: "/ong/talento" },
      ]}>
      <Eyebrow>Para entidades · Demanda</Eyebrow>
      <h1>Los perfiles que más están buscando las entidades.</h1>
      <p className="lede">
        Estos son los datos del propio sector: lo que se publica, lo que más cuesta cubrir y dónde están las
        oportunidades de mejora si vas a abrir vacantes en los próximos meses.
      </p>

      <h2>Mapa de la demanda en 2025</h2>
      <div style={{ marginTop: 18 }}>
        <Bar label="Atención directa" value={52} />
        <Bar label="Gestión de proyectos" value={14} />
        <Bar label="Personal de servicio" value={9} />
        <Bar label="Administración y finanzas" value={7} />
        <Bar label="Comunicación y marketing" value={5} />
        <Bar label="Sensibilización" value={4} />
        <Bar label="Dirección y coordinación" value={3} />
        <Bar label="Cooperación y ayuda humanitaria" value={3} />
        <Bar label="Otras (RRHH, legal, IT…)" value={3} />
      </div>

      <h2>Perfiles emergentes</h2>
      <div className="cards-grid">
        <div className="mini-card">
          <h4>Digitalización + propósito</h4>
          <p>Comunicación digital, marketing, datos, analítica y captación online. Aparecen tanto en
          fundraising como en sensibilización.</p>
        </div>
        <div className="mini-card">
          <h4>Tecnología aplicada</h4>
          <p>Desarrollo, ciberseguridad y formación digital. También perfiles formadores en programas con colectivos.</p>
        </div>
        <div className="mini-card">
          <h4>Gestión de proyectos europea</h4>
          <p>Redacción de propuestas, justificación de subvenciones y conocimiento de marcos como UE o cooperación.</p>
        </div>
        <div className="mini-card">
          <h4>Cuidados especializados</h4>
          <p>Atención directa a colectivos con necesidades específicas: salud mental, dependencia, infancia,
          violencia de género, migración.</p>
        </div>
      </div>

      <Callout kind="tip" label="Antes de abrir una vacante">
        <p style={{ margin: 0 }}>
          Pregúntate si lo que buscas es <em>un perfil</em> o <em>una combinación de competencias</em>. La
          segunda mirada abre el embudo de candidaturas y reduce el sesgo del currículum tipo.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 3. Qué valoran las personas candidatas
function OngValoran() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="valoran"
      related={[
        { area: "Soy una ONG", title: "Transparencia salarial", to: "/ong/transparencia" },
        { area: "Soy una ONG", title: "Atraer y fidelizar talento", to: "/ong/talento" },
        { area: "Busco empleo", title: "Cómo buscar trabajo", to: "/busco-empleo/como-buscar" },
      ]}>
      <Eyebrow>Para entidades · Expectativas</Eyebrow>
      <h1>Qué valoran las personas que se postulan a tus ofertas.</h1>
      <p className="lede">
        Lo que mueve a las personas profesionales del sector va mucho más allá del salario, pero el salario
        también pesa. Estas son las palancas que están funcionando, según lo que vemos en Hacesfalta.org.
      </p>

      <h2>Las palancas que más pesan</h2>
      <div className="cards-grid">
        <div className="mini-card" style={{ borderColor: "var(--pink)", background: "#FFF3FA" }}>
          <h4>Misión y propósito</h4>
        </div>
        <div className="mini-card" style={{ borderColor: "var(--pink)", background: "#FFF3FA" }}>
          <h4>Conciliación y horarios</h4>
        </div>
        <div className="mini-card" style={{ borderColor: "var(--pink)", background: "#FFF3FA" }}>
          <h4>Estabilidad del puesto</h4>
        </div>
        <div className="mini-card" style={{ borderColor: "var(--pink)", background: "#FFF3FA" }}>
          <h4>Salario competitivo</h4>
        </div>
      </div>

      <h2>Qué buscan, en una frase</h2>
      <ul>
        <li><strong>Propósito real:</strong> alinear su trabajo con una causa con la que se identifican.</li>
        <li><strong>Coherencia interna:</strong> que la entidad practique lo que predica (igualdad, cuidado,
        inclusión).</li>
        <li><strong>Conciliación:</strong> jornada razonable, flexibilidad horaria, teletrabajo cuando es
        posible.</li>
        <li><strong>Estabilidad:</strong> contrato indefinido, recorrido a medio plazo.</li>
        <li><strong>Salario digno:</strong> que reconozca el trabajo realizado. Solo el 14% de las mujeres del
        sector siente que su salario refleja su contribución.</li>
        <li><strong>Aprendizaje:</strong> formación, mentorías, posibilidad de desarrollarse.</li>
        <li><strong>Cuidado emocional:</strong> supervisión profesional, espacios para procesar el desgaste.</li>
      </ul>

      <Callout kind="tip" label={'Cuidado con la “vocación”'}>
        <p style={{ margin: 0 }}>
          La vocación no es una excusa para ofrecer condiciones por debajo del mercado. Cada vez más
          profesionales lo verbalizan abiertamente, especialmente en perfiles cualificados.
        </p>
      </Callout>

      <h2>Lo que las hace marcharse</h2>
      <ul>
        <li>Sobrecarga sostenida sin reconocimiento.</li>
        <li>Falta de transparencia en decisiones y promoción.</li>
        <li>Procesos de selección largos, opacos o sin feedback.</li>
        <li>Discurso de cuidados que no se traduce en políticas reales.</li>
      </ul>

      <Callout kind="data" label="Descubre más">
        <p style={{ margin: 0 }}>
          Si quieres conocer con más profundidad qué hace que una persona trabajadora quiera acercarse al sector,
          lee el último{' '}
          <a href={utmLink("https://d25ltszcjeom5i.cloudfront.net/244438/lisiehvqxd/Atraccion_fidelizacion_y_perdida_del_talentoTSAS.pdf")} target="_blank" rel="noopener">informe del Observatorio para la Sostenibilidad de la Acción Social</a>.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 4. Redactar ofertas
function OngOfertas() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="ofertas"
      related={[
        { area: "Soy una ONG", title: "Buenas prácticas en selección", to: "/ong/seleccion" },
        { area: "Soy una ONG", title: "Inclusión y accesibilidad", to: "/ong/inclusion" },
        { area: "Busco empleo", title: "Qué se pide en cada oferta", to: "/busco-empleo/ofertas" },
      ]}>
      <Eyebrow>Para entidades · Redacción</Eyebrow>
      <h1>Cómo redactar ofertas más claras, inclusivas y atractivas.</h1>
      <p className="lede">
        Una buena oferta multiplica las candidaturas adecuadas y reduce las descartadas por desajuste. Estas
        son las pautas que mejor funcionan en el portal.
      </p>

      <h2>Los 7 imprescindibles de una buena oferta</h2>
      <Checklist items={[
        "Título claro y concreto: nombre del puesto + especialización si la hay (no 'buscamos crack').",
        "Misión del puesto en 2-3 líneas: qué problema resuelve y dentro de qué proyecto.",
        "Funciones principales (5-8 puntos), priorizadas y sin generalidades.",
        "Requisitos imprescindibles separados de los deseables.",
        "Condiciones explícitas: jornada, ubicación, modalidad, salario (rango), tipo de contrato.",
        "Proceso de selección: cuántas fases, qué tipo de pruebas, plazo estimado.",
        "Persona o equipo técnico y forma de contacto.",
      ]} />

      <h2>Errores frecuentes que conviene evitar</h2>
      <Accordion items={[
        { q: "Listas infinitas de requisitos",
          a: <p>Cuando todo es imprescindible, nada lo es. Reduce a 5 imprescindibles reales. El resto, deseables.
          Las listas largas filtran fuera a candidaturas válidas, especialmente de mujeres y de perfiles
          minorizados.</p> },
        { q: "Lenguaje masculino genérico",
          a: <p>Habla de “persona responsable”, “persona técnica”, “quien ocupe el puesto”. Si usas la fórmula
          doble (responsable/a), aplícala de forma coherente en toda la oferta.</p> },
        { q: "Salario oculto o ambiguo",
          a: <p>“Salario según valía” o “a negociar” son banderas rojas para muchas candidaturas. Indica al
          menos un rango. Más en <Link to="/ong/transparencia">Transparencia salarial</Link>.</p> },
        { q: "Funciones que en realidad son tres puestos",
          a: <p>Si listas funciones de dirección, técnica y administración a la vez, recibirás candidaturas
          desalineadas. Reformula la vacante o explica que es un puesto híbrido y por qué.</p> },
        { q: "Tono institucional, lejano o aspiracional",
          a: <p>Ni demasiada épica, ni lenguaje gris. Se puede “buscar a alguien apasionado/a, resiliente…”,
          al tiempo que se habla de problemas concretos y retos reales. Con qué se va a encontrar una persona
          que va a trabajar es siempre lo más importante, sin dulcificar ni sonar impersonal.</p> },
      ]} />

      <h2>Plantilla rápida</h2>
      <Callout kind="info" label="Estructura modelo">
        <ol style={{ marginBottom: 0 }}>
          <li><strong>Quiénes somos</strong> (3 líneas + enlace a misión completa).</li>
          <li><strong>Qué buscamos</strong> (puesto + propósito del puesto).</li>
          <li><strong>Funciones</strong> (5-8 puntos).</li>
          <li><strong>Te encajará si…</strong> (requisitos imprescindibles).</li>
          <li><strong>Suma puntos si…</strong> (deseables).</li>
          <li><strong>Lo que ofrecemos</strong> (condiciones, salario, conciliación, formación).</li>
          <li><strong>El proceso</strong> (fases, plazos, contacto).</li>
        </ol>
      </Callout>

      <Callout kind="tip" label="Amplía tu alcance">
        <p style={{ margin: 0 }}>
          Si el puesto es compatible con personas con discapacidad, publica también en{' '}
          <a href={utmLink("https://hazloinclusivo.org/")} target="_blank" rel="noopener"><strong>Hazloinclusivo.org</strong></a>,
          el portal de empleo inclusivo de Fundación Hazloposible. Llegarás a candidaturas cualificadas
          que buscan activamente entidades comprometidas con la diversidad funcional.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 5. Buenas prácticas en selección
function OngSeleccion() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="seleccion"
      related={[
        { area: "Soy una ONG", title: "Inclusión y accesibilidad", to: "/ong/inclusion" },
        { area: "Soy una ONG", title: "Transparencia salarial", to: "/ong/transparencia" },
        { area: "Busco empleo", title: "Entrevistas laborales", to: "/busco-empleo/entrevista" },
      ]}>
      <Eyebrow>Para entidades · Selección</Eyebrow>
      <h1>Buenas prácticas en procesos de selección.</h1>
      <p className="lede">
        Un proceso de selección es siempre una experiencia para la persona candidata, gane o no la plaza. Es
        también una de las primeras pruebas reales de los valores de tu entidad. Estas prácticas elevan la
        calidad sin alargar los plazos.
      </p>

      <h2>Antes del proceso</h2>
      <ul>
        <li><strong>Define el puesto con claridad</strong>: rol, encaje con el equipo, expectativas a 3, 6 y 12
        meses.</li>
        <li><strong>Acuerda criterios de evaluación</strong> antes de leer ningún CV. Reduce el sesgo.</li>
        <li><strong>Diseña fases proporcionales</strong>. Tres entrevistas son suficientes para casi cualquier
        vacante.</li>
        <li><strong>Comunica el proceso completo</strong> ya en la oferta (fases, plazos, pruebas).</li>
      </ul>

      <h2>Durante</h2>
      <Accordion items={[
        { q: "Entrevistas estructuradas",
          a: <p>Mismas preguntas a todas las personas candidatas, evaluadas con escala. Es la práctica con más
          evidencia para reducir sesgos y mejorar la predicción.</p> },
        { q: "Comité diverso",
          a: <p>Cuando es posible, que entrevisten al menos dos personas con perfiles distintos. Cierras
          puntos ciegos y enriqueces la mirada.</p> },
        { q: "Pruebas técnicas razonables",
          a: <p>Una prueba que requiera más de 2-3 horas debería pagarse o sustituirse por una conversación
          sobre trabajos previos.</p> },
        { q: "Respeta el tiempo",
          a: <p>Cumple los plazos comprometidos. Si se alarga el proceso, comunica el porqué.</p> },
        { q: "Feedback siempre",
          a: <p>Devuelve respuesta a todas las personas que pasaron una primera entrevista, aunque sea breve.
          Es un mínimo de respeto y mejora tu reputación como empleador.</p> },
      ]} />

      <h2>Después</h2>
      <ul>
        <li><strong>Onboarding cuidado</strong>: las dos primeras semanas marcan la permanencia futura.</li>
        <li><strong>Manda referentes</strong>: una persona buddy, una conversación con dirección, claridad
        sobre objetivos a 30/60/90 días.</li>
        <li><strong>Cierra el círculo</strong>: pregunta a la persona contratada cómo ha vivido el proceso.
        Vas a mejorar el siguiente.</li>
      </ul>

      <Callout kind="tip" label="Una buena norma">
        <p style={{ margin: 0 }}>
          <strong>Tres semanas, tres fases.</strong> Más allá de eso, pierdes candidaturas valiosas y la
          calidad del proceso decae.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 6. Transparencia salarial
function OngTransparencia() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="transparencia"
      related={[
        { area: "Soy una ONG", title: "Redactar ofertas claras e inclusivas", to: "/ong/ofertas" },
        { area: "Conocer el sector", title: "Diversidad, igualdad e inclusión", to: "/general/dei" },
        { area: "Busco empleo", title: "Qué se pide en cada oferta", to: "/busco-empleo/ofertas" },
      ]}>
      <Eyebrow>Para entidades · Salario</Eyebrow>
      <h1>Transparencia salarial: el cambio que más diferencia hoy.</h1>
      <p className="lede">
        Publicar salarios deja de ser una excepción para convertirse en estándar. La Directiva europea de
        transparencia retributiva entra en aplicación en 2026: te conviene anticiparte y, sobre todo, ganar
        confianza con tus candidaturas.
      </p>

      <h2>Por qué importa</h2>
      <ul>
        <li>Atrae candidaturas mejor alineadas y reduce conversaciones forzadas al final del proceso.</li>
        <li>Reduce brechas salariales por género y por origen, históricamente más opacas.</li>
        <li>Refuerza la coherencia con los valores que tu entidad defiende públicamente.</li>
      </ul>

      <h2>Cuatro niveles de transparencia (elige el tuyo)</h2>
      <div className="cards-grid">
        <div className="mini-card"><h4>1 · Mínimo legal</h4>
          <p>Comunicas el salario tras la primera entrevista, si la persona lo pide.</p></div>
        <div className="mini-card"><h4>2 · Rango público</h4>
          <p>Publicas en la oferta un rango (p. ej. 24-28k €) con la franja real.</p></div>
        <div className="mini-card"><h4>3 · Salario fijo público</h4>
          <p>Indicas la cifra exacta del puesto, no un rango.</p></div>
        <div className="mini-card"><h4>4 · Política completa</h4>
          <p>Publicas tu política salarial (bandas por nivel, criterios de progresión).</p></div>
      </div>

      <Callout kind="info" label="Lo que dicen las personas candidatas">
        <p style={{ margin: 0 }}>
          Una mayoría descarta ofertas sin rango salarial antes de empezar a leerlas. La transparencia es,
          también, eficacia.
        </p>
      </Callout>

      <h2>Cómo construir tu rango si no lo tienes</h2>
      <ol>
        <li>Mira datos del sector (puedes apoyarte en <Link to="/general/datos">los nuestros</Link>).</li>
        <li>Define nivel del puesto: empleado/a, especialista, mando intermedio, dirección.</li>
        <li>Cruza con tu realidad presupuestaria y con tu política interna de equidad.</li>
        <li>Define una franja del 15-20% de amplitud. Publica esa franja.</li>
      </ol>
    </ArticlePage>
  );
}

// 7. Inclusión y accesibilidad
function OngInclusion() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="inclusion"
      related={[
        { area: "Conocer el sector", title: "Diversidad, igualdad e inclusión", to: "/general/dei" },
        { area: "Soy una ONG", title: "Buenas prácticas en selección", to: "/ong/seleccion" },
        { area: "Soy una ONG", title: "Redactar ofertas", to: "/ong/ofertas" },
      ]}>
      <Eyebrow>Para entidades · Inclusión</Eyebrow>
      <h1>Inclusión y accesibilidad en los procesos de selección.</h1>
      <p className="lede">
        El Tercer Sector tiene la responsabilidad de ser un referente en inclusión también puertas adentro. La
        coherencia entre lo que se defiende fuera y lo que se hace en RRHH es uno de los factores que más mira
        la gente que trabaja en el sector.
      </p>

      <h2>Antes de publicar la oferta</h2>
      <ul>
        <li><strong>Revisa requisitos formales innecesarios</strong>: titulaciones rígidas, años exactos de
        experiencia, idiomas que no son críticos para el puesto.</li>
        <li><strong>Lenguaje:</strong> inclusivo y claro. Frases cortas, sin jergas innecesarias, evitando
        masculino genérico.</li>
        <li><strong>Accesibilidad del texto:</strong> contraste suficiente, tamaño legible, estructura con
        subtítulos.</li>
      </ul>

      <h2>Durante el proceso</h2>
      <Accordion items={[
        { q: "Ajustes razonables, ofrecidos por defecto",
          a: <p>Incluye en la convocatoria una frase como: “Si necesitas algún ajuste para participar en el
          proceso (espacio accesible, intérprete, más tiempo en una prueba, etc.), escríbenos a XXX”.
          Hazlo proactivo, no a demanda.</p> },
        { q: "Selección a ciegas en la primera criba",
          a: <p>Elimina nombre, foto y datos personales en la primera revisión. Reduce sesgos por género,
          origen o edad.</p> },
        { q: "Pruebas adaptadas",
          a: <p>Diseña pruebas que evalúen la competencia real, no estilos verbales o cultura previa. Si una
          persona necesita más tiempo o un formato distinto, ofrécelo.</p> },
        { q: "Comité diverso",
          a: <p>Diversidad en la mesa de evaluación: género, origen, edad, área. Cierra puntos ciegos.</p> },
      ]} />

      <h2>Después</h2>
      <ul>
        <li><strong>Onboarding accesible</strong>: revisa entornos físicos, materiales y herramientas
        digitales (lectores de pantalla, subtítulos).</li>
        <li><strong>Mide:</strong> registra de forma anónima datos de diversidad en candidaturas y
        contrataciones. Sin datos no puedes mejorar.</li>
        <li><strong>Forma a tu equipo</strong> en sesgos, en lenguaje inclusivo y en cuidado de la diversidad
        en el día a día.</li>
      </ul>

      <Callout kind="tip" label="Punto de partida">
        <p style={{ margin: 0 }}>
          Si nunca has trabajado este eje, empieza por una sola política de impacto rápido (p. ej., ajustes
          razonables ofrecidos por defecto) y comunícala internamente. Pequeños cambios cambian la cultura.
        </p>
      </Callout>

      <Callout kind="info" label="Publica también en Hazloinclusivo.org">
        <p style={{ margin: 0 }}>
          <a href={utmLink("https://hazloinclusivo.org/")} target="_blank" rel="noopener"><strong>Hazloinclusivo.org</strong></a> es
          el portal de empleo de Fundación Hazloposible orientado a personas con discapacidad. Si tu entidad
          apuesta por la contratación inclusiva, publica tus ofertas también allí y amplía el alcance
          hacia candidaturas que muchas veces no llegan a los canales generalistas.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 8. Atraer y fidelizar talento
function OngTalento() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="talento"
      related={[
        { area: "Soy una ONG", title: "Qué valoran las personas candidatas", to: "/ong/valoran" },
        { area: "Soy una ONG", title: "Transparencia salarial", to: "/ong/transparencia" },
        { area: "Soy una ONG", title: "Cómo publicar en Hacesfalta.org", to: "/ong/publicar" },
      ]}>
      <Eyebrow>Para entidades · Talento</Eyebrow>
      <h1>Cómo atraer y fidelizar talento en el Tercer Sector.</h1>
      <p className="lede">
        El sector compite por perfiles cualificados con otros sectores. La buena noticia: tienes palancas
        propias muy potentes (propósito, autonomía, impacto). La menos buena: necesitas activarlas con
        intención, no esperar a que actúen solas.
      </p>

      <h2>Tu marca empleadora, paso a paso</h2>
      <ChipRow chips={[
        {
          label: "Propósito",
          content: (
            <div>
              <h3>Cuenta lo que haces, no solo lo que eres</h3>
              <p>
                Las personas candidatas no quieren un manifiesto: quieren saber qué proyectos están vivos, qué
                problemas concretos resuelves y qué impacto miden. Sustituye lo institucional por casos reales,
                voces de equipo y datos verificables.
              </p>
              <ul>
                <li>Publica testimonios cortos de personas del equipo.</li>
                <li>Comparte logros y aprendizajes, también lo que no salió.</li>
                <li>Enlaza la oferta a un proyecto concreto, no a “la misión”.</li>
              </ul>
            </div>
          )
        },
        {
          label: "Condiciones",
          content: (
            <div>
              <h3>Lo básico tiene que estar</h3>
              <p>
                No hay relato que sustituya unas condiciones mínimas. Repasa: salario, jornada, conciliación,
                contrato, formación, supervisión.
              </p>
              <Checklist items={[
                "Salario publicado en la oferta (al menos rango).",
                "Jornada y modalidad (presencial, híbrido, remoto) claras.",
                "Política de teletrabajo escrita.",
                "Vacaciones, permisos y conciliación más allá del convenio.",
                "Plan de formación con presupuesto asignado.",
                "Supervisión y cuidado emocional sistemático.",
              ]} />
            </div>
          )
        },
        {
          label: "Carrera",
          content: (
            <div>
              <h3>Que se vea el recorrido</h3>
              <p>
                Una de las razones más citadas para abandonar el sector es la falta de horizonte profesional.
                Aunque seas una entidad pequeña, puedes ofrecer recorrido.
              </p>
              <ul>
                <li>Define niveles internos con criterios claros (no solo años).</li>
                <li>Revisa progresión y salario al menos una vez al año.</li>
                <li>Habilita itinerarios laterales (cambiar de área dentro de la entidad).</li>
                <li>Apoya formación externa con tiempo y presupuesto.</li>
              </ul>
            </div>
          )
        },
        {
          label: "Cultura",
          content: (
            <div>
              <h3>Cuidado de equipo, en políticas no en discursos</h3>
              <ul>
                <li><strong>Supervisión profesional</strong> para perfiles de atención directa.</li>
                <li><strong>Espacios de equipo</strong> con tiempo real (no robar tiempo a otras reuniones).</li>
                <li><strong>Liderazgo formado</strong> en gestión de personas, no solo en gestión técnica.</li>
                <li><strong>Mediciones</strong> de clima y satisfacción periódicas, con devolución pública.</li>
              </ul>
            </div>
          )
        }
      ]} />

      <Callout kind="tip" label="Empieza por una cosa">
        <p style={{ margin: 0 }}>
          Cambiar todo a la vez es inviable. Elige <strong>una palanca</strong> al trimestre (p. ej.
          transparencia salarial, supervisión, política de teletrabajo) y comunícala como un hito interno.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 9. Publicar en Hacesfalta.org
function OngPublicar() {
  return (
    <ArticlePage area={ONG_AREA} items={ONG_ITEMS} slug="publicar"
      related={[
        { area: "Soy una ONG", title: "Redactar ofertas claras e inclusivas", to: "/ong/ofertas" },
        { area: "Busco empleo", title: "Cómo usar Hacesfalta.org", to: "/busco-empleo/portal" },
        { area: "Soy una ONG", title: "Buenas prácticas en selección", to: "/ong/seleccion" },
      ]}>
      <Eyebrow>Para entidades · Portal</Eyebrow>
      <h1>Cómo publicar y conectar con profesionales en Hacesfalta.org.</h1>
      <p className="lede">
        Hacesfalta.org es el portal de empleo, voluntariado y solidaridad del Tercer Sector en España. Más de
        10.000 entidades y 1,3 millones de personas usuarias particulares lo utilizan. Estas son las
        recomendaciones para sacarle el máximo partido como entidad.
      </p>

      <h2>Tu ficha de entidad</h2>
      <ul>
        <li><strong>Verifica</strong> tu organización en el portal (acelera el contacto con candidaturas).</li>
        <li><strong>Cuenta quién sois</strong> de forma clara: misión, ámbito, proyectos, equipo.</li>
        <li><strong>Mantén actualizadas</strong> las personas de contacto y la dirección.</li>
      </ul>

      <h2>Cómo publicar una oferta</h2>
      <Accordion items={[
        { q: "1. Elige bien la categoría",
          a: <p>Selecciona la categoría principal que mejor refleje el puesto. Si la oferta es híbrida,
          considera una segunda categoría.</p> },
        { q: "2. Aplica nuestra plantilla",
          a: <p>Sigue la <Link to="/ong/ofertas">estructura recomendada</Link>: quiénes sois, qué buscáis,
          funciones, requisitos, condiciones, proceso.</p> },
        { q: "3. Publica el salario",
          a: <p>Al menos un rango. Te ayuda a recibir candidaturas mejor alineadas. Más en <Link
          to="/ong/transparencia">Transparencia salarial</Link>.</p> },
        { q: "4. Aprovecha los filtros",
          a: <p>Aplica con cuidado los filtros (ubicación, contrato, jornada). Determinarán qué candidaturas
          encuentran tu oferta.</p> },
        { q: "5. Comparte y difunde",
          a: <p>Comparte la oferta en redes sociales y newsletter propia. Si nos etiquetas (@hacesfalta_org), te
          ayudamos a amplificar.</p> },
      ]} />

      <p>
        Si tienes dudas, usa nuestra{' '}
        <a href={utmLink("https://www.hacesfalta.org/userfiles/Hacesfalta/Guia-publicacion-ofertas-empleo-Hacesfalta.pdf")} target="_blank" rel="noopener">guía de publicación de ofertas</a>.
      </p>

      <h2>Otros servicios útiles</h2>
      <div className="cards-grid">
        <div className="mini-card">
          <h4>Búsqueda de personas voluntarias</h4>
          <p>Más allá del empleo, el portal te permite captar voluntariado para proyectos puntuales o de larga duración.</p>
        </div>
        <div className="mini-card">
          <h4>Formación gratuita</h4>
          <p>Webinars, materiales y guías para responsables de equipos y de comunicación del sector.</p>
        </div>
        <div className="mini-card">
          <h4>Top 10 semanal</h4>
          <p>Si tu oferta está bien redactada y tiene condiciones competitivas, tiene opciones de aparecer en nuestro Top semanal.</p>
        </div>
        <a href={utmLink("https://hazloinclusivo.org/")} target="_blank" rel="noopener" className="mini-card" style={{ borderColor: "var(--pink)" }}>
          <h4 style={{ color: "var(--pink-deep)" }}>Hazloinclusivo.org</h4>
          <p>Portal de empleo para personas con discapacidad. Publica tus ofertas inclusivas y llega a candidaturas que buscan entidades comprometidas.</p>
        </a>
      </div>

      <CTABlock
        title="Publica tu primera oferta"
        sub="Una de las redes de empleo social más grandes en español."
        btnLabel="Publicar oferta"
        btnHref="https://hacesfalta.org" />

      <div style={{ marginTop: 40 }}>
        <p>
          Desde el equipo de Hacesfalta.org damos aquí por finalizada la Guía de 2026 junto a las entidades y
          profesionales que integran nuestra red, con quienes seguimos avanzando hacia una meta compartida:
          generar un impacto positivo, sostenible y duradero en la sociedad.
        </p>
        <p>
          Este 2025 ha sido especialmente significativo para el equipo de Hacesfalta.org. Durante este periodo
          hemos consolidado importantes mejoras en la plataforma web, impulsadas en gran parte por las
          aportaciones y la participación activa de quienes formáis parte de esta comunidad.
        </p>
        <p>
          De este modo, reforzamos nuestro papel como puente entre la ciudadanía y las organizaciones que buscan
          sumar esfuerzos para fortalecer el ámbito social. Continuamos trabajando en la evolución del portal,
          con el objetivo de ofrecer recursos y herramientas útiles, y facilitar un espacio fiable y de calidad
          donde acceder a oportunidades alineadas con los valores de igualdad e inclusión, pilares fundamentales
          del Tercer Sector.
        </p>
      </div>
    </ArticlePage>
  );
}

window.OngLanding = OngLanding;
window.OngContexto = OngContexto;
window.OngPerfiles = OngPerfiles;
window.OngValoran = OngValoran;
window.OngOfertas = OngOfertas;
window.OngSeleccion = OngSeleccion;
window.OngTransparencia = OngTransparencia;
window.OngInclusion = OngInclusion;
window.OngTalento = OngTalento;
window.OngPublicar = OngPublicar;
window.ONG_ITEMS = ONG_ITEMS;
window.ONG_AREA = ONG_AREA;