/* global React */

function HomePage() {
  const { go } = useRoute();
  const cardKeyDown = (to) => (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); go(to); } };
  return (
    <main>
      <section className="wrap hero">
        <Eyebrow>Guía de Empleo en el Tercer Sector · Edición 2026</Eyebrow>
        <h1 style={{ marginTop: 18, maxWidth: 980 }}>
          Trabajar en el sector social: <span className="accent">una guía viva</span> para profesionales y entidades.
        </h1>
        <p className="lede">
          Datos, tendencias, perfiles, consejos prácticos y herramientas para encontrar empleo,
          promocionarte y construir un Tercer Sector más profesional.
          Una guía pensada para leerse entera, o para visitar la sección que necesites cuando la necesites.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
          <a className="btn btn-ink" href={publicHref("/general/datos")}>Datos del sector 2025</a>
          <a className="btn btn-ghost" href="assets/guia-empleo-2026.pdf" target="_blank" rel="noopener" onClick={trackPdfDownload}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 2 }} aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Descargar PDF
          </a>
        </div>
      </section>

      <section className="wrap section-tight">
        <div className="entry-grid">
          <div className="entry-card" role="link" tabIndex={0} onClick={() => go("/general")} onKeyDown={cardKeyDown("/general")}>
            <div className="num">01</div>
            <h2 className="serif">Conocer el sector</h2>
            <p>Datos, tendencias, retos y tipos de entidades. La fotografía del Tercer Sector hoy.</p>
            <span className="arrow">Explorar
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2"/></svg>
            </span>
          </div>
          <div className="entry-card pink" role="link" tabIndex={0} onClick={() => go("/busco-empleo")} onKeyDown={cardKeyDown("/busco-empleo")}>
            <div className="num">02</div>
            <h2 className="serif">Busco empleo</h2>
            <p>Áreas, perfiles, CV, entrevistas y cómo sacar el máximo partido a Hacesfalta.org.</p>
            <span className="arrow">Empezar aquí
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2"/></svg>
            </span>
          </div>
          <div className="entry-card ink" role="link" tabIndex={0} onClick={() => go("/ong")} onKeyDown={cardKeyDown("/ong")}>
            <div className="num">03</div>
            <h2 className="serif">Soy una ONG</h2>
            <p>Cómo atraer, seleccionar y fidelizar el talento que tu organización necesita.</p>
            <span className="arrow">Ver recursos
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2"/></svg>
            </span>
          </div>
        </div>
      </section>

      <section className="wrap section presentation-block">
        <div className="presentation-grid">
          <div>
            <Eyebrow>Presentación · Edición 2026</Eyebrow>
            <h2 className="serif" style={{ marginTop: 12, marginBottom: 14, fontSize: "clamp(1.9rem, 3.6vw, 2.8rem)" }}>
              Una guía por, para y sobre quienes mueven<br/>el sector social.
            </h2>
            <p style={{ color: "var(--ink-2)", fontSize: "1.06rem", lineHeight: 1.55 }}>
              Un año más, traemos la <strong>Guía de Empleo en el Tercer Sector</strong> desde Hacesfalta.org,
              el portal de empleo y voluntariado de Fundación Hazloposible. Con las mismas ganas que cuando
              lanzamos la primera edición en 2017.
            </p>
            <p style={{ color: "var(--ink-2)", fontSize: "1.02rem" }}>
              Una herramienta útil y eficaz para toda la comunidad que quiere impulsar su participación
              en el Tercer Sector de acción social: profesionales, personas voluntarias y entidades.
            </p>
          </div>
          <aside className="presentation-side">
            <h3 style={{ fontFamily: "var(--font-ui)", fontSize: "0.86rem", textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-3)", margin: "0 0 18px" }}>
              En esta edición
            </h3>
            <ul className="presentation-list">
              <li><strong>Datos únicos</strong> del empleo en el sector social, recogidos del portal.</li>
              <li><strong>Tendencias y retos</strong> 2026, desde una mirada con más de 25 años de trayectoria.</li>
              <li><strong>Recomendaciones prácticas</strong> para encontrar empleo afín a tu vocación.</li>
              <li><strong>Recursos para entidades</strong> que quieren mejorar procesos y atraer talento.</li>
            </ul>
            <div className="presentation-pill">
              <span className="num serif">10 M+</span>
              <span>profesionales han pasado por Hacesfalta.org en sus 25 años.</span>
            </div>
          </aside>
        </div>
      </section>

      <section className="wrap section">
        <Eyebrow>El sector, de un vistazo</Eyebrow>
        <h2 className="serif" style={{ marginTop: 12, marginBottom: 8 }}>2025 en cinco cifras.</h2>
        <p style={{ color: "var(--ink-2)", maxWidth: 640, marginBottom: 24 }}>
          Cuatro datos del portal de Hacesfalta.org y uno de referencia del sector,
          para enmarcar el empleo del Tercer Sector en España durante el último año.
        </p>
        <div className="stat-row">
          <Stat big="1,3 M" label="Personas usuarias en el portal" src="Hacesfalta.org" />
          <Stat big="10.000" label="ONG y entidades activas" src="Hacesfalta.org" />
          <Stat big="9.700+" label="Ofertas publicadas en 2025" src="Hacesfalta.org" />
          <Stat big="9,7 M" label="Contactos entre personas y ONG" src="Hacesfalta.org" />
          <Stat big="74,2%" label="Empleo femenino en el sector" src="VII Barómetro del Tercer Sector" />
        </div>
        <div style={{ marginTop: 18 }}>
          <a className="btn btn-ghost" href={publicHref("/general/datos")}>Ver todos los datos →</a>
        </div>
      </section>

      <section className="wrap section">
        <div className="split-2">
          <div>
            <Eyebrow>Para ti, si buscas trabajo</Eyebrow>
            <h2 className="serif" style={{ marginTop: 12 }}>De la primera candidatura<br/>al contrato firmado.</h2>
            <p style={{ color: "var(--ink-2)" }}>
              <strong>Ocho pasos prácticos:</strong> qué necesito, dónde buscar, soft skills, CV, carta, email,
              entrevista y cómo destacar en Hacesfalta.org.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
              <a className="btn btn-ink" href={publicHref("/busco-empleo/como-buscar")}>Empieza por aquí →</a>
              <a className="btn btn-ghost" href={publicHref("/busco-empleo/cv")}>Mejora tu CV</a>
            </div>
          </div>
          <div>
            <Eyebrow>Para tu organización</Eyebrow>
            <h2 className="serif" style={{ marginTop: 12 }}>Ofertas más claras,<br/>procesos más inclusivos.</h2>
            <p style={{ color: "var(--ink-2)" }}>
              Recursos para redactar ofertas atractivas, atraer talento alineado con tu misión y
              avanzar en transparencia salarial e inclusión.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 16, flexWrap: "wrap" }}>
              <a className="btn btn-pink" href={publicHref("/ong/publicar")}>Publicar una oferta →</a>
              <a className="btn btn-ghost" href={publicHref("/ong/ofertas")}>Cómo redactarla</a>
            </div>
          </div>
        </div>
      </section>

      <section className="wrap section-tight" style={{ paddingBottom: 80 }}>
        <Callout kind="info" label="Sobre esta guía">
          <p style={{ margin: "0 0 12px" }}>
            Esta es la novena edición de la Guía de Empleo en el Tercer Sector que publicamos en Hacesfalta.org
            desde 2017. La hemos reescrito en formato web para que puedas leerla entera, saltar a una sección concreta
            desde Google, o consultarla en cualquier momento del proceso. También puedes descargar el documento
            completo si prefieres tenerlo a mano en PDF.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a className="btn btn-ink" href="assets/guia-empleo-2026.pdf" target="_blank" rel="noopener" onClick={trackPdfDownload}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Descargar guía completa (PDF)
            </a>
            <a className="btn btn-ghost" href="mailto:hacesfalta@hazloposible.org">¿Algo que mejorar? Escríbenos</a>
          </div>
        </Callout>
      </section>
    </main>
  );
}

window.HomePage = HomePage;