/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Pill, Tag, CONTACT, MP_REDUCED, useScrollProgress */
/* ============================================================
   TALENTO — Reclutamiento & selección de talento para empresas
   Menú visible: "Reclutamiento" · Ruta: /reclutamiento
   Thank-you: /reclutamiento/gracias  (prop `sub === "gracias"`)
   Reutiliza: Section, Reveal, Button, Pill, Tag, Icon, Eyebrow, Flourish, CONTACT
   ============================================================ */
const { useState: useTalentoState, useEffect: useTalentoEffect } = React;

const HEADER_OFFSET = 112; // alineado con HEADER_H (96) + aire

const jumpTo = (id) => {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - HEADER_OFFSET, behavior: MP_REDUCED ? "auto" : "smooth" });
};

/* ─────────────────────────────────────────────────────────────
   DATOS MOCK — reemplazar por datos reales / API.
   Filtros de frontend operan sobre estas listas.
   ───────────────────────────────────────────────────────────── */
const UBICACIONES = ["Ciudad de Guatemala", "Antigua Guatemala", "Quetzaltenango", "Remoto"];
const CATEGORIAS = ["Marketing", "Ventas", "Finanzas", "Tecnología", "Administración", "Operaciones"];
const TIPOS = ["Presencial", "Híbrido", "Remoto"];

const VAC_HUE = { Marketing: 162, Ventas: 28, Finanzas: 40, "Tecnología": 205, "Administración": 268, Operaciones: 130 };

const VACANTES = [
  { id: "growth-lead", titulo: "Growth Marketing Lead", empresa: "Empresa placeholder · Retail", ubicacion: "Ciudad de Guatemala", categoria: "Marketing", tipo: "Híbrido", seniority: "Senior", resumen: "Lidera la estrategia de adquisición y retención con enfoque en datos y experimentación continua.", tags: ["Performance", "Analytics", "CRM"] },
  { id: "ejecutivo-ventas-b2b", titulo: "Ejecutivo de Ventas B2B", empresa: "Empresa placeholder · SaaS", ubicacion: "Ciudad de Guatemala", categoria: "Ventas", tipo: "Presencial", seniority: "Semi Senior", resumen: "Gestiona el ciclo completo de venta consultiva para cuentas medianas y corporativas.", tags: ["Venta consultiva", "Pipeline", "Negociación"] },
  { id: "analista-fpa", titulo: "Analista de Finanzas (FP&A)", empresa: "Empresa placeholder · Manufactura", ubicacion: "Quetzaltenango", categoria: "Finanzas", tipo: "Híbrido", seniority: "Semi Senior", resumen: "Construye modelos de proyección, presupuesto y análisis de rentabilidad por línea de negocio.", tags: ["Modelado", "Presupuesto", "BI"] },
  { id: "dev-fullstack", titulo: "Desarrollador(a) Full-Stack", empresa: "Empresa placeholder · Fintech", ubicacion: "Remoto", categoria: "Tecnología", tipo: "Remoto", seniority: "Senior", resumen: "Diseña y construye producto de punta a punta con foco en calidad, performance y experiencia de desarrollo.", tags: ["React", "Node", "APIs"] },
  { id: "coord-operaciones", titulo: "Coordinador(a) de Operaciones", empresa: "Empresa placeholder · Logística", ubicacion: "Antigua Guatemala", categoria: "Operaciones", tipo: "Presencial", seniority: "Semi Senior", resumen: "Optimiza procesos, indicadores y coordinación de equipos para asegurar el nivel de servicio.", tags: ["Procesos", "KPIs", "Mejora continua"] },
];

const DIFERENCIA = [
  { icon: "search", t: "Captación activa", d: "Buscamos donde están los mejores perfiles; no esperamos a que apliquen." },
  { icon: "clipboardCheck", t: "Evaluación real", d: "Pruebas aptitudinales y psicométricas, no solo lectura de CV." },
  { icon: "filter", t: "Filtrado y ranking", d: "Te entregamos una lista corta priorizada por ajuste al puesto." },
  { icon: "mic", t: "Coaching al candidato", d: "Preparamos a la persona para el rol antes de que empiece." },
  { icon: "graduation", t: "Acceso a cursos", d: "Formación continua dentro del ecosistema MarketProof." },
  { icon: "handshake", t: "Acompañamiento", d: "Seguimos presentes durante la incorporación y los primeros meses." },
];

