/* global React, utmLink */

const BUSCO_AREA = { base: "busco-empleo", label: "Busco empleo" };

const BUSCO_ITEMS = [
  { slug: "que-necesito", label: "Qué necesito para trabajar aquí" },
  { slug: "areas", label: "Áreas y perfiles demandados" },
  { slug: "categorias", label: "Categorías de empleo" },
  { slug: "ofertas", label: "Qué se pide en cada oferta" },
  { slug: "soft-skills", label: "Soft skills" },
  { slug: "como-buscar", label: "Cómo buscar trabajo" },
  { slug: "cv", label: "Cómo preparar tu CV" },
  { slug: "carta", label: "Carta de presentación" },
  { slug: "email", label: "El email de candidatura" },
  { slug: "entrevista", label: "Entrevistas laborales" },
  { slug: "portal", label: "Cómo usar Hacesfalta.org" },
];

function BuscoLanding() {
  const { go } = useRoute();
  // Display order on the landing differs from BUSCO_ITEMS (which keeps the
  // logical "guide" order for the side-nav and prev/next): on the landing we
  // surface "Cómo buscar trabajo" first as the natural entry point.
  const displayOrder = [
    "que-necesito", "areas", "categorias", "ofertas",
    "soft-skills", "como-buscar", "cv", "carta", "email", "entrevista", "portal",
  ];
  const landingCards = displayOrder
    .map(slug => BUSCO_ITEMS.find(i => i.slug === slug))
    .filter(Boolean);

  const HIGHLIGHTS = {
    "que-necesito": { tag: "Empieza aquí", note: "El punto de partida para conocer el trabajo en el Tercer Sector." },
    "soft-skills": { tag: "Las más demandadas", note: "Las 7 habilidades blandas que más se piden en el sector." },
  };

  return (
    <main>
      <Breadcrumbs trail={[{ label: "Inicio", to: "/" }, { label: "Busco empleo" }]} />
      <section className="wrap hero" style={{ paddingTop: 8 }}>
        <Eyebrow>Apartado para demandantes de empleo</Eyebrow>
        <h1 style={{ marginTop: 16 }}>Encontrar tu trabajo en el <span className="accent">Tercer Sector</span>.</h1>
        <p className="lede">
          Una guía paso a paso: qué se busca, cómo organizar la búsqueda, cómo preparar tu candidatura, cómo
          encarar la entrevista y cómo destacar en Hacesfalta.org. Léelo todo o salta a lo que te haga falta.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
          <button className="btn btn-pink" onClick={() => go("/busco-empleo/que-necesito")}>Conoce el trabajo del Tercer Sector</button>
          <button className="btn btn-ghost" onClick={() => go("/busco-empleo/como-buscar")}>Ir directamente a cómo buscar trabajo</button>
        </div>
      </section>
      <section className="wrap section-tight">
        <div className="cards-grid">
          {landingCards.map(it => {
            const h = HIGHLIGHTS[it.slug];
            return (
              <a key={it.slug}
                 className={"mini-card" + (h ? " mini-card-highlight" : "")}
                 href={publicHref(`/busco-empleo/${it.slug}`)}>
                {h && <span className="mini-card-tag">{h.tag}</span>}
                <Icon slug={it.slug} />
                <h4>{it.label}</h4>
                {h && <p>{h.note}</p>}
              </a>
            );
          })}
        </div>
      </section>
    </main>
  );
}

// 6.0 ¿Qué necesito para trabajar?
function BuscoQueNecesito() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="que-necesito"
      related={[
        { area: "Busco empleo", title: "Áreas y perfiles demandados", to: "/busco-empleo/areas" },
        { area: "Conocer el sector", title: "Entidades sociales donde trabajar", to: "/general/entidades" },
        { area: "Busco empleo", title: "Soft skills", to: "/busco-empleo/soft-skills" },
      ]}>
      <Eyebrow>6 · Qué necesito para trabajar aquí</Eyebrow>
      <h1>Mucho más que vocación (pero también vocación).</h1>
      <p className="lede">
        La base para trabajar en el Tercer Sector es contar con una auténtica vocación social y un compromiso
        real con la causa que defiende la organización a la que te quieres unir. Pero el sector es mucho más
        amplio de lo que parece.
      </p>

      <p>
        A menudo el empleo en este ámbito se asocia <strong>únicamente</strong> con el voluntariado o con
        profesiones como el trabajo o la educación social. La realidad es otra: el Tercer Sector reúne a
        profesionales de muy distintos campos y trayectorias.
      </p>

      <Callout kind="tip" label="Esto también es Tercer Sector">
        <p style={{ margin: 0 }}>
          Cocina, terapia, comunicación, informática, administración, gestión de proyectos, diseño,
          ingeniería… Todas estas funciones son esenciales para que las organizaciones puedan impulsar
          iniciativas solidarias y apoyar a colectivos vulnerables.
        </p>
      </Callout>

      <h2>Qué se necesita, en una frase</h2>
      <ul>
        <li><strong>Compromiso con la causa</strong> de la entidad donde quieres trabajar.</li>
        <li><strong>Formación o experiencia</strong> en el área profesional al que aspiras.</li>
        <li><strong>Soft skills</strong> alineadas con el trabajo en equipo y con colectivos diversos.</li>
        <li><strong>Curiosidad y aprendizaje continuo</strong>, porque el sector cambia rápido.</li>
      </ul>

      <p>
        Lo importante es entender que este ámbito también puede ser <strong>una oportunidad para ti</strong>.
        Hay opciones para perfiles muy diversos y provenientes de distintas áreas profesionales.
        Si eres una persona con discapacidad, consulta también las ofertas de{' '}
        <a href={utmLink("https://hazloinclusivo.org/")} target="_blank" rel="noopener"><strong>Hazloinclusivo.org</strong></a>,
        el portal de empleo inclusivo de Fundación Hazloposible.
      </p>
    </ArticlePage>
  );
}

