// /colaboradores — full team page

function ColaboradoresPage() {
  const team = [
    { id: 'director',  icon: <Icon.director/>,  title: 'Director General',      tag:'Coordina',
      copy: 'Tu único punto de contacto. Entiende tu negocio, coordina al resto del equipo, te trae solo lo importante.',
      tasks: ['Análisis inicial de tu negocio', 'Contratación y dirección del equipo', 'Comunicación contigo', 'Resumen ejecutivo semanal'] },
    { id: 'mkt',       icon: <Icon.brush/>,     title: 'Marketing & Contenido', tag:'Crea',
      copy: 'Genera posts, imágenes, videos cortos y newsletters. Optimiza horarios de publicación según métricas reales.',
      tasks: ['Calendario editorial', 'Diseño de creatividades', 'Programación de redes', 'Campañas de email'] },
    { id: 'analitica', icon: <Icon.chart/>,     title: 'Analítica & Métricas',  tag:'Analiza',
      copy: 'Monitorea campañas, optimiza presupuestos publicitarios y detecta cuellos de botella en el embudo.',
      tasks: ['ROAS por canal', 'Optimización de bids', 'Reporting semanal', 'A/B testing automático'] },
    { id: 'soporte',   icon: <Icon.chat/>,      title: 'Atención al Cliente',   tag:'Responde',
      copy: 'Responde dudas, da seguimiento a pedidos y escala a humano solo cuando hace falta. Multilingüe.',
      tasks: ['Chat 24/7', 'Email y WhatsApp', 'Resolución de tickets', 'Encuestas post-atención'] },
    { id: 'logistica', icon: <Icon.truck/>,     title: 'Logística & Reparto',   tag:'Coordina',
      copy: 'Coordina entregas con tus paqueteros, informa a clientes y resuelve incidencias antes de que escalen.',
      tasks: ['Asignación de rutas', 'Tracking automático', 'Notificaciones al cliente', 'Gestión de devoluciones'] },
    { id: 'inventario',icon: <Icon.box/>,       title: 'Inventario & Catálogo', tag:'Cataloga',
      copy: 'Mantiene tu catálogo con descripciones SEO, fotos optimizadas y alertas de stock bajo.',
      tasks: ['Descripciones SEO automáticas', 'Optimización de imágenes', 'Alertas de stock', 'Sincronización multi-canal'] },
    { id: 'web',       icon: <Icon.web/>,       title: 'Diseño Web',            tag:'Construye',
      copy: 'Construye y mantiene tu tienda online o landing. Cambia secciones, actualiza ofertas, hace A/B testing.',
      tasks: ['Tienda online lista', 'Páginas de campaña', 'A/B testing de copys', 'Optimización Core Web Vitals'] },
    { id: 'inv',       icon: <Icon.search/>,    title: 'Investigación',         tag:'Investiga',
      copy: 'Monitorea competencia, detecta oportunidades de mercado y resume tendencias relevantes para tu sector.',
      tasks: ['Análisis de competencia', 'Detección de tendencias', 'Briefs de oportunidad', 'Benchmark de precios'] },
    { id: 'seg',       icon: <Icon.shield/>,    title: 'Seguridad',             tag:'Protege',
      copy: 'Monitorea accesos, detecta fraudes, gestiona políticas de privacidad y cumplimiento normativo.',
      tasks: ['Detección de fraude', 'Auditoría de accesos', 'GDPR / privacidad', 'Backup y recuperación'] },
  ];

  return (
    <Layout active="colaboradores">
      <PageHero
        crumb={[{ label: 'Inicio', href: 'index.html' }, { label: 'Colaboradores' }]}
        eyebrow="Tu plantilla digital"
        title="9 colaboradores especializados. 1 equipo coordinado."
        subtitle="Cada uno experto en su área. Se comunican entre ellos, comparten contexto y escalan a ti solo cuando hay una decisión que tomar."
      />

      <section className="section" data-screen-label="Team grid">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns:'repeat(auto-fit, minmax(330px, 1fr))', gap: 20 }}>
            {team.map(c => (
              <div key={c.id} className="card hoverable" style={{ padding: 26, position:'relative' }}>
                <span style={{
                  position:'absolute', top: 22, right: 22, display:'inline-flex', alignItems:'center', gap: 6,
                  fontSize: 11, color:'var(--success)', fontWeight: 600,
                }}>
                  <span className="pulse-dot"/> activo
                </span>
                <div style={{
                  width: 56, height: 56, borderRadius: 14,
                  background:'color-mix(in oklab, var(--brand-primary), white 90%)',
                  color:'var(--brand-primary)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom: 14,
                }}>
                  <span style={{ transform:'scale(1.4)' }}>{c.icon}</span>
                </div>
                <h2 style={{ fontSize: 19, letterSpacing:'-0.015em', marginBottom: 4 }}>{c.title}</h2>
                <span style={{
                  fontSize: 11, fontWeight: 600, color:'var(--brand-secondary)',
                  background:'color-mix(in oklab, var(--brand-secondary), white 92%)',
                  padding:'3px 8px', borderRadius: 999,
                }}>{c.tag}</span>
                <p className="text-muted" style={{ marginTop: 12, fontSize: 14.5 }}>{c.copy}</p>
                <ul style={{ listStyle:'none', padding: 0, margin: '14px 0 0', display:'flex', flexDirection:'column', gap: 6 }}>
                  {c.tasks.map(t => (
                    <li key={t} style={{ display:'flex', gap: 8, fontSize: 13, color:'var(--ink-soft)' }}>
                      <span style={{ color:'var(--brand-secondary)', flexShrink: 0, marginTop: 1 }}><Icon.check/></span>{t}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section hex-pattern subtle" data-screen-label="Custom colaborador">
        <div className="container" style={{ maxWidth: 720, textAlign:'center' }}>
          <div className="eyebrow" style={{ margin:'0 auto 14px' }}><span className="dot"/> ¿Necesitas otro?</div>
          <h2 className="h-section" style={{ fontSize: 30 }}>Tu Director puede contratar colaboradores nuevos.</h2>
          <p className="lead" style={{ margin:'14px auto 28px' }}>
            Si tu negocio necesita Finanzas, RR.HH, Calidad o cualquier otra especialidad, tu Director General puede activar un colaborador nuevo en minutos. Sin código, sin formularios largos.
          </p>
          <a href="demo.html" className="btn btn-primary btn-lg">Ver lista completa de roles →</a>
        </div>
      </section>

      <CTAFinal />
    </Layout>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ColaboradoresPage />);