/* global React */
const { useState, useEffect, useRef, createContext, useContext } = React;
// ============================================================
// GA4 event helpers
// ============================================================
function trackPdfDownload() {
if (typeof gtag === "function") {
gtag("event", "file_download", {
file_name: "guia-empleo-2026.pdf",
file_extension: "pdf",
link_text: "Descargar PDF Guía de Empleo 2026",
});
}
}
// ============================================================
// UTM campaign tracking
// ============================================================
const UTM_PARAMS = "utm_source=guia-empleo-2026&utm_medium=web&utm_campaign=guia-empleo-tercer-sector-2026";
function utmLink(url) {
if (!url || url.startsWith("mailto:") || url.startsWith("assets/") || url.startsWith("/") || url.startsWith("#")) return url;
return url + (url.includes("?") ? "&" : "?") + UTM_PARAMS;
}
// ============================================================
// Router (static-pages mode)
// ============================================================
// Internal route key (e.g. "/general/datos") → public URL (e.g. "conocer-el-sector/datos/")
const AREA_MAP = { "general": "conocer-el-sector", "busco-empleo": "busco-empleo", "ong": "soy-una-ong" };
function publicHref(to) {
if (!to || to === "/") return "index.html";
const segs = to.replace(/^\//, "").split("/").filter(Boolean);
if (segs.length) segs[0] = AREA_MAP[segs[0]] || segs[0];
return segs.join("/") + "/index.html";
}
const RouterCtx = createContext(null);
function useRoute() { return useContext(RouterCtx); }
function Link({ to, children, className = "", ...rest }) {
return {children};
}
// ============================================================
// Top bar
// ============================================================
function TopBar() {
const { path } = useRoute();
const area = (path.split("/")[1] || "home");
const [open, setOpen] = useState(false);
const isActive = (key) => area === key;
const close = () => setOpen(false);
useEffect(() => {
document.body.style.overflow = open ? "hidden" : "";
if (!open) return () => { document.body.style.overflow = ""; };
const onKey = (e) => { if (e.key === "Escape") { setOpen(false); } };
document.addEventListener("keydown", onKey);
return () => { document.body.style.overflow = ""; document.removeEventListener("keydown", onKey); };
}, [open]);
const Btn = ({ to, label, areaKey }) => (
{label}
);
return (
{open && }
);
}
// ============================================================
// Breadcrumbs
// ============================================================
function Breadcrumbs({ trail }) {
return (
);
}
// ============================================================
// Sidebar
// ============================================================
function SideNav({ area, items, currentSlug }) {
return (
);
}
// ============================================================
// Icons (used in landing card grids)
// ============================================================
const ICON_PATHS = {
// General
"presentacion": <>,
"datos": <>,
"tendencias": <>,
"entidades": <>,
"dei": <>,
// Busco empleo
"que-necesito": <>,
"areas": <>,
"categorias": <>,
"ofertas": <>,
"como-buscar": <>,
"soft-skills": <>,
"cv": <>,
"carta": <>,
"email": <>,
"entrevista": <>,
"portal": <>,
// Soy una ONG
"contexto": <>,
"perfiles": <>,
"valoran": <>,
"seleccion": <>,
"transparencia": <>,
"inclusion": <>,
"talento": <>,
"publicar": <>,
};
function Icon({ slug, area }) {
// ofertas appears in both busco and ong areas - use same icon, fine
const p = ICON_PATHS[slug] || ;
return (
);
}
// ============================================================
// Generic UI
// ============================================================
function Eyebrow({ children }) { return {children}
; }
function Callout({ kind = "tip", label, children }) {
return (
{label &&
{label}
}
{children}
{big}
{label}
{src &&
Fte.: {src}
}
);
}
function Bar({ label, value, max = 100, suffix = "%" }) {
return (
);
}
// Proportional area chart: a hero segment for "atención directa" and
// the remaining areas as a stacked horizontal bar below.
function AreaProportionChart({ segments }) {
const hero = segments.find(s => s.big) || segments[0];
const rest = segments.filter(s => s !== hero);
const restTotal = rest.reduce((a, s) => a + s.value, 0);
const palette = ["#5b8def","#3aa78a","#e7a52e","#b06ed8","#e5717a","#4e7cbf","#7aa441","#c47a3a"];
const summary = segments.map(s => `${s.label}: ${s.value}%`).join(", ");
return (
{hero.value}%
{hero.label}
El otro {restTotal}%, repartido entre 8 áreas
{rest.map((s, i) => (
{s.value}%
))}
{rest.map((s, i) => (
- {s.label}{s.value}%
))}
);
}
// Stacked bar showing salary distribution per professional level (Guía p.32).
function SalaryBreakdown({ rows }) {
const bands = [
{ key: "becas", label: "Becas / sin remunerar", color: "#d9d4cb" },
{ key: "low", label: "Hasta 18 k€", color: "#f0c5cb" },
{ key: "mid", label: "18 – 24 k€", color: "#e98ea0" },
{ key: "high", label: "24 – 36 k€", color: "#9a4d6b" },
{ key: "top", label: "Más de 36 k€", color: "#3e2638" },
];
const summary = rows.map(r => {
const parts = bands.filter(b => r[b.key]).map(b => `${b.label}: ${r[b.key]}%`);
return `${r.level} (${parts.join(", ")})`;
}).join("; ");
return (
{rows.map((r, i) => (
{r.level}
{bands.map(b => r[b.key] ? (
{r[b.key]}%
) : null)}
))}
{bands.map(b => (
- {b.label}
))}
);
}
let _accIdCounter = 0;
function Accordion({ items }) {
const [open, setOpen] = useState(null);
const [prefix] = useState(() => `acc-${++_accIdCounter}`);
return (
{items.map((it, i) => (
{it.a}
))}
{tabs.map((t, idx) => (
))}
{tabs[i].content}
);
}
function Checklist({ items }) {
const [done, setDone] = useState(new Set());
const toggle = (i) => { const n = new Set(done); n.has(i) ? n.delete(i) : n.add(i); setDone(n); };
const handleKey = (i) => (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(i); } };
return (
{items.map((it, i) => (
- toggle(i)} onKeyDown={handleKey(i)}>{it}
))}
);
}
function CTABlock({ title, sub, btnLabel, btnTo, btnHref }) {
return (
);
}
function Related({ items }) {
return (
También te puede interesar
);
}
function ImagePh({ label, height = 220 }) {
return {label}
;
}
let _chipIdCounter = 0;
function ChipRow({ chips }) {
const [active, setActive] = useState(0);
const [prefix] = useState(() => `chips-${++_chipIdCounter}`);
return (
<>
{chips.map((c, i) => (
))}
{chips[active].content}
);
}
// ============================================================
// Section nav (prev / next within the same guide section)
// ============================================================
function SectionNav({ area, items, slug }) {
const idx = items.findIndex(i => i.slug === slug);
if (idx < 0) return null;
const prev = idx > 0 ? items[idx - 1] : null;
const next = idx < items.length - 1 ? items[idx + 1] : null;
if (!prev && !next) return null;
return (
);
}
// ============================================================
// ArticlePage shell
// ============================================================
function ArticlePage({ area, items, slug, trail, children, related }) {
const cur = items.find(i => i.slug === slug) || items[0];
const trailFull = [
{ label: "Inicio", to: "/" },
{ label: area.label, to: `/${area.base}` },
{ label: cur.label }
];
return (
<>
);
}
// Helper for landing card grids – button "go to" with full nav
function navigate(to) { window.location.href = publicHref(to); }
Object.assign(window, {
RouterCtx, useRoute, Link, TopBar, Breadcrumbs, SideNav,
Eyebrow, Callout, Stat, Bar, AreaProportionChart, SalaryBreakdown, Accordion, Tabs, Checklist,
CTABlock, Related, ImagePh, ChipRow, ArticlePage, SectionNav, Icon,
publicHref, navigate, utmLink, trackPdfDownload, AREA_MAP
});