// 6.1 Áreas y perfiles demandados
function BuscoAreas() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="areas"
      related={[
        { area: "Busco empleo", title: "Categorías de empleo", to: "/busco-empleo/categorias" },
        { area: "Busco empleo", title: "Qué se pide en cada oferta", to: "/busco-empleo/ofertas" },
        { area: "Conocer el sector", title: "El sector en datos", to: "/general/datos" },
      ]}>
      <Eyebrow>6.1 · Áreas y perfiles demandados</Eyebrow>
      <h1>Las ofertas del Tercer Sector, de un vistazo.</h1>
      <p className="lede">
        El Tercer Sector cambia constantemente: por las nuevas problemáticas y emergencias, por los cambios en
        los modelos de trabajo y por la incorporación de tecnología. Las entidades buscan talento de forma
        permanente, y saber <strong>dónde</strong> y <strong>cómo</strong> buscar es ya medio camino.
      </p>

      <Callout kind="tip" label="Dato clave">
        <p style={{ margin: 0 }}>
          Solo <strong>1 de cada 4 ofertas</strong> está pensada para un único perfil profesional. La mayoría
          buscan combinaciones de competencias. Descubre las ofertas en{' '}
          <a href={utmLink("https://www.hacesfalta.org/")} target="_blank" rel="noopener">Hacesfalta.org</a>.
        </p>
      </Callout>

      <p>
        Muchas organizaciones apuestan ya por equipos <strong>multidisciplinares y transversales</strong>:
        no cuenta solo qué has estudiado, sino cómo te desenvuelves en distintas áreas y con personas de
        distintas formaciones.
      </p>

      <h2>Las 9 áreas profesionales más demandadas</h2>
      <p>
        Donde se concentra la demanda en el sector. Más de la mitad de las ofertas son de <strong>atención
        directa</strong>; el resto se reparte entre nueve áreas con perfiles muy distintos.
      </p>

      <AreaProportionChart
        segments={[
          { label: "Atención directa", value: 52, big: true },
          { label: "Gestión de proyectos", value: 14 },
          { label: "Personal de servicio", value: 9 },
          { label: "Administración y finanzas", value: 7 },
          { label: "Comunicación y marketing", value: 5 },
          { label: "Sensibilización", value: 4 },
          { label: "Dirección y coordinación", value: 3 },
          { label: "Cooperación y ayuda humanitaria", value: 3 },
          { label: "Otras (RRHH, legal, informática…)", value: 3 },
        ]}
      />
      <p style={{ fontSize: "0.86rem", color: "var(--ink-3)", marginTop: 12 }}>
        Fuente: Guía del empleo en el Tercer Sector 2026, p. 29. Distribución de ofertas publicadas en
        Hacesfalta.org durante 2025.
      </p>

      <Callout kind="tip" label="¿Cómo encuentro mi perfil?">
        <p style={{ margin: 0 }}>
          En la siguiente sección desglosamos las <Link to="/busco-empleo/categorias">12 categorías</Link> en
          las que Hacesfalta.org organiza sus ofertas, con los perfiles más buscados en cada una.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 6.1b Categorías de empleo