const PROCESO = [
  { n: "01", icon: "search", t: "Prospectación", d: "Identificamos y captamos talento potencial para las posiciones disponibles." },
  { n: "02", icon: "clipboardCheck", t: "Pruebas aptitudinales y psicométricas", d: "Evaluamos las capacidades, competencias y características relevantes del candidato." },
  { n: "03", icon: "filter", t: "Filtrado", d: "Seleccionamos los perfiles que mejor responden a los requerimientos de cada posición." },
  { n: "04", icon: "trendingUp", t: "Ranking", d: "Clasificamos y priorizamos candidatos según su compatibilidad con el puesto." },
  { n: "05", icon: "users", t: "Propuesta de candidatos", d: "Presentamos a la empresa los perfiles con mayor potencial de ajuste." },
  { n: "06", icon: "mic", t: "Coaching", d: "En paralelo, acompañamos al candidato con preparación y coaching orientado al puesto que desempeñará." },
  { n: "07", icon: "graduation", t: "Acceso a cursos", d: "El talento accede al ecosistema de cursos de MarketProof para seguir desarrollando sus capacidades." },
];

const TESTIMONIOS_EMPRESA = [
  { q: "Nos presentaron tres perfiles y los tres podían hacer el trabajo. Contratamos en dos semanas, no en dos meses.", nombre: "Nombre placeholder", cargo: "Gerente de Talento", empresa: "Empresa placeholder · Retail" },
  { q: "La diferencia fue el ranking: llegamos a la entrevista sabiendo exactamente qué validar de cada candidato.", nombre: "Nombre placeholder", cargo: "Director de Operaciones", empresa: "Empresa placeholder · Logística" },
  { q: "El coaching previo se notó desde el primer día. La persona entró entendiendo el rol y el contexto.", nombre: "Nombre placeholder", cargo: "Country Manager", empresa: "Empresa placeholder · SaaS" },
];

