// BEAKEN — Lab · Academy · Contacto

// ---- SubHero reusable ----
const SubHero = ({ num, eyebrow, title, sub, img, imgCap, code, ctaPrimary, ctaSecondary, secondaryHref, ctaPrimaryHref }) => (
  <section className="hero">
    <div className="grid-bg"></div>
    <div className="container" style={{ position: 'relative' }}>
      <div className="hero-split">
        <div>
          <Reveal>
            <span className="tag electrico" style={{ marginBottom: 24, display: 'inline-flex' }}>
              <span className="dot"></span> {num} — {eyebrow}
            </span>
          </Reveal>
          <Reveal delay={1}>
            <h1 className="hero-head" dangerouslySetInnerHTML={{ __html: title }}></h1>
          </Reveal>
          <Reveal delay={2}><p className="hero-sub">{sub}</p></Reveal>
          <Reveal delay={3} style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href={ctaPrimaryHref || '#/contacto'} onClick={(e)=>{e.preventDefault();navigate(ctaPrimaryHref?.replace('#','') || '/contacto');}} className="btn btn-primary">
              {ctaPrimary} <Arr />
            </a>
            <a href={secondaryHref || '#que'} className="btn btn-secondary">{ctaSecondary}</a>
          </Reveal>
        </div>
        <Reveal delay={2} className="image">
          <ImgBlock src={img} caption={imgCap} code={code} label={eyebrow.toUpperCase()} />
        </Reveal>
      </div>
    </div>
  </section>
);

// =====================================================================
// ACADEMY — Foco talleres IA + capacitaciones (In-Company solo mención)
// =====================================================================
const Academy = () => {
  const trackIA = [
    { tag: "FORMATO INDIVIDUAL", t: "Sesión 1:1 IA", d: "1 hora privada para resolver tu caso de uso específico de IA. Sales con un flujo configurado.", note: "Por sesión · remoto" },
    { tag: "TALLER ABIERTO · POPULAR", t: "Taller IA Aplicada", d: "1 día completo. Casos reales de tu industria. Tu equipo sale con prompts y agentes funcionando.", note: "Por persona · cupo limitado", featured: true },
    { tag: "FORMATO IN-COMPANY", t: "Taller IA In-Company", d: "Diseñado a la medida de tu empresa. Hasta 15 personas, contenido sobre tus procesos reales.", note: "Cotización a medida" },
  ];

  const trackProcesos = [
    { tag: "LEAN", t: "Mapeo de Procesos", d: "Identifica cuellos de botella y oportunidades de mejora con metodología Lean.", precio: "A cotizar" },
    { tag: "OPERACIONES", t: "Gestión del Caos", d: "Cómo eliminar retrabajos, dependencia de personas y errores recurrentes.", precio: "A cotizar" },
    { tag: "DIRECTIVO", t: "Liderazgo Sistémico", d: "Para líderes que quieren operar con sistema, no con esfuerzo personal.", precio: "A cotizar" },
  ];

  const cursos = [
    { code: "AC-001", t: "Finanzas para PyMEs", d: "Control de caja y márgenes. Dashboard financiero simple.", duracion: "6h · 2 sesiones" },
    { code: "AC-002", t: "Digitización Operativa", d: "Las 3-5 herramientas SaaS correctas para tu negocio.", duracion: "8h · 2 sesiones" },
    { code: "AC-003", t: "Estructura Organizacional", d: "Roles, RACI, KPIs simples por puesto.", duracion: "4h · 1 sesión" },
  ];

  return (
    <div className="page-in">
      <SubHero
        num="03" eyebrow="Academy"
        title="Tu equipo<br/>domina la <span class='accent'>IA en 1 día.</span>"
        sub="Talleres prácticos con casos reales de tu industria. Salen con prompts, flujos y agentes funcionando — no con teoría."
        img="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2034&auto=format&fit=crop"
        imgCap={'"Casos reales. No teoría de conferencia."'}
        code="BK-301"
        ctaPrimary="Ver próxima fecha"
        ctaSecondary="Catálogo completo"
        secondaryHref="#track-ia"
      />

      {/* TRACK 1 — IA (PROTAGONISTA) */}
      <section className="sec" id="track-ia">
        <div className="container">
          <SectionAnchor num="01" label="TRACK PRINCIPAL · FOCO 2026" title="IA y Digitalización" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.5, color: 'var(--body)', maxWidth: 720, marginBottom: 40 }}>
              El track más solicitado. Tu equipo sale del taller con al menos un caso de uso de IA aplicado a su trabajo real — y lo está usando el lunes.
            </p>
          </Reveal>
          <div className="program-grid">
            {trackIA.map((p, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={p.t} className={`program-card${p.featured ? ' featured' : ''}`}>
                <div className="program-tag">{p.tag}</div>
                <h4>{p.t}</h4>
                <div className="duration">{p.note}</div>
                <p>{p.d}</p>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="program-cta">Cotizar <Arr /></a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TRACK 2 — PROCESOS Y OPERACIONES */}
      <section className="sec alt">
        <div className="container">
          <SectionAnchor num="02" label="TRACK COMPLEMENTARIO" title="Procesos y Operaciones" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--body)', maxWidth: 720, marginBottom: 40 }}>
              Para equipos que necesitan ordenar antes de digitalizar. Capacitaciones in-company sobre procesos, operaciones y liderazgo.
            </p>
          </Reveal>
          <div className="program-grid">
            {trackProcesos.map((p, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={p.t} className="program-card">
                <div className="program-tag">{p.tag}</div>
                <h4>{p.t}</h4>
                <p>{p.d}</p>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="program-cta">Cotizar <Arr /></a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CURSOS PYME */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="03" label="CATÁLOGO PARA PyMES" title="Cursos cerrados" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--body)', maxWidth: 720, marginBottom: 40 }}>
              Cursos diseñados para PyMEs de 10-50 colaboradores. Modalidad virtual con material descargable. Certificado Beaken Academy al finalizar.
            </p>
          </Reveal>
          <div className="cursos-grid">
            {cursos.map((c, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={c.code} className="card">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--electrico)', letterSpacing: '0.16em', fontWeight: 700, marginBottom: 12 }}>{c.code}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--marino)', marginBottom: 8, letterSpacing: '-0.02em' }}>{c.t}</h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--body)', lineHeight: 1.5, marginBottom: 16 }}>{c.d}</p>
                <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--caption)', letterSpacing: '0.1em', marginBottom: 12 }}>{c.duracion}</div>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 700, color: 'var(--rosa)', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 8 }}>Solicitar info <Arr /></a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* MODALIDADES + CÓMO RESERVAR */}
      <section className="sec dark">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="why-grid">
            <Reveal>
              <h2 className="sec-title" style={{ marginBottom: 32 }}>Cómo lo<br/><span className="blue">impartimos.</span></h2>
              <ul style={{ listStyle: 'none' }}>
                {[
                  { t: "Presencial · León Gto", d: "Talleres en nuestro espacio o en tus oficinas." },
                  { t: "Virtual en vivo", d: "Sesiones por Zoom con material interactivo." },
                  { t: "Híbrido", d: "Combinación de sesiones en vivo + contenido asincrónico." },
                  { t: "In-Company", d: "Diseñado a medida sobre los procesos reales de tu empresa." },
                ].map((m, i) => (
                  <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 20, padding: '18px 0', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
                    <div style={{ color: 'var(--rosa)', paddingTop: 2 }}><Check /></div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--paper)', marginBottom: 4 }}>{m.t}</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>{m.d}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </Reveal>
            <Reveal delay={2}>
              <h2 className="sec-title" style={{ marginBottom: 32 }}>¿Cómo<br/>reservas?</h2>
              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.15)', padding: 32 }}>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.85)', marginBottom: 24 }}>
                  Las fechas de talleres abiertos se publican mes a mes. Déjanos tu correo y te avisamos en cuanto abramos el cupo de la próxima fecha — sin spam, solo el aviso.
                </p>
                <ol style={{ listStyle: 'none', display: 'grid', gap: 14, marginBottom: 28 }}>
                  {[
                    "Solicita la próxima fecha del taller que te interesa.",
                    "Te confirmamos disponibilidad y reservamos tu lugar.",
                    "Pagas el taller y te enviamos los materiales previos.",
                  ].map((s, i) => (
                    <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12 }}>
                      <span className="mono" style={{ color: 'var(--rosa)', fontSize: 12, fontWeight: 700, paddingTop: 2 }}>0{i+1}</span>
                      <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5 }}>{s}</span>
                    </li>
                  ))}
                </ol>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
                  Solicitar próxima fecha <Arr />
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <BigCTA
        eyebrow="ACADEMY · CUPO LIMITADO"
        title="Tu equipo, listo para el lunes."
        sub="Reserva el próximo taller, agenda una sesión 1:1 o cotiza un programa In-Company a la medida."
        cta="Reservar mi lugar"
      />
    </div>
  );
};