function BuscoCategorias() {
  const cats = [
    { name: "Administración y finanzas",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4008",
      desc: "Contabilidad, gestión financiera y administrativa. A veces gestión laboral y RRHH (nóminas, contratos). En 2025 ha habido más oportunidades que nunca." },
    { name: "Atención directa",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4002",
      desc: "Más de la mitad de las ofertas del sector. Trabajo y cuidado de colectivos vulnerables, protección de entornos naturales, formación, intervención socioeducativa. Perfiles: sanitarios, integración social, cuidados, monitores/as, educadores/as sociales, terapeutas, psicólogos/as, profesores/as, pedagogos/as." },
    { name: "Comunicación y marketing",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4014",
      desc: "Crecimiento sostenido en la rama digital: SEO, redes sociales, métricas, contenidos. Roles: responsables de comunicación o marketing, community managers, comunicación interna, alianzas, gestión de contenidos web y de campañas." },
    { name: "Cooperación, emergencia y ayuda humanitaria",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4004",
      desc: "Conflictos internacionales, catástrofes y políticas migratorias generan más necesidad de profesionales: cuidados, derechos, desarrollo sostenible. Ofertas en terreno y en países de destino. Suelen pedir experiencia previa en terreno, idiomas y formación superior." },
    { name: "Dirección y coordinación",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4001",
      desc: "Profesionales con trayectoria en gestión de entidades: implantación y desarrollo de procesos, medición de impacto, gestión de equipos. Perfiles altamente cualificados para responsabilidad." },
    { name: "Fundraising",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4007",
      desc: "Recaudación de fondos: técnicas online de captación, modelos híbridos y trabajo a pie de calle. Perfiles: comunicación, marketing, administración de empresas, captación de socios/as, alianzas con empresas." },
    { name: "Gestión de proyectos",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4003",
      desc: "Tercera categoría más demandada. Redacción de propuestas, ejecución, gestión de subvenciones (de la solicitud a la justificación). Pide visión analítica, estratégica y capacidad de adaptación." },
    { name: "Informática y tecnología",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4005",
      desc: "Desarrollo y mantenimiento web, software, ciberseguridad. La IA está cada vez más presente. También se demandan perfiles formadores: profesor/a de informática, formador/a de proyecto digital." },
    { name: "Legal y jurídico",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4010",
      desc: "Asesoría jurídica para colectivos: mujeres víctimas de violencia, personas refugiadas, extranjeras… Es necesario conocer al colectivo además del marco legal. También gestión de RRHH e incidencia política." },
    { name: "Personal de servicio",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4012",
      desc: "Área transversal entre las más demandadas. Cuidadores/as, cocineros/as, auxiliares, limpieza, transporte. Y perfiles que también aparecen en Atención Directa: fisioterapeutas, enfermería, psicología, monitores/as." },
    { name: "RRHH y gestión de personas",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4011",
      desc: "Recursos humanos y gestión de personal: administración, prospección y orientación laboral, inserción, coordinación, técnicos/as de empleo o de reclutamiento, derecho, consultoría, docencia." },
    { name: "Sensibilización",
      url: "https://www.hacesfalta.org/oportunidades/remuneradas/Default.aspx?fCategorias=4009",
      desc: "Área transversal ligada a atención directa, cooperación o comunicación. Perfiles: comunicación, marketing, docencia, dinamización de equipos, coordinación de voluntariado, psicología. Muchas ofertas de captación de socios/as e incidencia política." },
  ];
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="categorias"
      related={[
        { area: "Busco empleo", title: "Qué se pide en cada oferta", to: "/busco-empleo/ofertas" },
        { area: "Busco empleo", title: "Cómo usar Hacesfalta.org", to: "/busco-empleo/portal" },
        { area: "Conocer el sector", title: "El sector en datos", to: "/general/datos" },
      ]}>
      <Eyebrow>6.1 · Categorías de empleo</Eyebrow>
      <h1>Las 12 categorías de Hacesfalta.org.</h1>
      <p className="lede">
        En Hacesfalta.org dividimos las ofertas en 12 categorías para que tanto entidades como personas
        encuentren con facilidad lo que buscan. Algunas ofertas pueden aparecer en varias a la vez: muchos roles
        combinan competencias de distintos ámbitos.
      </p>

      <div className="infographic-panel">
        <div className="infographic-panel-head">
          <span className="infographic-tag">Infografía · vista rápida</span>
          <h3>Las 12 categorías, en un vistazo</h3>
        </div>
        <div className="infographic-clusters">
          <div className="cluster cluster--demand">
            <div className="cluster-label">Las más demandadas</div>
            <div className="cluster-items">
              <span>Atención directa</span>
              <span>Gestión de proyectos</span>
              <span>Personal de servicio</span>
              <span>Administración y finanzas</span>
            </div>
          </div>
          <div className="cluster cluster--growth">
            <div className="cluster-label">En crecimiento digital</div>
            <div className="cluster-items">
              <span>Comunicación y marketing</span>
              <span>Informática y tecnología</span>
              <span>Fundraising</span>
            </div>
          </div>
          <div className="cluster cluster--specialized">
            <div className="cluster-label">Especializadas</div>
            <div className="cluster-items">
              <span>Cooperación y ayuda humanitaria</span>
              <span>Dirección y coordinación</span>
              <span>Legal y jurídico</span>
              <span>RRHH y gestión de personas</span>
              <span>Sensibilización</span>
            </div>
          </div>
        </div>
      </div>

      <div className="cards-grid category-grid">
        {cats.map((c, i) => (
          <a key={i} href={utmLink(c.url)} target="_blank" rel="noopener" className="mini-card category-card">
            <h4>{c.name}</h4>
            <p>{c.desc}</p>
            <span className="category-cta">Ver las ofertas de esta categoría en hacesfalta.org ↗</span>
          </a>
        ))}
      </div>

      <Callout kind="info" label="Cómo encontrarlas">
        <p style={{ margin: 0 }}>
          Puedes filtrar por categoría desde el buscador del portal y, dentro de cada una, afinar por salario,
          tipo de contrato, horario o ubicación. Más en <Link to="/busco-empleo/portal">Cómo usar Hacesfalta.org</Link>.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 6.1c Qué se pide en cada oferta
function BuscoOfertas() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="ofertas"
      related={[
        { area: "Busco empleo", title: "Soft skills", to: "/busco-empleo/soft-skills" },
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Soy una ONG", title: "Redactar ofertas claras e inclusivas", to: "/ong/ofertas" },
      ]}>
      <Eyebrow>6.1 · Qué se pide en cada oferta</Eyebrow>
      <h1>Lo común en una oferta tipo del sector.</h1>
      <p className="lede">
        Más allá de la categoría profesional, en casi cualquier oferta del Tercer Sector encontrarás tres cosas:
        un nivel profesional, una experiencia previa esperada y unas habilidades blandas. Aquí te contamos cómo se
        distribuyen.
      </p>

      <h2>Niveles profesionales y salario</h2>
      <p>Los niveles habituales son: <strong>beca / prácticas, empleado/a, especialista, mando intermedio</strong> y <strong>dirección o consejo directivo</strong>. La mayoría de ofertas son indefinidas y se pide un par de años de experiencia previa.</p>

      <div className="stat-row">
        <Stat big="46%" label="Becas y prácticas con algún tipo de remuneración" />
        <Stat big="12-24 k€" label="Salario más frecuente para empleados/as" />
        <Stat big="24-36 k€" label="Franja típica para especialistas y mandos intermedios" />
        <Stat big="8/10" label="Ofertas para dirección con remuneración alta" />
      </div>

      <h3 style={{ marginTop: 36 }}>Distribución salarial por nivel profesional</h3>
      <SalaryBreakdown
        rows={[
          { level: "Becas / prácticas",       becas: 54, low: 36, mid: 10 },
          { level: "Empleado/a",              low: 28, mid: 58, high: 14 },
          { level: "Especialista",            mid: 22, high: 64, top: 14 },
          { level: "Mando intermedio",        mid: 14, high: 56, top: 30 },
          { level: "Dirección",               high: 20, top: 80 },
        ]}
      />
      <p style={{ fontSize: "0.86rem", color: "var(--ink-3)", marginTop: 12 }}>
        Fuente: Guía del empleo en el Tercer Sector 2026, p. 32. Distribución de los salarios brutos anuales
        ofrecidos en Hacesfalta.org durante 2025, por nivel profesional.
      </p>

      <h2>Experiencias previas más valoradas</h2>
      <p>Por nivel profesional:</p>
      <ul>
        <li><strong>Beca / Prácticas:</strong> voluntariado y/o proyectos sociales.</li>
        <li><strong>Empleado/a:</strong> experiencia con colectivos vulnerables y/o intervención social.</li>
        <li><strong>Especialista:</strong> haber trabajado con colectivos específicos.</li>
        <li><strong>Mando intermedio:</strong> gestión de proyectos y equipos.</li>
        <li><strong>Dirección:</strong> haber gestionado y coordinado equipos.</li>
      </ul>

      <h2>Habilidades blandas más demandadas</h2>
      <p>
        Más allá del nivel, hay una soft skill que destaca para todos los puestos: el <strong>trabajo en equipo</strong>.
        Le siguen empatía y comunicación. Después, según el nivel:
      </p>
      <ul>
        <li><strong>Beca / Prácticas:</strong> proactividad y comunicación.</li>
        <li><strong>Empleado/a:</strong> capacidad de organización.</li>
        <li><strong>Especialista:</strong> comunicación oral y escrita, habilidades relacionales y autonomía.</li>
        <li><strong>Mando intermedio:</strong> capacidad organizativa y habilidades comunicativas.</li>
        <li><strong>Dirección:</strong> liderazgo y planificación.</li>
      </ul>

      <h2>Formaciones complementarias más solicitadas</h2>
      <p>Más allá de la formación reglada:</p>
      <ul>
        <li><strong>Beca / Prácticas:</strong> conocimientos digitales e inglés.</li>
        <li><strong>Empleado/a:</strong> herramientas ofimáticas e idiomas (inglés, francés, árabe).</li>
        <li><strong>Especialista:</strong> ofimática, digitales y formaciones en género, igualdad y violencia de género.</li>
        <li><strong>Mando intermedio:</strong> herramientas, idiomas y formación en igualdad.</li>
        <li><strong>Dirección:</strong> conocimiento específico del Tercer Sector, ofimática e idiomas.</li>
      </ul>

      <Callout kind="tip" label="Cómo aprovechar este mapa">
        <p style={{ margin: 0 }}>
          Cruza tu situación con la tabla: ¿qué tienes ya, qué te falta y qué puedes ganar a corto plazo?
          Lo siguiente: <Link to="/busco-empleo/soft-skills">trabajar tus soft skills</Link> y
          <Link to="/busco-empleo/cv"> preparar tu CV</Link>.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 6.2 Cómo buscar trabajo
function BuscoComoBuscar() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="como-buscar"
      related={[
        { area: "Busco empleo", title: "Soft skills", to: "/busco-empleo/soft-skills" },
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Busco empleo", title: "Cómo usar Hacesfalta.org", to: "/busco-empleo/portal" },
      ]}>
      <Eyebrow>6.2 · Cómo buscar trabajo</Eyebrow>
      <h1>Antes de echar candidaturas, <span style={{color:"var(--pink)", fontStyle:"italic"}}>párate a pensar</span>.</h1>
      <p className="lede">
        Buscar trabajo es una tarea que implica tiempo y dedicación. Antes de lanzarte, mira todo con
        perspectiva: cuando tengas claras unas cuantas cosas, los pasos posteriores serán mucho más sencillos.
      </p>

      <h2>Analiza tu situación: hazte las preguntas clave</h2>
      <p>
        Te va a llevar un rato, pero tener esto claro te permitirá enfocar la búsqueda y ser más eficaz.
      </p>

      <Accordion items={[
        { q: "¿Qué tipo de jornada quieres o puedes tener?",
          a: <p>Media jornada, jornada completa o freelance. Cada opción tiene un tipo de oferta distinto.
          Puedes marcar tus preferencias en los filtros del portal.</p> },
        { q: "¿Qué condiciones necesitas más allá del salario?",
          a: <p>Flexibilidad horaria, tiempo de desplazamiento, posibilidad de teletrabajar. Si tu margen de
          movilidad es estrecho, prioriza la ubicación. Si quieres trabajar fuera de España, busca por ámbito
          nacional o internacional.</p> },
        { q: "¿Buscas crecimiento profesional?",
          a: <p>Si una de tus expectativas es evolucionar, valora si los puestos y entidades que te interesan
          ofrecen recorrido a medio plazo.</p> },
        { q: "¿Con qué causa quieres trabajar?",
          a: <p>Tienes que estar convencido/a con la causa para la que vas a trabajar: formará parte de tu día
          a día. Consulta entidades por ámbito de actuación en TransparenciaONG para afinar.</p> },
        { q: "¿Cuáles son tus puntos fuertes y débiles?",
          a: <p>Repasa tu formación, experiencia y competencias. Saber qué dominas te ayudará a contar tu
          perfil con confianza. Saber qué te falta te permitirá decidir si formarte antes de postular.</p> },
      ]} />

      <h2>¿Dónde encontrar oportunidades?</h2>
      <ul>
        <li><strong>Hacesfalta.org:</strong> mantén tu perfil actualizado, visita el portal con frecuencia, crea alertas y suscríbete a la newsletter.</li>
        <li><strong>Webs y redes sociales</strong> de las organizaciones que te interesan, especialmente las que cumplan tus expectativas en cuanto a causa y perfil.</li>
        <li><strong>Eventos del sector:</strong> talleres, charlas, ferias, congresos.</li>
      </ul>

      <h2>Objetivos, organización y productividad</h2>
      <p>
        Sé honesto/a contigo mismo/a. Tras hacerte las preguntas anteriores, ya puedes definir objetivos.
      </p>
      <Callout kind="tip" label="Cómo escribir buenos objetivos">
        <ul style={{ marginBottom: 0 }}>
          <li><strong>Realistas y medibles</strong> en el tiempo.</li>
          <li><strong>Pocos y concretos</strong>, con fechas, mejor que muchos y ambiguos.</li>
          <li><strong>Escritos en un documento</strong> (o nota en el móvil) que consultes con frecuencia.</li>
        </ul>
      </Callout>

      <h3>Tu planning semanal</h3>
      <p>
        Una vez tengas objetivos, conviértelos en tareas y colócalas en un calendario. Reserva espacios para
        cada cosa: candidaturas, formación, networking, revisión del CV… También para descansar.
      </p>
      <p>
        Un simple paseo con amigos/as te ayuda a despejarte, a hablar de otra cosa que no sea tu búsqueda y a
        relajar la mente. Es básico para estar al pie del cañón y no caer en la desmotivación.
      </p>

      <h3>Lleva un control</h3>
      <Callout kind="tip" label="No te pille el toro">
        <p style={{ margin: 0 }}>
          Anota las ofertas en las que te has inscrito, por qué plataforma y cuándo. Si te llaman de algún sitio,
          tienes que saber exactamente de quién, qué oferta y por qué te interesaba.
        </p>
      </Callout>

      <h3>Sé realista pero valiente</h3>
      <p>
        Si no cumples ningún requisito de la oferta, no postules: te desmotiva un descarte previsible. Pero si
        la oferta te encanta y solo te falta una cosa, añádela a tu calendario como objetivo de mejora y
        postula en cuanto puedas.
      </p>

      <h2>Perfiles sociales y networking</h2>
      <p>
        Las redes sociales son un canal útil. Sigue a personas del sector, comenta sus publicaciones, aporta
        contenido propio. Adapta tu perfil para que tenga un tono profesional: tus redes pueden ser una excelente
        carta de presentación.
      </p>
      <p>
        Asiste a encuentros del sector: talleres, charlas, seminarios, ferias, congresos. Allí conocerás
        profesionales con trayectoria, sabrás cómo se llega a determinados puestos y mejorarás tus habilidades
        de comunicación.
      </p>
      <Callout kind="tip" label="El pitch de 60 segundos">
        <p style={{ margin: 0 }}>
          Prepara y ensaya una presentación breve sobre quién eres, a qué te dedicas, qué has hecho y qué
          buscas ahora. Tener esto listo cambia las conversaciones.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 6.3 Soft skills
function BuscoSoftSkills() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="soft-skills"
      related={[
        { area: "Busco empleo", title: "Qué se pide en cada oferta", to: "/busco-empleo/ofertas" },
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Conocer el sector", title: "Tendencias 2026", to: "/general/tendencias" },
      ]}>
      <Eyebrow>6.3 · Soft skills</Eyebrow>
      <h1>Las habilidades blandas marcan la diferencia.</h1>
      <p className="lede">
        Las entidades buscan personas con habilidades sociales y de gestión que van más allá de lo formativo y
        de la trayectoria profesional. En el Tercer Sector, donde los objetivos son ambiciosos y los colectivos
        diversos, las soft skills marcan la diferencia.
      </p>

      <h2>Las soft skills más valoradas</h2>
      <div style={{ marginTop: 18 }}>
        <Bar label="Trabajo en equipo" value={82} />
        <Bar label="Empatía" value={74} />
        <Bar label="Comunicación" value={71} />
        <Bar label="Flexibilidad" value={66} />
        <Bar label="Autonomía" value={62} />
        <Bar label="Capacidad de organización" value={58} />
        <Bar label="Proactividad" value={51} />
        <Bar label="Liderazgo" value={38} />
      </div>
      <p style={{ fontSize: "0.86rem", color: "var(--ink-3)" }}>
        Fuente: análisis interno de menciones en las ofertas publicadas en Hacesfalta.org durante 2025. Estimación a partir
        del lenguaje de las propias ofertas.
      </p>

      <Callout kind="tip" label="Una habilidad poco mencionada y muy importante">
        <p style={{ margin: 0 }}>
          La <strong>identificación con los valores</strong> de la entidad. Las organizaciones quieren saber
          quién eres y si os reconocéis mutuamente. Por eso se valora tanto el voluntariado como herramienta de
          desarrollo: aprendes mientras demuestras compromiso.
        </p>
      </Callout>

      <h2>Cómo desarrollarlas: el voluntariado</h2>
      <p>
        Uno de los caminos más rápidos para adquirir o reforzar soft skills es <strong>hacer
        voluntariado</strong>. Te saca de la zona de confort (mucho más que una formación exigente, porque es
        algo vivencial): te enfrentas a situaciones nuevas, conoces a personas muy diferentes a ti, trabajas en
        equipo por el bien del proyecto y aprendes a sacar adelante cosas con recursos limitados.
      </p>
      <p>
        Además, el voluntariado te da la oportunidad de entrar en contacto con el ecosistema social, conocer el
        Tercer Sector desde dentro y establecer vínculos personales y profesionales.
      </p>

      <CTABlock
        title="Encuentra una oportunidad de voluntariado"
        sub="Proyectos en España y en el extranjero para aportar tu granito de arena."
        btnLabel="Ver voluntariado"
        btnHref="https://www.hacesfalta.org/oportunidades/?sw=v" />
    </ArticlePage>
  );
}