/* ============================================================ HERO */
function TalentoHero() {
  return (
    <section style={{ position: "relative", background: "var(--mp-ink)", color: "var(--mp-paper)", overflow: "hidden", padding: "150px 28px 88px" }}>
      <div aria-hidden="true" style={{ position: "absolute", top: "-14%", right: "2%", width: 600, height: 600, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.34), transparent 62%)", filter: "blur(30px)" }} />
      <div aria-hidden="true" style={{ position: "absolute", bottom: "-24%", left: "-8%", width: 520, height: 520, borderRadius: 999, background: "radial-gradient(circle, rgba(70,87,101,0.55), transparent 62%)", filter: "blur(28px)" }} />
      <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative", zIndex: 2 }}>
        <Reveal style={{ maxWidth: 900 }}>
          <Eyebrow onDark style={{ marginBottom: 24 }}>Reclutamiento &amp; selección de talento</Eyebrow>
          <h1 style={{ fontSize: "clamp(40px, 5.6vw, 84px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.038em", margin: "0 0 22px", textWrap: "balance" }}>
            El talento que tu empresa necesita.<br />
            <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>El siguiente paso de su carrera.</span>
          </h1>
          <p style={{ fontSize: "clamp(17px, 1.5vw, 22px)", lineHeight: 1.55, color: "rgba(255,255,255,0.78)", maxWidth: 620, margin: "0 0 40px", textWrap: "pretty" }}>
            Captamos, evaluamos y preparamos profesionales para roles específicos. No enviamos una pila de CVs: entregamos una lista corta, priorizada y lista para generar valor.
          </p>
        </Reveal>

        <Reveal delay={140}>
          <div className="mp-talento-paths">
            <button type="button" onClick={() => jumpTo("vacantes")}
              className="mp-path-card mp-path-candidato"
              style={{ textAlign: "left", cursor: "pointer", color: "var(--mp-paper)", fontFamily: "var(--mp-font-sans)" }}>
              <span className="mp-path-ico" style={{ background: "rgba(129,241,200,0.16)", color: "var(--mp-mint)" }}><Icon name="search" size={24} /></span>
              <span style={{ display: "block", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mp-mint)", marginBottom: 8 }}>Soy un candidato</span>
              <span style={{ display: "block", fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 6 }}>Conoce nuestras vacantes</span>
              <span style={{ display: "block", fontSize: 14, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}>Encuentra oportunidades y aplica en minutos.</span>
              <span className="mp-path-go" style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700 }}>
                Ver oportunidades <Icon name="arrowRight" size={17} />
              </span>
            </button>

            <button type="button" onClick={() => jumpTo("empresas")}
              className="mp-path-card mp-path-empresa"
              style={{ textAlign: "left", cursor: "pointer", color: "var(--mp-paper)", fontFamily: "var(--mp-font-sans)" }}>
              <span className="mp-path-ico" style={{ background: "rgba(255,255,255,0.1)", color: "var(--mp-paper)" }}><Icon name="briefcase" size={24} /></span>
              <span style={{ display: "block", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", marginBottom: 8 }}>Soy una empresa</span>
              <span style={{ display: "block", fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 6 }}>Encuentra tu próximo candidato</span>
              <span style={{ display: "block", fontSize: 14, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}>Cuéntanos qué rol necesitas cubrir y nos encargamos.</span>
              <span className="mp-path-go" style={{ marginTop: 18, display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700 }}>
                Hablar con el equipo <Icon name="arrowRight" size={17} />
              </span>
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================ CINTILLO DE EMPRESAS */
function TrustStrip() {
  // Placeholders elegantes — sin marcas reales. Sustituir por logos reales luego.
  const slots = [0, 1, 2, 3, 4, 5];
  return (
    <Section bg="paper" pad="64px 28px">
      <Reveal style={{ textAlign: "center", marginBottom: 34 }}>
        <div style={{ fontSize: 12.5, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: "var(--mp-fg-subtle)" }}>
          Empresas que han confiado en nuestro proceso
        </div>
      </Reveal>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 18, justifyContent: "center", alignItems: "center" }}>
        {slots.map((i) => (
          <Reveal key={i} delay={i * 45}>
            <div className="mp-logo-box" aria-hidden="true" style={{
              width: 148, height: 66, borderRadius: 14, border: "1px dashed var(--mp-border-strong)",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 9,
              color: "var(--mp-fg-subtle)", opacity: 0.6,
              transition: "opacity 240ms var(--mp-ease)",
            }}>
              <span style={{ width: 22, height: 22, borderRadius: 999, border: "2px solid currentColor" }} />
              <span style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: "0.14em" }}>LOGO</span>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 18, fontSize: 12, color: "var(--mp-fg-subtle)" }}>
        Espacios reservados para los logos de nuestros clientes.
      </div>
    </Section>
  );
}

/* ============================================================ PROPUESTA DE VALOR */
function ValueProp() {
  return (
    <Section bg="ink" pad="100px 28px" id="por-que">
      <Reveal style={{ maxWidth: 780, marginBottom: 54 }}>
        <Eyebrow onDark style={{ marginBottom: 20 }}>Por qué MarketProof para reclutamiento</Eyebrow>
        <h2 style={{ fontSize: "clamp(32px, 4vw, 56px)", fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.03em", margin: "0 0 18px", textWrap: "balance" }}>
          <Flourish text="No solo encontramos personas. Preparamos [talento.]" onDark />
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,0.72)", margin: 0, maxWidth: 620, textWrap: "pretty" }}>
          Publicar una vacante y reenviar CVs es fácil. Nosotros combinamos captación, evaluación, filtrado, ranking, coaching y formación para que la persona que llega ya esté lista para el puesto.
        </p>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="mp-3grid">
        {DIFERENCIA.map((d, i) => (
          <Reveal key={d.t} delay={(i % 3) * 80} variant="up">
            <div style={{
              height: "100%", padding: "30px 26px", borderRadius: "var(--mp-radius-lg)",
              background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.10)",
              backdropFilter: "blur(18px) saturate(140%)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.10)",
              display: "flex", flexDirection: "column", gap: 16,
            }}>
              <div style={{ width: 50, height: 50, borderRadius: 15, background: "rgba(129,241,200,0.14)", color: "var(--mp-mint)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={d.icon} size={24} />
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.015em", margin: 0 }}>{d.t}</h3>
              <p style={{ fontSize: 14.5, color: "rgba(255,255,255,0.68)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{d.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

/* ============================================================ PROCESO (timeline animado) */
function ProcessTimeline() {
  const trackRef = React.useRef(null);
  const p = useScrollProgress(trackRef);
  const n = PROCESO.length;
  return (
    <Section bg="cloud" pad="100px 28px" id="proceso">
      <Reveal style={{ maxWidth: 680, marginBottom: 52 }}>
        <Eyebrow style={{ marginBottom: 18 }}>Cómo trabajamos</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Siete pasos. Un talento [listo] para el puesto." />
        </h2>
      </Reveal>

      <div ref={trackRef} className="mp-timeline">
        <div className="mp-timeline-rail" aria-hidden="true">
          <span className="mp-timeline-fill" style={{ height: `${Math.round(p * 100)}%` }} />
        </div>
        {PROCESO.map((s, i) => {
          const active = p >= (i / Math.max(1, n - 1)) * 0.82;
          return (
            <Reveal key={s.n} variant="slide-left" delay={i * 55} className="mp-timeline-row">
              <span className="mp-timeline-dot" data-on={active ? "1" : "0"} aria-hidden="true">
                <Icon name={s.icon} size={18} />
              </span>
              <div className="mp-timeline-card">
                <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 800, color: "var(--mp-mint-deep)", letterSpacing: "0.04em" }}>{s.n}</span>
                  <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.015em", margin: 0 }}>{s.t}</h3>
                </div>
                <p style={{ fontSize: 15, color: "var(--mp-fg-muted)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{s.d}</p>
              </div>
            </Reveal>
          );
        })}
      </div>
    </Section>
  );
}

/* ============================================================ MARKETPLACE DE VACANTES */
function VacanteCard({ v, onApply }) {
  const [hover, setHover] = useTalentoState(false);
  const hue = VAC_HUE[v.categoria] ?? 205;
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--mp-paper)", borderRadius: "var(--mp-radius-lg)", padding: 24,
        border: "1px solid var(--mp-border)",
        boxShadow: hover ? "var(--mp-shadow-md)" : "var(--mp-shadow-xs)",
        transform: hover ? "translateY(-4px)" : "none",
        transition: "transform 240ms var(--mp-ease), box-shadow 240ms var(--mp-ease)",
        display: "flex", flexDirection: "column", gap: 14, height: "100%",
      }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
        <Tag hue={hue}>{v.categoria}</Tag>
        <span style={{ fontSize: 11.5, fontWeight: 700, color: "var(--mp-fg-subtle)", letterSpacing: "0.03em", whiteSpace: "nowrap" }}>{v.seniority}</span>
      </div>
      <h3 style={{ fontSize: 19, fontWeight: 700, lineHeight: 1.25, letterSpacing: "-0.015em", margin: 0, color: "var(--mp-ink)", textWrap: "balance" }}>{v.titulo}</h3>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--mp-fg-muted)", fontWeight: 600 }}>
        <Icon name="building" size={15} /> {v.empresa}
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "6px 16px", fontSize: 12.5, color: "var(--mp-fg-subtle)", fontWeight: 600 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="mapPin" size={14} /> {v.ubicacion}</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="briefcase" size={14} /> {v.tipo}</span>
      </div>
      <p style={{
        fontSize: 14, color: "var(--mp-fg-muted)", lineHeight: 1.55, margin: 0, textWrap: "pretty",
        display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden",
      }}>{v.resumen}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
        {v.tags.map((t) => (
          <span key={t} style={{ fontSize: 10.5, fontWeight: 600, color: "var(--mp-fg-subtle)", background: "var(--mp-cloud)", padding: "4px 10px", borderRadius: 999 }}>{t}</span>
        ))}
      </div>
      <div style={{ marginTop: "auto", paddingTop: 6 }}>
        <Button variant="ink" size="sm" full icon="arrowRight" onClick={() => onApply(v.id)}>Aplicar a esta vacante</Button>
      </div>
    </article>
  );
}

function FilterRow({ label, options, value, onChange }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
      <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--mp-fg-subtle)", marginRight: 4, minWidth: 78 }}>{label}</span>
      {options.map((o) => (
        <Pill key={o} active={value === o} onClick={() => onChange(o)}>{o}</Pill>
      ))}
    </div>
  );
}

function VacantesMarketplace({ onApply }) {
  const [q, setQ] = useTalentoState("");
  const [ubi, setUbi] = useTalentoState("Todas");
  const [cat, setCat] = useTalentoState("Todas");
  const [tipo, setTipo] = useTalentoState("Todos");

  const term = q.trim().toLowerCase();
  const list = VACANTES.filter((v) =>
    (ubi === "Todas" || v.ubicacion === ubi) &&
    (cat === "Todas" || v.categoria === cat) &&
    (tipo === "Todos" || v.tipo === tipo) &&
    (term === "" || (v.titulo + " " + v.empresa + " " + v.tags.join(" ")).toLowerCase().includes(term))
  );
  const reset = () => { setQ(""); setUbi("Todas"); setCat("Todas"); setTipo("Todos"); };
  const dirty = q || ubi !== "Todas" || cat !== "Todas" || tipo !== "Todos";

  const inp = { width: "100%", padding: "13px 15px 13px 42px", fontSize: 14.5, border: "1.5px solid var(--mp-border-strong)", borderRadius: "var(--mp-radius-md)", fontFamily: "var(--mp-font-sans)", background: "var(--mp-paper)", outline: "none", color: "var(--mp-ink)" };

  return (
    <Section bg="paper" pad="96px 28px" id="vacantes">
      <Reveal style={{ maxWidth: 720, marginBottom: 36 }}>
        <Eyebrow style={{ marginBottom: 18 }}>Marketplace de talento</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Encuentra tu próxima [oportunidad.]" />
        </h2>
      </Reveal>

      <Reveal delay={80} style={{
        background: "var(--mp-cloud)", borderRadius: "var(--mp-radius-xl)", padding: "24px 24px 26px",
        display: "flex", flexDirection: "column", gap: 16, marginBottom: 32,
      }}>
        <div style={{ position: "relative", maxWidth: 460 }}>
          <Icon name="search" size={17} style={{ position: "absolute", left: 15, top: "50%", transform: "translateY(-50%)", color: "var(--mp-fg-subtle)" }} />
          <input type="search" value={q} onChange={(e) => setQ(e.target.value)} style={inp}
            placeholder="Buscar por puesto, empresa o habilidad" aria-label="Buscar vacantes por nombre" />
        </div>
        <FilterRow label="Ubicación" options={["Todas", ...UBICACIONES]} value={ubi} onChange={setUbi} />
        <FilterRow label="Categoría" options={["Todas", ...CATEGORIAS]} value={cat} onChange={setCat} />
        <FilterRow label="Tipo" options={["Todos", ...TIPOS]} value={tipo} onChange={setTipo} />
      </Reveal>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 20, flexWrap: "wrap" }}>
        <div style={{ fontSize: 14, color: "var(--mp-fg-muted)", fontWeight: 500 }}>
          {list.length} {list.length === 1 ? "vacante" : "vacantes"} {dirty ? "con estos filtros" : "disponibles"}
        </div>
        {dirty && (
          <button type="button" onClick={reset} style={{ background: "transparent", border: 0, color: "var(--mp-ink)", fontFamily: "var(--mp-font-sans)", fontWeight: 700, fontSize: 13, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon name="x" size={14} /> Limpiar filtros
          </button>
        )}
      </div>

      {list.length > 0 ? (
        <div className="mp-vacantes-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
          {list.map((v, i) => (
            <Reveal key={v.id} delay={(i % 2) * 70} variant="up">
              <VacanteCard v={v} onApply={onApply} />
            </Reveal>
          ))}
        </div>
      ) : (
        <div style={{
          textAlign: "center", padding: "72px 24px", borderRadius: "var(--mp-radius-xl)",
          border: "1px dashed var(--mp-border-strong)", color: "var(--mp-fg-muted)",
        }}>
          <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--mp-cloud)", color: "var(--mp-fg-subtle)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
            <Icon name="search" size={24} />
          </div>
          <h3 style={{ fontSize: 20, fontWeight: 700, color: "var(--mp-ink)", margin: "0 0 8px" }}>Sin resultados por ahora</h3>
          <p style={{ fontSize: 15, margin: "0 0 20px", textWrap: "pretty" }}>No encontramos vacantes con esa combinación de filtros. Prueba ampliando la búsqueda.</p>
          <Button variant="outlineInk" size="sm" onClick={reset}>Limpiar filtros</Button>
        </div>
      )}
    </Section>
  );
}

/* ============================================================ FORMULARIO DE APLICACIÓN */
function ApplyForm({ vacanteId, onVacanteChange, onSubmitDone }) {
  const [form, setForm] = useTalentoState({ nombre: "", email: "", telefono: "", ubicacion: "", experiencia: "", linkedin: "", mensaje: "" });
  const [cv, setCv] = useTalentoState("");
  const upd = (k) => (ev) => setForm((f) => ({ ...f, [k]: ev.target.value }));

  const inp = { width: "100%", padding: "14px 16px", fontSize: 15, border: "1.5px solid var(--mp-border-strong)", borderRadius: "var(--mp-radius-md)", fontFamily: "var(--mp-font-sans)", background: "var(--mp-paper)", outline: "none", color: "var(--mp-ink)" };
  const lab = { fontSize: 12.5, fontWeight: 700, color: "var(--mp-ink)", marginBottom: 7, display: "block" };

  return (
    <Section bg="cloud" pad="96px 28px" id="aplicar">
      <div style={{ maxWidth: 680, margin: "0 auto" }}>
        <Reveal style={{ textAlign: "center", marginBottom: 34 }}>
          <Eyebrow style={{ marginBottom: 16, justifyContent: "center" }}>Postúlate</Eyebrow>
          <h2 style={{ fontSize: "clamp(28px, 3.6vw, 46px)", fontWeight: 700, letterSpacing: "-0.03em", margin: 0, lineHeight: 1.08, textWrap: "balance" }}>
            Cuéntanos quién <span style={{ fontStyle: "italic", color: "var(--mp-mint-deep)" }}>eres.</span>
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <form
            onSubmit={(e) => { e.preventDefault(); onSubmitDone(); }}
            style={{ background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: "36px 34px", boxShadow: "var(--mp-shadow-md)", border: "1px solid var(--mp-border)", display: "flex", flexDirection: "column", gap: 18 }}>
            <div>
              <label style={lab} htmlFor="ap-nombre">Nombre completo</label>
              <input id="ap-nombre" style={inp} placeholder="Tu nombre" required autoComplete="name" value={form.nombre} onChange={upd("nombre")} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="mp-2col">
              <div>
                <label style={lab} htmlFor="ap-email">Email</label>
                <input id="ap-email" type="email" style={inp} placeholder="tu@correo.com" required autoComplete="email" value={form.email} onChange={upd("email")} />
              </div>
              <div>
                <label style={lab} htmlFor="ap-tel">Teléfono</label>
                <input id="ap-tel" style={inp} placeholder="+502 0000 0000" autoComplete="tel" value={form.telefono} onChange={upd("telefono")} />
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="mp-2col">
              <div>
                <label style={lab} htmlFor="ap-vac">Vacante a la que aplicas</label>
                <select id="ap-vac" style={inp} value={vacanteId || ""} onChange={(e) => onVacanteChange(e.target.value)}>
                  <option value="">Consulta general</option>
                  {VACANTES.map((v) => <option key={v.id} value={v.id}>{v.titulo}</option>)}
                </select>
              </div>
              <div>
                <label style={lab} htmlFor="ap-ubi">Ubicación</label>
                <select id="ap-ubi" style={inp} value={form.ubicacion} onChange={upd("ubicacion")}>
                  <option value="" disabled>Selecciona…</option>
                  {UBICACIONES.map((u) => <option key={u}>{u}</option>)}
                </select>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="mp-2col">
              <div>
                <label style={lab} htmlFor="ap-exp">Experiencia</label>
                <select id="ap-exp" style={inp} value={form.experiencia} onChange={upd("experiencia")}>
                  <option value="" disabled>Selecciona…</option>
                  <option>Menos de 1 año</option>
                  <option>1–3 años</option>
                  <option>3–5 años</option>
                  <option>Más de 5 años</option>
                </select>
              </div>
              <div>
                <label style={lab} htmlFor="ap-in">LinkedIn</label>
                <input id="ap-in" type="url" style={inp} placeholder="https://linkedin.com/in/…" value={form.linkedin} onChange={upd("linkedin")} />
              </div>
            </div>
            <div>
              <label style={lab} htmlFor="ap-cv">CV / hoja de vida</label>
              <label htmlFor="ap-cv" style={{
                display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", cursor: "pointer",
                border: "1.5px dashed var(--mp-border-strong)", borderRadius: "var(--mp-radius-md)",
                background: "var(--mp-paper)", color: cv ? "var(--mp-ink)" : "var(--mp-fg-subtle)", fontSize: 14,
              }}>
                <Icon name="upload" size={18} />
                <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  {cv || "Adjunta tu CV en PDF o Word"}
                </span>
              </label>
              <input id="ap-cv" type="file" accept=".pdf,.doc,.docx" style={{ position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" }}
                onChange={(e) => setCv(e.target.files && e.target.files[0] ? e.target.files[0].name : "")} />
            </div>
            <div>
              <label style={lab} htmlFor="ap-msg">Mensaje</label>
              <textarea id="ap-msg" style={{ ...inp, minHeight: 110, resize: "vertical" }} placeholder="Cuéntanos por qué encajas con el puesto…" value={form.mensaje} onChange={upd("mensaje")}></textarea>
            </div>
            <Button type="submit" variant="mint" full size="lg" icon="arrowRight">Enviar información</Button>
            <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--mp-fg-subtle)", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
              <Icon name="lock" size={14} /> Usaremos tus datos únicamente para procesos de selección.
            </div>
          </form>
        </Reveal>
      </div>
    </Section>
  );
}

/* ============================================================ TESTIMONIALES DE EMPRESAS */
function EmpresaTestimonios() {
  return (
    <Section bg="ink" pad="100px 28px" id="testimonios">
      <Reveal style={{ marginBottom: 52, maxWidth: 720 }}>
        <Eyebrow onDark style={{ marginBottom: 18 }}>Casos</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 54px)", fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Empresas que encontraron [talento] con nosotros." onDark />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {TESTIMONIOS_EMPRESA.map((it, i) => (
          <Reveal key={i} delay={i * 90} variant="up">
            <article style={{
              height: "100%", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.10)",
              borderRadius: "var(--mp-radius-lg)", padding: 30, backdropFilter: "blur(18px) saturate(140%)",
              display: "flex", flexDirection: "column", gap: 22, boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
            }}>
              <Icon name="briefcase" size={22} style={{ color: "var(--mp-mint)" }} />
              <p style={{ fontSize: 16.5, lineHeight: 1.5, margin: 0, color: "rgba(255,255,255,0.92)", textWrap: "pretty", flex: 1 }}>"{it.q}"</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 12, background: "rgba(255,255,255,0.08)", color: "var(--mp-paper)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}>
                  <Icon name="building" size={20} />
                </span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{it.nombre}</div>
                  <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.6)", marginTop: 2 }}>{it.cargo} · {it.empresa}</div>
                </div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

/* ============================================================ CTA PARA EMPRESAS */
function EmpresaCTA() {
  const mailto = "mailto:" + CONTACT.email + "?subject=" + encodeURIComponent("Solicito información — Reclutamiento MarketProof");
  return (
    <section style={{ background: "var(--mp-mint)", color: "var(--mp-ink)", position: "relative", overflow: "hidden" }} id="empresas">
      <div style={{ position: "absolute", top: "-40%", right: "-5%", width: 480, height: 480, borderRadius: 999, background: "radial-gradient(circle, rgba(255,255,255,0.5), transparent 64%)" }} />
      <div style={{ maxWidth: 1000, margin: "0 auto", padding: "96px 28px", textAlign: "center", position: "relative" }}>
        <Reveal>
          <h2 style={{ fontSize: "clamp(32px, 4.4vw, 60px)", fontWeight: 800, lineHeight: 1.05, letterSpacing: "-0.035em", margin: "0 0 18px", textWrap: "balance" }}>
            ¿Tienes una posición que necesitas cubrir?
          </h2>
          <p style={{ fontSize: "clamp(16px, 1.5vw, 20px)", lineHeight: 1.55, margin: "0 auto 34px", maxWidth: 620, color: "rgba(15,32,44,0.72)", fontWeight: 500, textWrap: "pretty" }}>
            Identificamos talento, lo evaluamos, lo filtramos, te presentamos una lista corta priorizada y preparamos a la persona para el rol.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="ink" size="lg" icon="message" href={CONTACT.whatsapp} target="_blank">Habla con nuestro equipo</Button>
            <Button variant="outlineInk" size="lg" icon="mail" href={mailto}>Solicita información</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================ THANK YOU  (/reclutamiento/gracias) */
function TalentoGracias({ go }) {
  useTalentoEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, []);
  const verVacantes = () => { go("reclutamiento"); setTimeout(() => jumpTo("vacantes"), 160); };
  return (
    <main>
      <Section bg="cloud" pad="176px 28px 128px">
        <Reveal style={{ maxWidth: 620, margin: "0 auto" }}>
          <div style={{ background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: "52px 40px", boxShadow: "var(--mp-shadow-md)", border: "1px solid var(--mp-border)", textAlign: "center" }}>
            <div style={{ width: 66, height: 66, borderRadius: 999, background: "var(--mp-mint)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
              <Icon name="check" size={32} stroke={2.6} />
            </div>
            <h1 style={{ fontSize: "clamp(28px, 3.4vw, 42px)", fontWeight: 800, letterSpacing: "-0.025em", margin: "0 0 14px" }}>
              ¡Recibimos tu información!
            </h1>
            <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--mp-fg-muted)", margin: "0 0 30px", textWrap: "pretty" }}>
              Nuestro equipo revisará tu perfil y se pondrá en contacto contigo si existe una oportunidad compatible.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <Button variant="ink" icon="arrowRight" onClick={() => go("cursos")}>Explorar cursos de MarketProof</Button>
              <Button variant="outlineInk" onClick={verVacantes}>Ver vacantes</Button>
            </div>
          </div>
        </Reveal>
      </Section>
    </main>
  );
}

/* ============================================================ PAGE */
function Talento({ go, sub }) {
  const [applyFor, setApplyFor] = useTalentoState("");
  if (sub === "gracias") return <TalentoGracias go={go} />;

  const applyToVacante = (id) => { setApplyFor(id); jumpTo("aplicar"); };

  return (
    <main>
      <TalentoHero />
      <TrustStrip />
      <ValueProp />
      <ProcessTimeline />
      <VacantesMarketplace onApply={applyToVacante} />
      <ApplyForm vacanteId={applyFor} onVacanteChange={setApplyFor} onSubmitDone={() => go("/reclutamiento/gracias")} />
      <EmpresaTestimonios />
      <EmpresaCTA />
    </main>
  );
}

window.Talento = Talento;