// =====================================================================
// LAB — Incubadora (PRIMARIO) + AI Lab (SECUNDARIO) + Club + In-Company mención
// =====================================================================
const Lab = () => {
  const incubadora = [
    {
      tag: "ENTRADA · TALLER ÚNICO",
      t: "Lab Flash",
      duration: "3 horas · sesión única · grupal 4-10 personas",
      d: "Validas tu idea en una sola sesión. Sales con Lean Canvas completo, mapa de cliente ideal, 3 hipótesis a validar y 30 días de acceso a la comunidad."
    },
    {
      tag: "INCUBACIÓN 1:1",
      t: "Lab Sprint",
      duration: "4–6 semanas · sesiones de 3h · individual o dúo",
      d: "Construyes los cimientos de tu negocio: modelo, propuesta de valor, operación mínima, primeras ventas. Sesión 0 de descubrimiento gratis.",
      featured: true
    },
    {
      tag: "INCUBACIÓN GRUPAL",
      t: "Lab Community",
      duration: "8 semanas · grupal 8–12 emprendedores · Demo Day",
      d: "Programa completo con grupo. 8 sesiones temáticas + acompañamiento individual + Demo Day."
    },
  ];

  const aiLab = [
    { tag: "COMUNIDAD", t: "AI Lab Circle", duration: "mensual · online", d: "Un espacio para emprendedores que ya usan IA o quieren empezar. Conversaciones reales, casos de uso, sin cursos ni ventas." },
    { tag: "COMPETENCIA", t: "AI Lab Battle", duration: "evento trimestral · equipos mixtos", d: "Construyes un flujo IA en vivo, lo presentas al grupo y el público vota. Sales con algo funcionando y con feedback real de tus pares." },
    { tag: "EMPRESARIAL", t: "AI Lab Retos", duration: "evento · convocatoria abierta", d: "Empresas traen un reto real de su operación. Equipos lo atacan con IA en un día. La empresa se queda con las soluciones, los equipos con el aprendizaje." },
  ];

  return (
    <div className="page-in">
      <SubHero
        num="02" eyebrow="Lab"
        title="De la idea a tu<br/><span class='accent'>primera venta.</span>"
        sub="Beaken Lab es nuestra incubadora de negocios y laboratorio de IA. Validamos, estructuramos y lanzamos contigo — sin planes infinitos, sin teoría de relleno."
        img="https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=2070&auto=format&fit=crop"
        imgCap={'"La idea no es el negocio. El negocio es lo que construyes con la idea."'}
        code="BK-201"
        ctaPrimary="Agenda tu Lab Flash"
        ctaSecondary="Conocer programas"
        secondaryHref="#incubadora"
      />

      {/* QUÉ ES BEAKEN LAB + METODOLOGÍA */}
      <section className="sec">
        <div className="container">
          <SecHead
            num="SECCIÓN 01 / QUÉ ES"
            title="Incubadora<br/>+ <span class='blue'>laboratorio de IA.</span>"
            sub="Acompañamos a emprendedores y áreas de innovación a convertir ideas en negocios reales — con IA integrada desde el día uno."
          />
          <div className="metodos-grid">
            {[
              { t: "Design Thinking", d: "Entender al cliente antes de construir." },
              { t: "Lean Startup", d: "Validar rápido, gastar poco, pivotar a tiempo." },
              { t: "IA aplicada", d: "Cada emprendedor sale usando IA en su operación." },
              { t: "Ciclos cortos", d: "Cada sesión termina con entregable listo." },
            ].map((m, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={m.t} className="card">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--electrico)', fontWeight: 700, marginBottom: 12 }}>MÉTODO 0{i+1}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--marino)', marginBottom: 8, letterSpacing: '-0.01em' }}>{m.t}</h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--body)', lineHeight: 1.5 }}>{m.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* INCUBADORA — EJE PRINCIPAL */}
      <section className="sec alt" id="incubadora" style={{ paddingTop: 110 }}>
        <div className="container">
          <SectionAnchor num="01" label="EJE PRINCIPAL · INCUBADORA" title="Programas para emprendedores" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.5, color: 'var(--body)', maxWidth: 740, marginBottom: 48 }}>
              Tres niveles que se alimentan entre sí. Empieza con un taller de 3 horas y termina con incubación grupal y Demo Day. Cada nivel con entregables tangibles y precio cerrado.
            </p>
          </Reveal>
          <div className="program-grid">
            {incubadora.map((p, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={p.t} className={`program-card${p.featured ? ' featured' : ''}`}>
                <div className="program-tag">{p.tag}</div>
                <h4>{p.t}</h4>
                <div className="duration">{p.duration}</div>
                <p>{p.d}</p>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="program-cta">Quiero entrar <Arr /></a>
              </Reveal>
            ))}
          </div>

          {/* Becas */}
          <Reveal delay={3} style={{ marginTop: 56 }}>
            <div className="becas-block">
              <div className="becas-header">
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: 'var(--rosa)', fontWeight: 700, marginBottom: 16 }}>PROGRAMA DE BECAS</div>
                  <h3 className="becas-title">
                    El talento no debe<br/>frenarse por el precio.
                  </h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.5, color: 'var(--body)', marginTop: 16, maxWidth: 540 }}>
                    4 modalidades de beca para emprendedores con potencial. Postula tu proyecto y nuestro equipo evalúa tu caso.
                  </p>
                </div>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
                  Postular a beca <Arr />
                </a>
              </div>
              <div className="becas-grid">
                {[
                  { t: "Beca Completa", d: "1 lugar / community · 100% · Carta + entrevista" },
                  { t: "Beca Parcial", d: "2 lugares / community · 50% · Video 2 min" },
                  { t: "Beca Estudiantil", d: "Lab Flash gratis · Vía convenio universitario" },
                  { t: "Embajador", d: "Club Community 6 meses · Refiere 3 miembros" },
                ].map((b, i) => (
                  <div key={i} className="beca-item">
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--marino)', marginBottom: 6 }}>{b.t}</div>
                    <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--body)', lineHeight: 1.45 }}>{b.d}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* AI LAB — EJE SECUNDARIO */}
      <section className="sec" id="ai-lab">
        <div className="container">
          <SectionAnchor num="02" label="EJE SECUNDARIO · AI LAB" title="Laboratorio de IA aplicada" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.5, color: 'var(--body)', maxWidth: 740, marginBottom: 16 }}>
              No es un curso más de IA. Es un espacio práctico donde cada emprendedor o equipo construye al menos un flujo real con IA aplicado a su operación.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--caption)', maxWidth: 740, marginBottom: 40 }}>
              Diagnóstico de oportunidades · construcción de un agente o flujo IA · integración con tus herramientas (WhatsApp, correo, CRM, hojas) · medición de impacto.
            </p>
          </Reveal>
          <div className="program-grid">
            {aiLab.map((p, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={p.t} className="program-card">
                <div className="program-tag">{p.tag}</div>
                <h4>{p.t}</h4>
                <div className="duration">{p.duration}</div>
                <p>{p.d}</p>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="program-cta">Quiero participar <Arr /></a>
              </Reveal>
            ))}
          </div>

          {/* Empresa patrocinadora */}
          <Reveal delay={3} style={{ marginTop: 56 }}>
            <div style={{ background: 'var(--crema)', borderLeft: '3px solid var(--rosa)', padding: '32px 36px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }} className="patrocinador-block">
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--rosa)', fontWeight: 700, marginBottom: 12 }}>EMPRESA PATROCINADORA</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 800, color: 'var(--marino)', letterSpacing: '-0.02em', marginBottom: 12, lineHeight: 1.15 }}>
                  ¿Tienes una idea, un reto o quieres traer<br/>AI Lab a tu comunidad o empresa?
                </h3>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.5, color: 'var(--body)', maxWidth: 580 }}>
                  Cuéntanos qué tienes en mente — armamos el formato a la medida.
                </p>
              </div>
              <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
                Escríbenos y lo platicamos <Arr />
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* TU RUTA EN LAB — ROADMAP VISUAL */}
      <section className="sec dark">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="sec-head" style={{ marginBottom: 56 }}>
            <Reveal className="sec-num">SECCIÓN 04 / RUTA</Reveal>
            <Reveal delay={1}>
              <h2 className="sec-title">
                Tu roadmap<br/>en el <span className="blue">Lab.</span>
              </h2>
              <p style={{ marginTop: 20, maxWidth: 720, fontSize: 17, lineHeight: 1.5, color: 'rgba(255,255,255,0.75)', fontFamily: 'var(--font-body)' }}>
                Cada etapa tiene un programa claro. Empieza donde estés — no necesitas saltar pasos.
              </p>
            </Reveal>
          </div>
          <Reveal>
            <div className="roadmap">
              {[
                { stage: "01", etapa: "IDEA",         situacion: "Tengo una idea y no sé si vale la pena.",           prog: "Lab Flash" },
                { stage: "02", etapa: "IA",           situacion: "Quiero usar IA en mi negocio desde el inicio.",      prog: "AI Lab Circle" },
                { stage: "03", etapa: "VALIDACIÓN",   situacion: "Ya validé y quiero construir el negocio.",           prog: "Lab Sprint" },
                { stage: "04", etapa: "ESTRUCTURA",   situacion: "Lo quiero hacer con otros emprendedores.",           prog: "Lab Community" },
                { stage: "05", etapa: "CRECIMIENTO",  situacion: "Ya empecé y quiero acompañamiento continuo.",        prog: "Club Beaken Lab" },
                { stage: "06", etapa: "EMPRESA",      situacion: "Tengo empresa y quiero explorar oportunidades.",     prog: "Discovery / IntraSprint" },
              ].map((s, i) => (
                <div className="roadmap-step" key={s.stage}>
                  <div className="roadmap-line"></div>
                  <div className="roadmap-dot"></div>
                  <div className="roadmap-num">{s.stage}</div>
                  <div className="roadmap-content">
                    <div className="roadmap-etapa">{s.etapa}</div>
                    <div className="roadmap-situacion">{s.situacion}</div>
                    <div className="roadmap-prog">{s.prog}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* CLUB BEAKEN LAB */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="03" label="MEMBRESÍA MENSUAL" title="Club Beaken Lab" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--body)', maxWidth: 720, marginBottom: 32 }}>
              Comunidad activa de emprendedores. Sin comprometerte a un programa largo, pero con acompañamiento constante.
            </p>
          </Reveal>
          <Reveal delay={1}>
            <div className="tier-table">
              <div className="col">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--electrico)', letterSpacing: '0.16em', fontWeight: 700, marginBottom: 8 }}>NIVEL 01</div>
                <h5>Community</h5>
                <ul style={{ marginTop: 16 }}>
                  <li>Grupo privado de emprendedores</li>
                  <li>1 Lab Flash grupal / mes</li>
                  <li>Plantillas y recursos exclusivos</li>
                  <li>Red de referidos</li>
                </ul>
              </div>
              <div className="col highlight">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--rosa)', letterSpacing: '0.16em', fontWeight: 700, marginBottom: 8 }}>NIVEL 02 · POPULAR</div>
                <h5>Builder</h5>
                <ul style={{ marginTop: 16 }}>
                  <li>Todo Community</li>
                  <li>Sesión grupal de revisión / mes</li>
                  <li>Acceso anticipado a communities</li>
                  <li>Descuento en Sprint / Community</li>
                </ul>
              </div>
              <div className="col">
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--electrico)', letterSpacing: '0.16em', fontWeight: 700, marginBottom: 8 }}>NIVEL 03</div>
                <h5>Founder</h5>
                <ul style={{ marginTop: 16 }}>
                  <li>Todo Builder</li>
                  <li>1:1 con Alex 30 min / mes</li>
                  <li>Mayor descuento en Lab Sprint</li>
                  <li>Certificación en perfil Beaken</li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* LAB IN-COMPANY */}
      <section className="sec alt">
        <div className="container">
          <SectionAnchor num="04" label="EMPRESAS" title="Lab In-Company" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.5, color: 'var(--body)', maxWidth: 740, marginBottom: 16 }}>
              Para empresas que quieren explorar nuevas oportunidades sin detener su operación actual.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--caption)', maxWidth: 740, marginBottom: 40 }}>
              Discovery Lab para identificar segmentos y canales con Design Thinking, o IntraSprint de 12 semanas para construir un MVP corporativo validado.
            </p>
          </Reveal>
          <div className="program-grid">
            {[
              { tag: "EXPLORACIÓN · DESIGN THINKING", t: "Discovery Lab", duration: "Bloques de 3h, 6h o 9h", d: "Identificamos nuevos segmentos, canales o líneas de negocio. Mapa de oportunidades priorizado + hipótesis de validación.", cta: "Agendar exploración" },
              { tag: "MVP CORPORATIVO · 12 SEMANAS", t: "IntraSprint", duration: "12 semanas · equipo interno", d: "Programa para construir y validar un nuevo producto, servicio o canal dentro de tu empresa. MVP entregado al final.", cta: "Cotizar IntraSprint" },
              { tag: "ALIANZAS UNIVERSITARIAS", t: "Capítulo Beaken Lab", duration: "Anual · campus", d: "Capítulo del Club en tu institución con contenido mensual. Demo Day en campus + becas estudiantiles.", cta: "Hablar de alianza" },
            ].map((p, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={p.t} className="program-card">
                <div className="program-tag">{p.tag}</div>
                <h4>{p.t}</h4>
                <div className="duration">{p.duration}</div>
                <p>{p.d}</p>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="program-cta">
                  {p.cta} <ArrRight />
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <BigCTA
        eyebrow="LLAMADA DE 15 MIN · GRATIS"
        title="¿Listo para empezar?"
        sub="La idea no es el negocio. El negocio es lo que construyes con la idea. Agenda 15 minutos para definir tu ruta."
        cta="Agenda tu llamada"
      />
    </div>
  );
};

// =====================================================================
// CONTACTO
// =====================================================================
const Contacto = () => {
  const [form, setForm] = useState({ nombre: '', empresa: '', email: '', whatsapp: '', linea: 'Agency', mensaje: '', website: '' });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [code, setCode] = useState(null);
  const now = useClock();
  const mxTime = getMexicoTime(now);
  const open = isOpen(now);

  const submit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(null);
    try {
      const res = await fetch('enviar.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (data.ok) {
        setCode(data.code || ('BK-' + Date.now().toString().slice(-6)));
        setSent(true);
      } else {
        setError(data.error || 'No se pudo enviar. Intenta de nuevo.');
      }
    } catch (err) {
      // Fallback en local: simulación de envío exitoso
      if (window.location.hostname === '127.0.0.1' || window.location.hostname === 'localhost') {
        setCode('BK-LOCAL-' + Date.now().toString().slice(-4));
        setSent(true);
      } else {
        setError('Error de red. Intenta de nuevo o escríbenos a hola@beaken.mx.');
      }
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="page-in">
      <section className="hero" style={{ paddingBottom: 40 }}>
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <span className="tag electrico" style={{ marginBottom: 24, display: 'inline-flex' }}>
              <span className="dot"></span> CONTACTO
            </span>
          </Reveal>
          <Reveal delay={1}>
            <h1 className="hero-head" style={{ fontSize: 'clamp(48px, 8vw, 120px)' }}>
              Hablemos.<br/>
              <span className="accent">15 minutos,</span><br/>
              sin rodeos.
            </h1>
          </Reveal>
          <Reveal delay={2}>
            <p className="hero-sub" style={{ maxWidth: 660, marginTop: 32 }}>
              Cuéntanos en 1 minuto qué te está quitando el sueño. Salimos con una llamada agendada o con una respuesta honesta.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="sec" style={{ paddingTop: 64 }}>
        <div className="container contacto-grid">
          <Reveal>
            {sent ? (
              <div className="form-success form" style={{ padding: 0 }}>
                <div style={{ padding: 48 }}>
                  <div style={{ display: 'flex', justifyContent: 'center', color: 'var(--rosa)', marginBottom: 20 }}>
                    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="28" cy="28" r="26"/><path d="M16 28 L24 36 L40 20"/></svg>
                  </div>
                  <h3>Mensaje enviado.</h3>
                  <p>Recibimos tu solicitud con código <span className="mono" style={{ color: 'var(--electrico)' }}>{code}</span>. Pronto te contactamos para agendar la llamada.</p>
                  <div style={{ marginTop: 32 }}>
                    <button onClick={()=>{setSent(false); setCode(null); setError(null); setForm({ nombre: '', empresa: '', email: '', whatsapp: '', linea: 'Agency', mensaje: '', website: '' });}} className="btn btn-secondary">
                      Enviar otro
                    </button>
                  </div>
                </div>
              </div>
            ) : (
              <form className="form" onSubmit={submit}>
                <div className="form-row">
                  <label><span className="i">01</span> Nombre</label>
                  <input required value={form.nombre} onChange={(e)=>setForm({...form, nombre: e.target.value})} placeholder="María González" />
                </div>
                <div className="form-row">
                  <label><span className="i">02</span> Empresa</label>
                  <input required value={form.empresa} onChange={(e)=>setForm({...form, empresa: e.target.value})} placeholder="MiNegocio" />
                </div>
                <div className="form-row">
                  <label><span className="i">03</span> Email</label>
                  <input required type="email" value={form.email} onChange={(e)=>setForm({...form, email: e.target.value})} placeholder="maria@minegocio.mx" />
                </div>
                <div className="form-row">
                  <label><span className="i">04</span> WhatsApp</label>
                  <input value={form.whatsapp} onChange={(e)=>setForm({...form, whatsapp: e.target.value})} placeholder="+52 477 000 0000" />
                </div>
                <div className="form-row">
                  <label><span className="i">05</span> Unidad</label>
                  <select value={form.linea} onChange={(e)=>setForm({...form, linea: e.target.value})}>
                    <option>Agency — Transformación operativa</option>
                    <option>Lab — Incubadora / AI Lab</option>
                    <option>Lab In-Company — Empresas</option>
                    <option>Academy — Talleres IA y capacitación</option>
                    <option>No sé todavía</option>
                  </select>
                </div>
                <div className="form-row">
                  <label style={{ alignItems: 'flex-start', paddingTop: 22 }}><span className="i">06</span> Qué necesitas</label>
                  <textarea required value={form.mensaje} onChange={(e)=>setForm({...form, mensaje: e.target.value})} placeholder="En una frase: qué te está quitando el sueño operativamente hoy."></textarea>
                </div>
                {/* Honeypot anti-spam (invisible para humanos) */}
                <input type="text" name="website" value={form.website} onChange={(e)=>setForm({...form, website: e.target.value})} tabIndex="-1" autoComplete="off" style={{ position: 'absolute', left: '-9999px', opacity: 0, height: 0, width: 0 }} aria-hidden="true" />
                {error && (
                  <div style={{ padding: '14px 24px', background: '#fff5f7', borderTop: '1px solid var(--border)', color: 'var(--rosa)', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em' }}>
                    ⚠ {error}
                  </div>
                )}
                <button type="submit" className="form-submit" disabled={sending}>
                  <span>{sending ? 'Enviando…' : 'Enviar solicitud'}</span>
                  <span className="status"><span className="dot"></span>{sending ? 'CONECTANDO' : 'SECURE · END-TO-END'}</span>
                </button>
              </form>
            )}
          </Reveal>

          <Reveal delay={2}>
            <div className="mono up" style={{ fontSize: 10, color: 'var(--caption)', marginBottom: 20, paddingBottom: 12, borderBottom: '2px solid var(--electrico)', fontWeight: 600 }}>INFORMACIÓN DIRECTA</div>
            <div style={{ marginBottom: 32 }}>
              {[
                { k: 'EMAIL', v: 'hola@beaken.mx' },
                { k: 'BASE', v: 'LEÓN, GTO · MX' },
                { k: 'COBERTURA', v: 'LATAM · REMOTO' },
                { k: 'HORARIO', v: 'L–V · 9–18h CST' },
              ].map((r, i) => (
                <div className="readout" key={i}>
                  <span className="k">{r.k}</span>
                  <span className="dots">························································</span>
                  <span className="v">{r.v}</span>
                </div>
              ))}
              <div className="readout">
                <span className="k">AHORA</span>
                <span className="dots">························································</span>
                <span className="v" style={{ color: open ? 'var(--electrico)' : 'var(--rosa)' }}>
                  {mxTime} CST · {open ? 'ABIERTO' : 'CERRADO'}
                </span>
              </div>
            </div>
            <div className="card" style={{ background: 'var(--marino)', color: 'var(--paper)', borderColor: 'var(--marino)' }}>
              <div className="card-label" style={{ color: 'rgba(255,255,255,0.5)' }}>
                <span>QUÉ PASA DESPUÉS</span>
                <span className="num" style={{ color: 'var(--rosa)' }}>+</span>
              </div>
              <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', marginBottom: 20, color: 'var(--paper)' }}>3 pasos. Sin sorpresas.</h4>
              <ol style={{ listStyle: 'none' }}>
                {[
                  'Te contactamos para agendar la llamada de 15 min.',
                  'Si encaja, Session Zero gratis para diagnosticar.',
                  'Si no encaja, te lo decimos honestamente.'
                ].map((s, i) => (
                  <li key={i} style={{ padding: '12px 0', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.12)' : 0, display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12 }}>
                    <span className="mono" style={{ color: 'var(--rosa)', fontSize: 12, fontWeight: 700 }}>0{i+1}</span>
                    <span style={{ fontSize: 14, fontFamily: 'var(--font-body)' }}>{s}</span>
                  </li>
                ))}
              </ol>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
};

// =====================================================================
// ALIADOS — Instituciones aliadas + Empresas Impulsoras
// =====================================================================
const Aliados = () => {
  const niveles = [
    { tag: "NIVEL 01", t: "Impulsor", d: "Presencia en eventos y comunidad." },
    { tag: "NIVEL 02 · POPULAR", t: "Catalizador", d: "Co-creación de programas y visibilidad ampliada.", featured: true },
    { tag: "NIVEL 03", t: "Fundador", d: "Alianza estratégica con acceso prioritario a talento y proyectos." },
  ];

  return (
    <div className="page-in">
      <SubHero
        num="04" eyebrow="Aliados"
        title="Respaldados por<br/>quienes mueven<br/>los <span class='accent'>ecosistemas.</span>"
        sub="Trabajamos junto a instituciones, incubadoras, organismos empresariales y entidades de gobierno que comparten una convicción: la transformación real requiere estrategia, tecnología y comunidad al mismo tiempo."
        img="https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=2070&auto=format&fit=crop"
        imgCap={'"Las alianzas correctas multiplican el alcance de cada proyecto."'}
        code="BK-401"
        ctaPrimary="Conversemos"
        ctaSecondary="Empresas Impulsoras"
        secondaryHref="#empresas-impulsoras"
      />

      {/* INSTITUCIONES ALIADAS */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="01" label="RED DE ALIANZAS" title="Instituciones aliadas" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'var(--body)', maxWidth: 760, marginBottom: 24 }}>
              Trabajamos junto a instituciones educativas, incubadoras, organismos empresariales y entidades de gobierno que comparten una convicción: que la transformación real de las empresas requiere estrategia, tecnología y comunidad al mismo tiempo.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: 'var(--body)', maxWidth: 760, marginBottom: 40 }}>
              Nuestras alianzas institucionales nos permiten llegar más lejos, con más recursos y con el respaldo de quienes ya tienen la confianza del sector.
            </p>
          </Reveal>
          <Reveal delay={1}>
            <div style={{ background: 'var(--crema)', borderLeft: '3px solid var(--rosa)', padding: '32px 36px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }} className="patrocinador-block">
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--rosa)', fontWeight: 700, marginBottom: 12 }}>SUMA TU INSTITUCIÓN</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 800, color: 'var(--marino)', letterSpacing: '-0.02em', lineHeight: 1.15 }}>
                  ¿Tu institución quiere sumarse?
                </h3>
              </div>
              <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
                Conversemos <Arr />
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* EMPRESAS IMPULSORAS */}
      <section className="sec alt" id="empresas-impulsoras">
        <div className="container">
          <SectionAnchor num="02" label="EMPRESAS IMPULSORAS" title="Empresas que apuestan por el ecosistema" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'var(--body)', maxWidth: 760, marginBottom: 24 }}>
              Las Empresas Impulsoras son organizaciones que creen que fortalecer a otros negocios también fortalece el suyo. A través de su participación, hacen posible que más emprendedores y equipos accedan a formación, mentoría y herramientas reales de transformación.
            </p>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--marino)', letterSpacing: '-0.01em', marginBottom: 48 }}>
              No es filantropía. Es visión de largo plazo.
            </p>
          </Reveal>

          <div className="program-grid">
            {niveles.map((n, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={n.t} className={`program-card${n.featured ? ' featured' : ''}`}>
                <div className="program-tag">{n.tag}</div>
                <h4>{n.t}</h4>
                <p>{n.d}</p>
                <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="program-cta">Quiero este nivel <Arr /></a>
              </Reveal>
            ))}
          </div>

          <Reveal delay={4} style={{ marginTop: 48, textAlign: 'center' }}>
            <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
              Quiero ser Empresa Impulsora <Arr />
            </a>
          </Reveal>
        </div>
      </section>

      {/* DIRECTORIO DE ALIADOS */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="03" label="DIRECTORIO" title="Conoce a nuestros aliados" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--body)', maxWidth: 720, marginBottom: 40 }}>
              Cada aliado tiene una historia y un rol propio dentro del ecosistema. Haz click en cualquiera para conocer más sobre la alianza.
            </p>
          </Reveal>
          <div className="aliado-grid">
            {ALIADOS.map((al, i) => {
              const tipoColor = al.tipo === 'Institución' ? 'electrico' : al.tipo === 'Empresa Impulsora' ? 'rosa' : 'naranja';
              return (
                <Reveal delay={Math.min((i % 3) + 1, 5)} key={al.slug} className="aliado-card">
                  <a href={`#/aliados/${al.slug}`} onClick={(e)=>{e.preventDefault();navigate(`/aliados/${al.slug}`);}} className="aliado-logo-link">
                    <img src={al.logo} alt={al.nombre} referrerPolicy="no-referrer" />
                  </a>
                  <div className="aliado-body">
                    <span className={`aliado-tipo aliado-tipo-${tipoColor}`}>{al.tipo}</span>
                    <h4 className="aliado-name">
                      <a href={`#/aliados/${al.slug}`} onClick={(e)=>{e.preventDefault();navigate(`/aliados/${al.slug}`);}}>{al.nombre}</a>
                    </h4>
                    <div className="aliado-sector">{al.sector}</div>
                    <a href={`#/aliados/${al.slug}`} onClick={(e)=>{e.preventDefault();navigate(`/aliados/${al.slug}`);}} className="aliado-detail-link">Conocer la alianza →</a>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      <BigCTA
        eyebrow="ALIANZAS · LATAM · 2026"
        title="Construyamos algo grande juntos."
        sub="Si compartes la visión de fortalecer el ecosistema PyME mexicano, queremos conocerte."
        cta="Hablemos"
      />
    </div>
  );
};

// =====================================================================
// ORIGO BEAKEN — Joint Venture Estrategia + IA
// =====================================================================
const OrigoBeaken = () => {
  const ejes = [
    {
      num: "01",
      t: "Diagnóstico Estratégico",
      lead: "Antes de construir, hay que saber exactamente qué.",
      d: "Analizamos tu empresa, tu mercado y tu competencia para definir el rumbo con precisión — sin suposiciones.",
      tags: "Estrategia corporativa · competitiva · go-to-market"
    },
    {
      num: "02",
      t: "Diseño Operativo",
      lead: "Cada decisión estratégica necesita un sistema que la sostenga.",
      d: "Convertimos prioridades en procesos, métricas y estructuras que se pueden operar — y mejorar.",
      tags: "Modelo operativo · OKRs · arquitectura de procesos"
    },
    {
      num: "03",
      t: "Digitalización e Implementación Tecnológica",
      lead: "La estrategia vale lo que se ejecuta.",
      d: "Construimos los sistemas, flujos y herramientas digitales que hacen que tu operación avance — desde la automatización hasta la integración de plataformas.",
      tags: "Automatización · CRM · reporteo · integraciones"
    },
  ];

  return (
    <div className="page-in">
      <SubHero
        num="05" eyebrow="Origo Beaken"
        title="Claridad estratégica que se<br/><span class='accent'>ejecuta con IA.</span>"
        sub="La mayoría de las empresas sabe a dónde quiere llegar. Pocas tienen cómo hacerlo. Origo Beaken cierra esa brecha — con la estrategia correcta y los sistemas para implementarla."
        img="https://images.unsplash.com/photo-1606326608606-aa0b62935f2b?q=80&w=2070&auto=format&fit=crop"
        imgCap={'"Joint Venture · Estrategia + IA — para empresas que ya saben a dónde van."'}
        code="BK-501"
        ctaPrimary="Hablemos de tu empresa"
        ctaSecondary="Cómo trabajamos"
        secondaryHref="#brecha"
      />

      {/* LA BRECHA */}
      <section className="sec" id="brecha">
        <div className="container">
          <SecHead
            num="SECCIÓN 01 / EL PROBLEMA"
            title="El problema no es saber.<br/>Es <span class='accent'>ejecutar.</span>"
          />
          <div className="why-grid">
            <Reveal>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'var(--body)', marginBottom: 20 }}>
                Muchos negocios tienen consultores que diagnostican y recomiendan. Pocos tienen quién traduzca esas decisiones en sistemas reales que funcionen sin depender de más reuniones.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'var(--body)', marginBottom: 20 }}>
                <strong style={{ color: 'var(--marino)' }}>Origo</strong> ayuda a líderes a tomar las decisiones más importantes con claridad y convicción. <strong style={{ color: 'var(--marino)' }}>Beaken</strong> convierte esas decisiones en operaciones que corren con inteligencia artificial.
              </p>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--marino)', letterSpacing: '-0.01em', lineHeight: 1.25 }}>
                Juntos, no vendemos un plan — construimos el sistema que lo ejecuta.
              </p>
            </Reveal>
            <Reveal delay={1}>
              <div className="stat-grid">
                <div className="stat dark">
                  <div className="lbl">ORIGO</div>
                  <p>Estrategia corporativa, competitiva y go-to-market.</p>
                </div>
                <div className="stat dark">
                  <div className="lbl">BEAKEN</div>
                  <p>Operación, IA aplicada, sistemas que ejecutan.</p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* LO QUE HACEMOS */}
      <section className="sec alt">
        <div className="container">
          <SectionAnchor num="02" label="LO QUE HACEMOS" title="Tres ejes integrados" />
          <div className="program-grid">
            {ejes.map((e, i) => (
              <Reveal delay={Math.min(i+1, 5)} key={e.num} className="program-card">
                <div className="program-tag">EJE {e.num}</div>
                <h4>{e.t}</h4>
                <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--marino)', marginBottom: 12, letterSpacing: '-0.01em' }}>{e.lead}</p>
                <p>{e.d}</p>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--electrico)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700, paddingTop: 16, borderTop: '1px solid var(--border)', marginTop: 'auto' }}>{e.tags}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* POR QUÉ JUNTOS */}
      <section className="sec dark">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="sec-head" style={{ marginBottom: 56 }}>
            <Reveal className="sec-num">SECCIÓN 03 / SINERGIA</Reveal>
            <Reveal delay={1}>
              <h2 className="sec-title">
                Dos firmas.<br/>Un solo objetivo:<br/><span className="accent">que funcione.</span>
              </h2>
            </Reveal>
          </div>
          <div className="why-grid">
            <Reveal>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', marginBottom: 20 }}>
                <strong style={{ color: 'var(--paper)' }}>Origo</strong> aporta el rigor estratégico de quien lleva años haciéndose las preguntas que otros evitan.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', marginBottom: 24 }}>
                <strong style={{ color: 'var(--paper)' }}>Beaken</strong> aporta la capacidad de construir sistemas de IA que operan sin fricción desde el primer día.
              </p>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--paper)', letterSpacing: '-0.01em', lineHeight: 1.3 }}>
                El resultado no es consultoría más tecnología. Es una empresa con dirección clara y los sistemas para moverse más rápido que su competencia.
              </p>
            </Reveal>
            <Reveal delay={1}>
              <div className="stat-grid">
                <div className="stat dark">
                  <div className="val accent">+</div>
                  <div className="lbl">ESTRATEGIA</div>
                </div>
                <div className="stat dark">
                  <div className="val blue">×</div>
                  <div className="lbl">EJECUCIÓN</div>
                </div>
                <div className="stat dark" style={{ gridColumn: 'span 2' }}>
                  <div className="lbl">RESULTADO</div>
                  <p>Empresa con dirección clara + sistemas que ejecutan sin fricción.</p>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="big-cta">
        <Reveal>
          <div className="container">
            <div style={{ marginBottom: 24 }}>
              <span className="tag" style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>
                <span className="dot" style={{ background: '#fff' }}></span> SESIÓN DIAGNÓSTICO · GRATIS
              </span>
            </div>
            <h2>El primer paso es entender<br/>tu punto de partida.</h2>
            <p>No llegamos con respuestas prediseñadas. Llegamos a pensar y construir contigo.</p>
            <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
              Agenda una sesión diagnóstico <Arr />
            </a>
          </div>
        </Reveal>
      </section>
    </div>
  );
};