// 7.1 CV
function BuscoCV() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="cv"
      related={[
        { area: "Busco empleo", title: "Carta de presentación", to: "/busco-empleo/carta" },
        { area: "Busco empleo", title: "El email perfecto", to: "/busco-empleo/email" },
        { area: "Busco empleo", title: "Entrevistas laborales", to: "/busco-empleo/entrevista" },
      ]}>
      <Eyebrow>7.1 · Cómo preparar tu CV</Eyebrow>
      <h1>El currículum: tu primera impresión.</h1>
      <p className="lede">
        Tu CV puede ser la primera información que una entidad tenga de ti. Que esa primera impresión sea buena
        depende de cuatro cosas básicas.
      </p>

      <Accordion items={[
        { q: "Diseño cuidado y fácil de leer",
          a: <>
            <p>Organiza la información en apartados claros, con títulos y fuentes legibles. La redacción y la
            ortografía son esenciales.</p>
            <p>Herramientas: <strong>Canva</strong>, <strong>Resume Maker</strong>, <strong>Europass</strong> (CV
            europeo) o plantillas predefinidas que adaptes a tu gusto.</p>
          </> },
        { q: "Formato PDF",
          a: <p>Guarda siempre el archivo final como <strong>PDF</strong> para mantener el formato. Ese será el
          archivo que envíes por correo o subas a Hacesfalta.org.</p> },
        { q: "Buena estructura",
          a: <p>Ordena la información (académica y profesional) <strong>de la más reciente a la más antigua</strong>.
          Decide si pones primero formación o experiencia según tu caso. Añade también idiomas, habilidades
          técnicas, programas y aptitudes personales relevantes.</p> },
        { q: "Sintetiza",
          a: <p>Sé claro y conciso al describir tu experiencia. No pongas información de más, pero tampoco de
          menos: solo los puntos importantes que aporten valor.</p> },
      ]} />

      <h2>Cómo destacar y sobresalir</h2>
      <div className="cards-grid">
        <div className="mini-card">
          <h4>Portfolio profesional</h4>
          <p>No tiene que ser artístico: puede ser un blog con artículos, trabajos realizados o noticias del sector.</p>
        </div>
        <div className="mini-card">
          <h4>Redes sociales activas</h4>
          <p>Buena herramienta para ampliar contactos. Ligado a desarrollar tus competencias digitales.</p>
        </div>
        <div className="mini-card">
          <h4>Mini-introducción</h4>
          <p>Un párrafo breve al principio con tu trayectoria, objetivos y fortalezas. Personaliza tu candidatura.</p>
        </div>
        <div className="mini-card">
          <h4>Competencias digitales</h4>
          <p>Manejo eficaz y con criterio. No hace falta ser experto/a, sí soltura.</p>
        </div>
      </div>

      <h2>CV en otros idiomas</h2>
      <p>
        En el Tercer Sector se valoran mucho los idiomas. Si controlas alguno, ten una versión de tu CV en ese
        idioma. Para el inglés puedes usar <strong>Europass</strong>.
      </p>

      <h2>CV sin experiencia</h2>
      <Callout kind="tip" label="Si aún no tienes mucha experiencia">
        <p>No inventes ni rellenes con cosas superfluas. Destaca:</p>
        <ul style={{ marginBottom: 0 }}>
          <li>Habilidades desarrolladas durante tu formación.</li>
          <li>Competencias adquiridas en trabajos no relacionados con tu objetivo.</li>
          <li><strong>Voluntariado</strong> (especialmente para puestos del sector).</li>
          <li>Idiomas, herramientas, formación complementaria, hobbies.</li>
          <li>Proyectos en los que has participado (demuestra dinamismo y curiosidad).</li>
        </ul>
      </Callout>
    </ArticlePage>
  );
}

// 7.2 Carta
function BuscoCarta() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="carta"
      related={[
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Busco empleo", title: "El email perfecto", to: "/busco-empleo/email" },
        { area: "Busco empleo", title: "Entrevistas laborales", to: "/busco-empleo/entrevista" },
      ]}>
      <Eyebrow>7.2 · Carta de presentación</Eyebrow>
      <h1>Una carta corta puede cambiar tu candidatura.</h1>
      <p className="lede">
        La carta de motivación o presentación suele acompañar al CV. Aunque normalmente es opcional, es una
        forma muy eficaz de diferenciarte y llamar la atención de las personas que están haciendo la selección.
      </p>

      <h2>Estructura recomendada</h2>
      <ol>
        <li>
          <strong>Encabezado:</strong> tus datos personales (nombre y apellidos), datos de contacto (email y
          teléfono) y la fecha.
        </li>
        <li>
          <strong>Primera frase</strong>: tiene que atrapar la atención. Responde a la pregunta:
          ¿dónde has encontrado la oferta y por qué estás enviando la carta?
        </li>
        <li>
          <strong>Cuerpo:</strong> de manera clara, sencilla y entusiasta —y siempre adaptándote al tono de la
          entidad—, explica los motivos por los que quieres trabajar ahí y qué puedes aportar.
        </li>
        <li>
          <strong>Cierre:</strong> con creatividad, deja al lector con muchas ganas de conocerte en persona.
        </li>
      </ol>

      <Callout kind="tip" label="Tono">
        <p style={{ margin: 0 }}>
          Adapta el lenguaje a la organización a la que te diriges. Investiga su web, su comunicación y su
          forma de hablar antes de escribir.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 7.3 Email