// =====================================================================
// DATOS COMPARTIDOS — Mentores y Aliados (reemplazar con datos reales)
// =====================================================================
const MENTORES = [
  { slug: 'alex-navarro', foto: 'https://i.pravatar.cc/600?img=11', nombre: 'Alex Navarro', nombreCorto: 'Alex', rol: 'Director General', empresa: 'Beaken', area: 'Estrategia', areas: ['Estrategia', 'Operaciones', 'IA aplicada'],
    bio: 'Consultoría operativa y digital para PyMEs. 10+ años transformando negocios mexicanos.',
    bioLarga: 'Director General de Beaken. Lleva más de 10 años acompañando a PyMEs mexicanas en su transformación operativa y digital. Comenzó como consultor independiente en León, Guanajuato, y construyó una agencia que combina estrategia, IA aplicada y ejecución real. Ha trabajado con más de 60 empresas en sectores que van desde manufactura hasta retail y servicios profesionales.',
    frase: 'No vendemos consultoría: vendemos negocios que ya funcionan.',
    especialidades: ['Diagnóstico operativo', 'Blueprint + Sprint', 'IA aplicada a PyMEs', 'Estructura organizacional'],
    programas: [{ tipo: 'Consultorio', t: 'Consultorio PyME', d: 'Diagnóstico exprés y 3 acciones concretas.' }, { tipo: 'Mentoría', t: 'Lab Sprint', d: 'Acompañamiento 1:1 para emprendedores.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'carolina-mendez', foto: 'https://i.pravatar.cc/600?img=5', nombre: 'Carolina Méndez', nombreCorto: 'Caro', rol: 'Head of AI', empresa: 'Tech LATAM', area: 'IA', areas: ['IA', 'Data', 'Automatización'],
    bio: 'Especialista en IA aplicada a procesos operativos. Implementaciones reales en retail y servicios.',
    bioLarga: 'Líder técnica de IA con foco en operaciones reales. Ha implementado sistemas de automatización inteligente en cadenas de retail con más de 200 puntos de venta y empresas de servicios B2B. Su enfoque combina rigor técnico con sentido común operativo: nada que no se pueda mantener sin un PhD.',
    frase: 'La mejor IA es la que tu equipo puede mantener un lunes a las 8 a.m.',
    especialidades: ['Agentes con LangChain', 'Automatización con n8n', 'Análisis predictivo', 'IA conversacional'],
    programas: [{ tipo: 'Taller', t: 'AI Lab Battle', d: 'Construyes un flujo IA en vivo.' }, { tipo: 'Mentoría', t: 'AI Lab Build', d: 'Sprint 1:1 para implementar IA en tu negocio.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'diego-ramirez', foto: 'https://i.pravatar.cc/600?img=12', nombre: 'Diego Ramírez', nombreCorto: 'Diego', rol: 'CTO', empresa: 'Fintech Mx', area: 'Tecnología', areas: ['Tecnología', 'Arquitectura', 'Escalabilidad'],
    bio: 'Arquitectura de sistemas escalables. De startup a 100k usuarios en 18 meses.',
    bioLarga: 'CTO de una fintech mexicana en crecimiento. Ha liderado equipos técnicos desde MVPs hasta operaciones con cientos de miles de usuarios. Especialista en tomar decisiones de arquitectura que no comprometen el futuro: bases sólidas para escalar sin reescribir.',
    frase: 'La deuda técnica más cara es la que se paga en madrugadas.',
    especialidades: ['Arquitectura cloud', 'DevOps y CI/CD', 'Sistemas distribuidos', 'Equipos de ingeniería'],
    programas: [{ tipo: 'Mentoría', t: 'Tech Sprint', d: 'Sesiones 1:1 sobre arquitectura.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'fernanda-solis', foto: 'https://i.pravatar.cc/600?img=9', nombre: 'Fernanda Solís', nombreCorto: 'Fer', rol: 'CFO Fraccional', empresa: 'Múltiples PyMEs', area: 'Finanzas', areas: ['Finanzas', 'Capital', 'Estructura'],
    bio: 'Estructura financiera para crecimiento. Cierre de rondas seed y serie A.',
    bioLarga: 'CFO fraccional para PyMEs y startups en crecimiento. Ha cerrado rondas seed y serie A por más de 50M MXN combinados. Su enfoque: las finanzas no son contabilidad — son la herramienta más estratégica del fundador.',
    frase: 'No quiero que tu negocio sea grande. Quiero que sea sostenible.',
    especialidades: ['Modelado financiero', 'Levantamiento de capital', 'Tesorería operativa', 'Reporteo gerencial'],
    programas: [{ tipo: 'Taller', t: 'Finanzas para PyMEs', d: 'Control de caja y márgenes.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'hugo-ortega', foto: 'https://i.pravatar.cc/600?img=33', nombre: 'Hugo Ortega', nombreCorto: 'Hugo', rol: 'Marketing Lead', empresa: 'Consumer Brand', area: 'Marketing', areas: ['Marketing', 'Branding', 'Growth'],
    bio: 'Branding y growth para marcas de consumo. De cero a presencia nacional.',
    bioLarga: 'Líder de marketing en marcas de consumo. Ha llevado dos marcas de cero a distribución nacional combinando branding, growth digital y trade marketing. Su mantra: el marketing sin operación es presupuesto quemado.',
    frase: 'La marca se construye en cada interacción, no solo en el anuncio.',
    especialidades: ['Estrategia de marca', 'Performance marketing', 'Trade marketing', 'Storytelling'],
    programas: [{ tipo: 'Taller', t: 'Branding aplicado', d: 'De la marca a la operación.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'mariana-castro', foto: 'https://i.pravatar.cc/600?img=23', nombre: 'Mariana Castro', nombreCorto: 'Mari', rol: 'COO', empresa: 'Logistics Co.', area: 'Operaciones', areas: ['Operaciones', 'Lean', 'Procesos'],
    bio: 'Diseño de procesos para empresas de servicios. Lean + automatización.',
    bioLarga: 'COO de una empresa logística con operación multi-país. Combina metodologías Lean con automatización moderna para diseñar operaciones que escalan sin colapsar. Cree firmemente que un buen proceso vale más que mil reuniones.',
    frase: 'Si tienes que pedirle a alguien que recuerde el proceso, el proceso no existe.',
    especialidades: ['Mapeo de procesos', 'Lean operations', 'Automatización con n8n', 'Métricas operativas'],
    programas: [{ tipo: 'Taller', t: 'Mapeo de Procesos', d: 'Identifica cuellos de botella.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'roberto-vega', foto: 'https://i.pravatar.cc/600?img=14', nombre: 'Roberto Vega', nombreCorto: 'Rober', rol: 'Founder', empresa: '3 empresas', area: 'Liderazgo', areas: ['Liderazgo', 'Emprendimiento', 'Capital'],
    bio: 'Emprendedor serial. Levantó capital, contrató equipos y vendió 2 empresas.',
    bioLarga: 'Emprendedor serial con tres empresas fundadas y dos exits exitosos. Ha levantado más de 8M USD en capital y contratado equipos de hasta 80 personas. Hoy comparte lo que aprendió — incluyendo los errores caros — con la siguiente generación de fundadores.',
    frase: 'El error más caro fue creer que sabía lo que estaba haciendo.',
    especialidades: ['Levantamiento de capital', 'Fundación de equipos', 'Decisión bajo incertidumbre', 'Exits y M&A'],
    programas: [{ tipo: 'Mentoría', t: 'Founder Coaching', d: 'Sesiones 1:1 con emprendedores.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'patricia-luna', foto: 'https://i.pravatar.cc/600?img=47', nombre: 'Patricia Luna', nombreCorto: 'Paty', rol: 'Head of Data', empresa: 'E-commerce', area: 'IA', areas: ['IA', 'Data', 'Analytics'],
    bio: 'Modelos predictivos y analítica avanzada para decisiones de negocio.',
    bioLarga: 'Head of Data en una de las plataformas de e-commerce más grandes de LATAM. Lidera modelos predictivos que mueven decisiones reales: pricing dinámico, segmentación de clientes y forecast de demanda. Su enfoque es traducir datos en acciones concretas.',
    frase: 'Un modelo que nadie usa es un proyecto fallido, por más bonito que sea.',
    especialidades: ['Machine Learning aplicado', 'Forecasting', 'A/B testing', 'Dashboards ejecutivos'],
    programas: [{ tipo: 'Taller', t: 'Data para fundadores', d: 'Decisiones con datos sin ser data scientist.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'sebastian-torres', foto: 'https://i.pravatar.cc/600?img=15', nombre: 'Sebastián Torres', nombreCorto: 'Seba', rol: 'CEO', empresa: 'Manufactura Industrial', area: 'Estrategia', areas: ['Estrategia', 'M&A', 'Industria'],
    bio: 'Estrategia corporativa en industria pesada. Turnarounds y M&A.',
    bioLarga: 'CEO de una empresa de manufactura industrial con operaciones en México y EE.UU. Ha liderado turnarounds operativos y dos adquisiciones estratégicas. Su perspectiva combina rigor estratégico con sensibilidad cultural — algo crítico cuando se opera en sectores tradicionales.',
    frase: 'La estrategia sin gente es solo un PDF caro.',
    especialidades: ['Turnaround management', 'M&A', 'Estrategia corporativa', 'Liderazgo industrial'],
    programas: [{ tipo: 'Mentoría', t: 'CEO Coaching', d: 'Sesiones para directivos.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'valeria-nunez', foto: 'https://i.pravatar.cc/600?img=44', nombre: 'Valeria Núñez', nombreCorto: 'Vale', rol: 'Director Tecnología', empresa: 'Banca', area: 'Tecnología', areas: ['Tecnología', 'Banca', 'APIs'],
    bio: 'Transformación digital en banca tradicional. Core banking + APIs.',
    bioLarga: 'Directora de Tecnología en uno de los bancos tradicionales más grandes de México. Ha liderado iniciativas de transformación digital, modernización de core banking y open banking. Especialista en navegar la complejidad de instituciones reguladas.',
    frase: 'En banca no se trata de ir rápido. Se trata de ir bien.',
    especialidades: ['Core banking', 'Open banking / APIs', 'Compliance tech', 'Transformación digital'],
    programas: [{ tipo: 'Taller', t: 'Tech para sectores regulados', d: 'Cómo modernizar sin romper.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'bruno-estrada', foto: 'https://i.pravatar.cc/600?img=51', nombre: 'Bruno Estrada', nombreCorto: 'Bruno', rol: 'CMO', empresa: 'SaaS B2B', area: 'Marketing', areas: ['Marketing', 'B2B', 'ABM'],
    bio: 'Demand gen y ventas consultivas para tickets altos. ABM con resultados.',
    bioLarga: 'CMO de una empresa SaaS B2B con tickets de seis cifras. Especialista en account-based marketing y ventas consultivas. Ha construido máquinas de demanda para empresas que venden a otras empresas — donde el ciclo es largo y la confianza lo es todo.',
    frase: 'En B2B el comprador no busca ofertas. Busca certezas.',
    especialidades: ['Account-Based Marketing', 'Demand generation', 'Sales enablement', 'Pipeline management'],
    programas: [{ tipo: 'Mentoría', t: 'Marketing B2B Sprint', d: 'Construye tu motor de demanda.' }],
    linkedin: '#', instagram: '#', web: '#' },
  { slug: 'lorena-pacheco', foto: 'https://i.pravatar.cc/600?img=49', nombre: 'Lorena Pacheco', nombreCorto: 'Lore', rol: 'VP Operaciones', empresa: 'Retail', area: 'Operaciones', areas: ['Operaciones', 'Retail', 'Supply Chain'],
    bio: 'Cadena de suministro y operaciones multi-sucursal. 200+ puntos de venta.',
    bioLarga: 'VP de Operaciones de una cadena de retail con más de 200 puntos de venta en México. Lidera cadena de suministro, operaciones de tienda y experiencia del cliente. Sabe lo que es hacer que cosas que pesan se muevan a tiempo, todos los días.',
    frase: 'En retail, la disciplina diaria vale más que la estrategia anual.',
    especialidades: ['Supply chain', 'Operaciones de tienda', 'Inventarios', 'Experiencia del cliente'],
    programas: [{ tipo: 'Taller', t: 'Operaciones multi-sucursal', d: 'Para empresas con múltiples puntos de venta.' }],
    linkedin: '#', instagram: '#', web: '#' },
];

const ALIADOS = [
  { slug: 'idea-gto', logo: 'https://placehold.co/600x300/102940/ffffff?text=IDEA+GTO', nombre: 'IDEA GTO', tipo: 'Institución', sector: 'Innovación y Emprendimiento · Gobierno de Guanajuato',
    descripcion: 'IDEA GTO es la red estatal de incubadoras de Guanajuato, articulada por el gobierno del estado. Fortalece el ecosistema emprendedor con programas, capital y acompañamiento técnico para emprendedores en todas las etapas.',
    sinergia: 'Beaken Lab forma parte de la Red de Incubadoras GTO. Trabajamos en conjunto para acercar metodologías modernas y herramientas de IA a emprendedores que tradicionalmente no tendrían acceso. La alianza nos permite operar con respaldo institucional y multiplicar el alcance de cada programa.',
    areas: ['Formación', 'Eventos', 'Proyectos', 'Red de contactos'],
    web: 'https://idea.guanajuato.gob.mx' },
  { slug: 'tec-leon', logo: 'https://placehold.co/600x300/102940/ffffff?text=Tec+de+Monterrey+Le%C3%B3n', nombre: 'Tec de Monterrey · Campus León', tipo: 'Institución', sector: 'Educación superior · Universidad privada',
    descripcion: 'El Tec de Monterrey, Campus León, es uno de los centros académicos más importantes del Bajío. Su Centro de Emprendimiento (CEM) es referente en formación empresarial y desarrollo de talento.',
    sinergia: 'Colaboramos con el CEM en talleres y mentorías para estudiantes y egresados emprendedores. Beaken aporta práctica real de campo; el Tec aporta rigor académico y red de talento joven.',
    areas: ['Formación', 'Mentoría', 'Eventos académicos'],
    web: '#' },
  { slug: 'micro-macro', logo: 'https://placehold.co/600x300/FF0054/ffffff?text=Micro+Macro', nombre: 'Micro Macro', tipo: 'Empresa Impulsora', sector: 'Consultoría financiera · PyMEs',
    descripcion: 'Micro Macro es una consultora financiera con foco en PyMEs del Bajío. Apoya a empresas en estructura de capital, control financiero y gobierno corporativo.',
    sinergia: 'Como Empresa Impulsora, Micro Macro hace posible que más emprendedores accedan a formación financiera práctica. Co-creamos talleres de finanzas para PyMEs y derivamos clientes mutuamente cuando el caso lo amerita.',
    areas: ['Co-creación de programas', 'Talleres financieros', 'Derivación de clientes'],
    web: '#' },
  { slug: 'origo', logo: 'https://placehold.co/600x300/184658/ffffff?text=Origo', nombre: 'Origo', tipo: 'Socio Estratégico', sector: 'Consultoría estratégica',
    descripcion: 'Origo es una firma de consultoría estratégica con foco en estrategia corporativa, competitiva y go-to-market para empresas medianas y grandes en LATAM.',
    sinergia: 'Beaken y Origo formamos un Joint Venture: Origo Beaken. Origo aporta estrategia de alto rigor; Beaken aporta capacidad de implementación con IA. Juntos ofrecemos a empresas el ciclo completo: de la decisión a los sistemas que la ejecutan.',
    areas: ['Joint venture', 'Proyectos integrados', 'Estrategia + IA'],
    web: '#/origo' },
  { slug: 'n8n-factory', logo: 'https://placehold.co/600x300/0066FF/ffffff?text=N8N+Factory', nombre: 'N8N Factory', tipo: 'Socio Estratégico', sector: 'Automatización · IA aplicada',
    descripcion: 'Estudio especializado en automatización con n8n e integración de sistemas para PyMEs y empresas medianas. Construyen los flujos que conectan herramientas y procesos.',
    sinergia: 'Trabajamos juntos para implementar las soluciones de IA y automatización que Beaken diseña. Cuando un cliente necesita ejecutar — no solo planear — N8N Factory entra al ruedo.',
    areas: ['Implementación técnica', 'Automatización', 'Integraciones'],
    web: '#' },
];

// =====================================================================
// MENTORES — Comunidad de especialistas
// =====================================================================
const Mentores = () => {
  const areas = ['Todos', 'Estrategia', 'IA', 'Tecnología', 'Finanzas', 'Marketing', 'Operaciones', 'Liderazgo'];
  const letras = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','R','S','T','V'];
  const mentoresData = MENTORES;

  const [busqueda, setBusqueda] = useState('');
  const [areaActiva, setAreaActiva] = useState('Todos');
  const [letraActiva, setLetraActiva] = useState(null);

  const mentoresFiltrados = mentoresData.filter(m => {
    const matchBusq = busqueda === '' ||
      m.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
      m.rol.toLowerCase().includes(busqueda.toLowerCase()) ||
      m.area.toLowerCase().includes(busqueda.toLowerCase());
    const matchArea = areaActiva === 'Todos' || m.area === areaActiva;
    const matchLetra = !letraActiva || m.nombre.toUpperCase().startsWith(letraActiva);
    return matchBusq && matchArea && matchLetra;
  });

  return (
    <div className="page-in">
      <SubHero
        num="06" eyebrow="Mentores"
        title="Los mentores<br/>que hacen real<br/>el <span class='accent'>aprendizaje.</span>"
        sub="Cada taller y programa de Beaken está respaldado por profesionales con trayectoria real — directivos, fundadores y especialistas que han tomado las decisiones difíciles y vienen a compartirlo contigo."
        img="https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=2074&auto=format&fit=crop"
        imgCap={'"Los mejores aprendizajes vienen de quien ya hizo el camino."'}
        code="BK-601"
        ctaPrimary="Postúlate como mentor"
        ctaSecondary="Ver mentores"
        secondaryHref="#mentor-grid"
      />

      {/* BUSCADOR + FILTROS */}
      <section className="sec" id="mentor-grid">
        <div className="container">
          <SectionAnchor num="01" label="COMUNIDAD DE ESPECIALISTAS" title="Conoce a nuestros mentores" />

          {/* Buscador */}
          <Reveal>
            <div className="mentor-search">
              <svg className="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="11" cy="11" r="7"/>
                <path d="M21 21l-4.5-4.5"/>
              </svg>
              <input
                type="text"
                placeholder="Busca por nombre, empresa o especialidad..."
                value={busqueda}
                onChange={(e) => setBusqueda(e.target.value)}
              />
              {busqueda && (
                <button className="clear-search" onClick={() => setBusqueda('')}>×</button>
              )}
            </div>
          </Reveal>

          {/* Filtros por área */}
          <Reveal delay={1}>
            <div className="mentor-filters">
              {areas.map(a => (
                <button
                  key={a}
                  className={`filter-chip${areaActiva === a ? ' active' : ''}`}
                  onClick={() => setAreaActiva(a)}
                >
                  {a}
                </button>
              ))}
            </div>
          </Reveal>

          {/* Selector alfabético */}
          <Reveal delay={2}>
            <div className="mentor-alphabet">
              <button
                className={`alphabet-btn${!letraActiva ? ' active' : ''}`}
                onClick={() => setLetraActiva(null)}
              >
                Todos
              </button>
              {letras.map(l => (
                <button
                  key={l}
                  className={`alphabet-btn${letraActiva === l ? ' active' : ''}`}
                  onClick={() => setLetraActiva(letraActiva === l ? null : l)}
                >
                  {l}
                </button>
              ))}
            </div>
          </Reveal>

          {/* Contador de resultados */}
          <Reveal delay={3} style={{ marginTop: 16 }}>
            <div className="mentor-count">
              {mentoresFiltrados.length} {mentoresFiltrados.length === 1 ? 'mentor encontrado' : 'mentores encontrados'}
            </div>
          </Reveal>

          {/* Grid de mentores */}
          <div className="mentor-grid">
            {mentoresFiltrados.length === 0 ? (
              <div className="mentor-empty">
                <p style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--marino)', marginBottom: 8 }}>Sin resultados</p>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--caption)' }}>Intenta con otro término o quita los filtros activos.</p>
              </div>
            ) : (
              mentoresFiltrados.map((m, i) => (
                <Reveal delay={Math.min((i % 3) + 1, 5)} key={m.slug} className="mentor-card">
                  <a href={`#/mentores/${m.slug}`} onClick={(e)=>{e.preventDefault();navigate(`/mentores/${m.slug}`);}} className="mentor-photo">
                    <img src={m.foto} alt={m.nombre} referrerPolicy="no-referrer" />
                  </a>
                  <div className="mentor-body">
                    <div className="mentor-area">{m.area}</div>
                    <h4 className="mentor-name">
                      <a href={`#/mentores/${m.slug}`} onClick={(e)=>{e.preventDefault();navigate(`/mentores/${m.slug}`);}}>{m.nombre}</a>
                    </h4>
                    <div className="mentor-rol">{m.rol} · {m.empresa}</div>
                    <p className="mentor-bio">{m.bio}</p>
                    <a href={`#/mentores/${m.slug}`} onClick={(e)=>{e.preventDefault();navigate(`/mentores/${m.slug}`);}} className="mentor-detail-link">Ver perfil completo →</a>
                    <div className="mentor-links">
                      {m.linkedin && (
                        <a href={m.linkedin} target="_blank" rel="noreferrer" aria-label="LinkedIn">
                          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.339 18.337v-8.13H5.667v8.13h2.672zM7.003 9.075c.85 0 1.547-.7 1.547-1.55a1.55 1.55 0 0 0-3.097 0c0 .85.696 1.55 1.55 1.55zm11.336 9.262v-4.453c0-2.317-.501-4.1-3.21-4.1-1.301 0-2.176.714-2.532 1.391h-.036v-1.176H9.998v8.13h2.668v-4.022c0-1.061.201-2.087 1.514-2.087 1.295 0 1.314 1.211 1.314 2.155v3.954h2.671z"/></svg>
                        </a>
                      )}
                      {m.instagram && (
                        <a href={m.instagram} target="_blank" rel="noreferrer" aria-label="Instagram">
                          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98C.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
                        </a>
                      )}
                      {m.web && (
                        <a href={m.web} target="_blank" rel="noreferrer" aria-label="Web">
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                        </a>
                      )}
                    </div>
                  </div>
                </Reveal>
              ))
            )}
          </div>
        </div>
      </section>

      {/* CTA POSTULAR */}
      <section className="big-cta">
        <Reveal>
          <div className="container">
            <div style={{ marginBottom: 24 }}>
              <span className="tag" style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>
                <span className="dot" style={{ background: '#fff' }}></span> CONVOCATORIA ABIERTA
              </span>
            </div>
            <h2>¿Quieres ser mentor<br/>en Beaken?</h2>
            <p>Buscamos profesionales con experiencia real que quieran compartirla con emprendedores en transformación.</p>
            <a href="#/contacto" onClick={(e)=>{e.preventDefault();navigate('/contacto');}} className="btn btn-primary">
              Postúlate <Arr />
            </a>
          </div>
        </Reveal>
      </section>
    </div>
  );
};

// =====================================================================
// MENTOR DETAIL — Página individual de mentor
// =====================================================================
const MentorDetail = ({ slug }) => {
  const m = MENTORES.find(x => x.slug === slug);

  if (!m) {
    return (
      <div className="page-in">
        <section className="hero" style={{ paddingTop: 80 }}>
          <div className="container" style={{ position: 'relative' }}>
            <a href="#/mentores" onClick={(e)=>{e.preventDefault();navigate('/mentores');}} className="back-link">← Todos los mentores</a>
            <h1 className="hero-head" style={{ marginTop: 40 }}>Mentor no encontrado</h1>
            <p className="hero-sub">Revisa el enlace o vuelve al directorio.</p>
            <a href="#/mentores" onClick={(e)=>{e.preventDefault();navigate('/mentores');}} className="btn btn-primary" style={{ marginTop: 24 }}>
              Ver mentores <Arr />
            </a>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="page-in">
      {/* Hero del mentor */}
      <section className="hero detail-hero">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <a href="#/mentores" onClick={(e)=>{e.preventDefault();navigate('/mentores');}} className="back-link">← Todos los mentores</a>

          <div className="detail-hero-grid">
            <div className="detail-photo">
              <img src={m.foto} alt={m.nombre} referrerPolicy="no-referrer" />
            </div>
            <div>
              <Reveal>
                <span className="tag electrico" style={{ marginBottom: 24, display: 'inline-flex' }}>
                  <span className="dot"></span> MENTOR BEAKEN
                </span>
              </Reveal>
              <Reveal delay={1}>
                <h1 className="detail-name">{m.nombre}</h1>
                <div className="detail-rol">{m.rol}</div>
                <div className="detail-empresa">{m.empresa}</div>
              </Reveal>
              <Reveal delay={2}>
                <div className="detail-tags">
                  {m.areas.map(a => (
                    <span key={a} className="detail-tag">{a}</span>
                  ))}
                </div>
              </Reveal>
              <Reveal delay={3}>
                <div className="detail-social">
                  <span className="detail-social-label">Conecta</span>
                  {m.linkedin && (
                    <a href={m.linkedin} target="_blank" rel="noreferrer">
                      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.339 18.337v-8.13H5.667v8.13h2.672zM7.003 9.075c.85 0 1.547-.7 1.547-1.55a1.55 1.55 0 0 0-3.097 0c0 .85.696 1.55 1.55 1.55zm11.336 9.262v-4.453c0-2.317-.501-4.1-3.21-4.1-1.301 0-2.176.714-2.532 1.391h-.036v-1.176H9.998v8.13h2.668v-4.022c0-1.061.201-2.087 1.514-2.087 1.295 0 1.314 1.211 1.314 2.155v3.954h2.671z"/></svg>
                      LinkedIn
                    </a>
                  )}
                  {m.instagram && (
                    <a href={m.instagram} target="_blank" rel="noreferrer">
                      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98C.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
                      Instagram
                    </a>
                  )}
                  {m.web && (
                    <a href={m.web} target="_blank" rel="noreferrer">
                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                      Sitio web
                    </a>
                  )}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Trayectoria */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="01" label={`SOBRE ${m.nombreCorto.toUpperCase()}`} title="Trayectoria" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.65, color: 'var(--body)', maxWidth: 760, marginBottom: 40 }}>
              {m.bioLarga}
            </p>
          </Reveal>
          {m.frase && (
            <Reveal delay={1}>
              <div style={{ background: 'var(--crema)', borderLeft: '4px solid var(--rosa)', padding: '36px 40px', maxWidth: 760 }}>
                <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, fontStyle: 'italic', color: 'var(--marino)', lineHeight: 1.4, letterSpacing: '-0.01em' }}>
                  "{m.frase}"
                </p>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', color: 'var(--caption)', marginTop: 16, fontWeight: 600 }}>
                  — {m.nombre}
                </p>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* Especialidades */}
      {m.especialidades && m.especialidades.length > 0 && (
        <section className="sec alt">
          <div className="container">
            <SectionAnchor num="02" label="ESPECIALIDADES" title="Áreas de expertise" />
            <div className="especialidades-grid">
              {m.especialidades.map((e, i) => (
                <Reveal delay={Math.min((i % 4) + 1, 5)} key={e}>
                  <div className="especialidad-item">{e}</div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Programas en Beaken */}
      {m.programas && m.programas.length > 0 && (
        <section className="sec">
          <div className="container">
            <SectionAnchor num="03" label="EN BEAKEN" title="Programas en los que participa" />
            <div className="programas-grid">
              {m.programas.map((p, i) => (
                <Reveal delay={Math.min(i + 1, 5)} key={p.t} className="programa-item">
                  <div className="programa-tipo">{p.tipo}</div>
                  <h4 className="programa-name">{p.t}</h4>
                  <p className="programa-desc">{p.d}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Footer del mentor */}
      <section className="big-cta">
        <Reveal>
          <div className="container">
            <div style={{ marginBottom: 24 }}>
              <span className="tag" style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>
                <span className="dot" style={{ background: '#fff' }}></span> COMUNIDAD BEAKEN
              </span>
            </div>
            <h2>¿Quieres aprender<br/>junto a {m.nombreCorto}?</h2>
            <p>{m.nombreCorto} es parte del ecosistema de mentores Beaken. Únete a nuestros programas y aprende de quienes ya lo han hecho.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a href="#/academy" onClick={(e)=>{e.preventDefault();navigate('/academy');}} className="btn btn-primary">
                Ver programas <Arr />
              </a>
              <a href="#/" onClick={(e)=>{e.preventDefault();navigate('/');}} className="btn btn-ghost-dark">
                Conocer Beaken
              </a>
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
};

// =====================================================================
// ALIADO DETAIL — Página individual de aliado
// =====================================================================
const AliadoDetail = ({ slug }) => {
  const a = ALIADOS.find(x => x.slug === slug);

  if (!a) {
    return (
      <div className="page-in">
        <section className="hero" style={{ paddingTop: 80 }}>
          <div className="container" style={{ position: 'relative' }}>
            <a href="#/aliados" onClick={(e)=>{e.preventDefault();navigate('/aliados');}} className="back-link">← Todos los aliados</a>
            <h1 className="hero-head" style={{ marginTop: 40 }}>Aliado no encontrado</h1>
            <p className="hero-sub">Revisa el enlace o vuelve al directorio.</p>
            <a href="#/aliados" onClick={(e)=>{e.preventDefault();navigate('/aliados');}} className="btn btn-primary" style={{ marginTop: 24 }}>
              Ver aliados <Arr />
            </a>
          </div>
        </section>
      </div>
    );
  }

  const tipoColor = a.tipo === 'Institución' ? 'var(--electrico)' : a.tipo === 'Empresa Impulsora' ? 'var(--rosa)' : 'var(--naranja)';

  return (
    <div className="page-in">
      {/* Hero del aliado */}
      <section className="hero detail-hero">
        <div className="grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <a href="#/aliados" onClick={(e)=>{e.preventDefault();navigate('/aliados');}} className="back-link">← Todos los aliados</a>

          <div style={{ marginTop: 32 }}>
            <Reveal>
              <span className="tag" style={{ marginBottom: 24, display: 'inline-flex', borderColor: tipoColor, color: tipoColor }}>
                <span className="dot" style={{ background: tipoColor }}></span> {a.tipo}
              </span>
            </Reveal>
            <Reveal delay={1}>
              <div className="aliado-logo-block">
                <img src={a.logo} alt={a.nombre} referrerPolicy="no-referrer" />
              </div>
            </Reveal>
            <Reveal delay={2}>
              <h1 className="detail-name" style={{ marginTop: 32 }}>{a.nombre}</h1>
              <div className="detail-rol">{a.sector}</div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Quiénes son */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="01" label="QUIÉNES SON" title={`Sobre ${a.nombre}`} />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.65, color: 'var(--body)', maxWidth: 760 }}>
              {a.descripcion}
            </p>
          </Reveal>
        </div>
      </section>

      {/* Sinergia */}
      <section className="sec alt">
        <div className="container">
          <SectionAnchor num="02" label="LA SINERGIA" title="Por qué trabajamos juntos" />
          <Reveal>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.65, color: 'var(--body)', maxWidth: 760 }}>
              {a.sinergia}
            </p>
          </Reveal>
        </div>
      </section>

      {/* Áreas de colaboración */}
      <section className="sec">
        <div className="container">
          <SectionAnchor num="03" label="ÁREAS DE COLABORACIÓN" title="En qué trabajamos" />
          <div className="especialidades-grid">
            {a.areas.map((area, i) => (
              <Reveal delay={Math.min((i % 4) + 1, 5)} key={area}>
                <div className="especialidad-item">{area}</div>
              </Reveal>
            ))}
          </div>
          {a.web && a.web !== '#' && (
            <Reveal delay={5} style={{ marginTop: 40 }}>
              <a href={a.web} target={a.web.startsWith('#') ? '_self' : '_blank'} rel="noreferrer" className="btn btn-secondary">
                Visita a {a.nombre} <Arr />
              </a>
            </Reveal>
          )}
        </div>
      </section>

      {/* Footer */}
      <section className="big-cta">
        <Reveal>
          <div className="container">
            <div style={{ marginBottom: 24 }}>
              <span className="tag" style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>
                <span className="dot" style={{ background: '#fff' }}></span> ECOSISTEMA BEAKEN
              </span>
            </div>
            <h2>Esta alianza es parte<br/>del ecosistema Beaken.</h2>
            <p>Conoce todos nuestros aliados y cómo construimos juntos el futuro del ecosistema empresarial en LATAM.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a href="#/aliados" onClick={(e)=>{e.preventDefault();navigate('/aliados');}} className="btn btn-primary">
                Ver aliados <Arr />
              </a>
              <a href="#/" onClick={(e)=>{e.preventDefault();navigate('/');}} className="btn btn-ghost-dark">
                Conocer Beaken
              </a>
            </div>
          </div>
        </Reveal>
      </section>
    </div>
  );
};

window.Lab = Lab;
window.Academy = Academy;
window.Contacto = Contacto;
window.Aliados = Aliados;
window.OrigoBeaken = OrigoBeaken;
window.Mentores = Mentores;
window.MentorDetail = MentorDetail;
window.AliadoDetail = AliadoDetail;