function BuscoEmail() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="email"
      related={[
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Busco empleo", title: "Carta de presentación", to: "/busco-empleo/carta" },
        { area: "Busco empleo", title: "Entrevistas laborales", to: "/busco-empleo/entrevista" },
      ]}>
      <Eyebrow>7.3 · El email de candidatura</Eyebrow>
      <h1>Escribir el email perfecto.</h1>
      <p className="lede">
        Si te inscribes a través de Hacesfalta.org, lo haces directamente desde la oferta. Pero puede que en
        algún momento del proceso la entidad te pida más información por correo. O quieras escribir directamente
        a una organización para postularte. Así se hace bien.
      </p>

      <Checklist items={[
        "Tu dirección de correo es profesional (nada de cuentas de la adolescencia).",
        "El asunto es directo, conciso y sin mayúsculas (algunos servidores lo marcan como spam).",
        "El cuerpo responde a quién eres, qué buscas, por qué escribes y cómo pueden contactarte.",
        "Incluyes algo relevante para el puesto y que despierte curiosidad.",
        "Demuestras que has investigado la entidad: misión, proyectos, valores.",
        "Adjuntas el CV (y la carta si procede) en PDF.",
        "Has revisado la ortografía y el envío. Sin faltas.",
      ]} />

      <Callout kind="tip" label="Antes de darle a enviar">
        <p style={{ margin: 0 }}>
          Las bandejas de entrada de los departamentos de selección están saturadas. Si tu email destaca por
          claridad, brevedad y personalización, ganas mucho.
        </p>
      </Callout>
    </ArticlePage>
  );
}

// 8 Entrevista
function BuscoEntrevista() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="entrevista"
      related={[
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Busco empleo", title: "El email perfecto", to: "/busco-empleo/email" },
        { area: "Busco empleo", title: "Cómo usar Hacesfalta.org", to: "/busco-empleo/portal" },
      ]}>
      <Eyebrow>8 · Entrevistas laborales</Eyebrow>
      <h1>Te han llamado. Y ahora, ¿qué?</h1>
      <p className="lede">
        Por fin te citan para una entrevista. Es la oportunidad que esperabas: para no cometer errores por
        nervios o por no ir preparado/a, organiza las cuatro fases del proceso. Tienes una guía clara para
        cada una.
      </p>

      <ChipRow chips={[
        {
          label: "Antes de la entrevista",
          content: (
            <div>
              <h3>8.1 Qué hacer antes</h3>
              <ul>
                <li><strong>Recuerda de qué puesto y entidad se trata.</strong> Si tienes tu búsqueda organizada, esto será fácil.</li>
                <li><strong>Consigue información sobre quién te entrevista.</strong> ¿RRHH o el departamento del puesto? Pregunta si tienes que llevar CV impreso o si harás alguna prueba.</li>
                <li><strong>Investiga a fondo la entidad:</strong> misión, valores, proyectos en curso y pasados.</li>
                <li><strong>Identifica tus puntos fuertes y débiles</strong> respecto al puesto.</li>
                <li><strong>Ensaya:</strong> cómo vas a contar tu trayectoria y por qué eres el/la candidato/a ideal.</li>
              </ul>
            </div>
          )
        },
        {
          label: "Entrevista presencial",
          content: (
            <div>
              <h3>8.2 Cómo encarar la entrevista presencial</h3>
              <ul>
                <li><strong>Lleva una lista con dudas y propuestas.</strong> ¿Qué sería lo primero que harías si consiguieras el trabajo?</li>
                <li><strong>Horario, sueldo, contrato:</strong> espera a que sean ellos quienes saquen estos temas.</li>
                <li><strong>Vestimenta:</strong> sé natural, pero adapta tu apariencia al lugar. Sencillo y sin elementos que distraigan.</li>
                <li><strong>Llega descansado/a y puntual.</strong></li>
                <li><strong>Lenguaje corporal:</strong> postura recta, mirada al interlocutor/a, brazos abiertos, actitud positiva.</li>
                <li><strong>Frases cortas:</strong> sé conciso/a, claro/a, sin divagaciones, pero no respondas con monosílabos.</li>
              </ul>
            </div>
          )
        },
        {
          label: "Por teléfono o videollamada",
          content: (
            <div>
              <h3>8.3 Entrevista telefónica o por videollamada</h3>
              <p>
                Las entrevistas telefónicas suelen ser cortas, para contrastar datos del CV y la motivación. Las
                videollamadas pueden parecerse más a una presencial. En cualquier caso:
              </p>
              <ul>
                <li><strong>Puntualidad</strong>, llames tú o te llamen.</li>
                <li><strong>Foto de perfil y nombre</strong> revisados para la videollamada.</li>
                <li><strong>Espacio:</strong> lugar tranquilo sin ruidos. En vídeo, cuida la luz y el fondo. Avisa a quien comparta espacio.</li>
                <li><strong>No uses el altavoz</strong> al teléfono: da impresión de distancia.</li>
                <li><strong>Concéntrate:</strong> no busques cosas en Internet a la vez. Puedes tener un papel con apuntes, sin abusar.</li>
                <li><strong>Tono de voz</strong> relajado y positivo. Mira al interlocutor/a, no a tu propia imagen en pantalla.</li>
                <li><strong>Conoce tu CV al detalle:</strong> fechas y cifras concretas.</li>
                <li><strong>Turnos de palabra:</strong> habla pausado, no interrumpas.</li>
                <li><strong>Pregunta</strong> los siguientes pasos del proceso.</li>
                <li><strong>Agradece</strong> el tiempo y muestra disponibilidad para nuevos contactos.</li>
              </ul>
            </div>
          )
        },
        {
          label: "Después",
          content: (
            <div>
              <h3>8.4 Qué hacer después de una entrevista</h3>
              <ul>
                <li><strong>Apunta la fecha</strong> en tu sistema de organización (si estás en varios procesos a la vez).</li>
                <li><strong>Analiza cómo ha ido:</strong> repasa preguntas y respuestas. ¿Te sorprendió algo? ¿Mejorarías alguna? ¿Cómo te sentiste? ¿Seguirías interesado/a?</li>
                <li><strong>Al día siguiente</strong>, si la entrevista te gustó, envía un correo breve de agradecimiento.</li>
                <li><strong>Si no tienes respuesta</strong> en el plazo indicado, escribe para preguntar por el estado del proceso.</li>
              </ul>
            </div>
          )
        },
      ]} />
    </ArticlePage>
  );
}

// 9 Hacesfalta.org portal
function BuscoPortal() {
  return (
    <ArticlePage area={BUSCO_AREA} items={BUSCO_ITEMS} slug="portal"
      related={[
        { area: "Busco empleo", title: "Cómo buscar trabajo", to: "/busco-empleo/como-buscar" },
        { area: "Busco empleo", title: "Cómo preparar tu CV", to: "/busco-empleo/cv" },
        { area: "Soy una ONG", title: "Cómo publicar una oferta", to: "/ong/publicar" },
      ]}>
      <Eyebrow>9 · Cómo usar Hacesfalta.org</Eyebrow>
      <h1>Saca el máximo partido al portal.</h1>
      <p className="lede">
        En 2025 publicamos más de <strong>9.700 ofertas</strong> de empleo en el Tercer Sector y propiciamos
        más de <strong>9,7 millones de contactos</strong> entre personas y ONG. Si quieres trabajar en el
        sector social, seguro que aquí encuentras tu oportunidad.
      </p>

      <h2>Cinco pasos para destacar</h2>
      <Accordion items={[
        { q: "1. Perfil de empleo completo y actualizado",
          a: <>
            <p>Rellena tus datos sintetizando (no más de 5 líneas por experiencia). Incluye conocimientos de
            idiomas, informáticos, competencias… Cuanta más información clara y sencilla, más datos tendrán las
            entidades.</p>
            <p>Adjunta tu CV en PDF (peso máximo 2 MB). Si tienes problemas, consulta nuestra{' '}
            <a href={utmLink("https://www.hacesfalta.org/noticias/detalle/problemas-en-la-web-con-tus-datos-de-empleo-sigue-estos-consejos/20980")} target="_blank" rel="noopener">guía de registro del perfil</a>.</p>
          </> },
        { q: "2. Usa los filtros avanzados",
          a: <p>Dentro de cada categoría, afina por salario, profesión, tipo de contrato, duración, horario
          y ubicación.</p> },
        { q: "3. Crea tu alerta de empleo",
          a: <p>Aplica los filtros que mejor encajen con tu búsqueda y recibe en tu email las oportunidades
          relacionadas con tu perfil e intereses. Si tienes problemas, consulta nuestra{' '}
          <a href={utmLink("https://www.hacesfalta.org/noticias/detalle/como-crear-tu-alerta-de-empleo-y-voluntariado-en-4-pasos/21034")} target="_blank" rel="noopener">guía de alertas</a>.</p> },
        { q: "4. Revisa nuestro Top 10 semanal",
          a: <p>Cada semana publicamos en el blog las{' '}
          <a href={utmLink("https://www.hacesfalta.org/noticias/empleo?palabraClave=top+10")} target="_blank" rel="noopener">10 mejores ofertas</a>{' '}
          de los últimos 7 días.</p> },
        { q: "5. Suscríbete y síguenos",
          a: <p>Newsletter semanal con ofertas destacadas, materiales y consejos. Estamos también en{' '}
          <a href={utmLink("https://www.instagram.com/hacesfalta_org/")} target="_blank" rel="noopener">Instagram</a>,{' '}
          <a href={utmLink("https://x.com/hacesfalta")} target="_blank" rel="noopener">Twitter/X</a>,{' '}
          <a href={utmLink("https://www.facebook.com/pages/hacesfaltaorg/162226137149?fref=ts")} target="_blank" rel="noopener">Facebook</a> y{' '}
          <a href={utmLink("https://www.linkedin.com/groups?mostRecent=&gid=4003926&trk=my_groups-tile-flipgrp")} target="_blank" rel="noopener">LinkedIn</a>.</p> },
      ]} />

      <CTABlock
        title="Crea tu perfil y empieza a recibir ofertas"
        sub="Tarda menos de cinco minutos. Y se actualiza cuando tú quieras."
        btnLabel="Crear perfil"
        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. Si buscas ofertas orientadas específicamente a personas con discapacidad,
          visita nuestro portal hermano{' '}
          <a href={utmLink("https://hazloinclusivo.org/")} target="_blank" rel="noopener"><strong>Hazloinclusivo.org</strong></a>.
        </p>
      </div>
    </ArticlePage>
  );
}

window.BuscoLanding = BuscoLanding;
window.BuscoQueNecesito = BuscoQueNecesito;
window.BuscoAreas = BuscoAreas;
window.BuscoCategorias = BuscoCategorias;
window.BuscoOfertas = BuscoOfertas;
window.BuscoComoBuscar = BuscoComoBuscar;
window.BuscoSoftSkills = BuscoSoftSkills;
window.BuscoCV = BuscoCV;
window.BuscoCarta = BuscoCarta;
window.BuscoEmail = BuscoEmail;
window.BuscoEntrevista = BuscoEntrevista;
window.BuscoPortal = BuscoPortal;
window.BUSCO_ITEMS = BUSCO_ITEMS;
window.BUSCO_AREA = BUSCO_AREA;