// Página /funcionalidades/equipo — datos específicos + ensamblaje
// Reutiliza Nav, Footer, WhatsAppButton et les composants de page-funcionalidad-template.jsx

const getEquipoBenefits = (vocab) => [
  {
    title: 'Cuentas individuales para cada miembro',
    desc: `Cada ${vocab.agent} tiene su propia cuenta en CloserBroker con su agenda, sus leads, sus propiedades y sus métricas. Cada uno enfocado en lo suyo, sin ruido del resto del equipo.`,
  },
  {
    title: '3 roles con permisos diferenciados',
    desc: `Asigna roles según las responsabilidades: Administrador (acceso total), ${vocab.agentCap} (su propia actividad y leads), Usuario (acceso personalizado). Control claro sobre quién ve qué.`,
  },
  {
    title: 'Atribución automática de leads',
    desc: `Configura la distribución de leads entrantes con porcentajes ponderados por ${vocab.agent}. Un nuevo prospecto sin asignar se reparte automáticamente según las reglas que defines.`,
  },
  {
    title: `Métricas individuales por ${vocab.agent}`,
    desc: 'Visualiza el desempeño de cada miembro del equipo: ventas cerradas, propiedades activas, leads gestionados. Saber quién está en racha, y a quién hay que acompañar.',
  },
  {
    title: 'Invitación por email en un click',
    desc: 'Invita nuevos miembros al equipo por email. Ellos crean su cuenta, configuran su perfil y entran al sistema en minutos. Sin trámites técnicos, sin configuraciones manuales.',
  },
];

const EquipoPage = () => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const vocab = (ctx && ctx.vocab) || (window.CO_LOCALE && window.CO_LOCALE.vocab) || { agent: 'agente', agentCap: 'Agente' };
  const country = (ctx && ctx.country) || 'co';
  const preciosHref = `/${country}/precios/`;
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <main>
        <FuncionalidadHero
          eyebrow="Funcionalidad"
          title="Equipo"
          titleAccent="y colaboración"
          subtitle="Gestiona tu equipo con cuentas individuales, roles personalizados y distribución automática de leads — todo bajo tu control."
        />
        <VideoDemo
          videoSrc="https://video.closerbroker.com/equipo.mp4"
          posterSrc="https://video.closerbroker.com/equipo.jpg"
        />
        <FuncionalidadBenefits
          eyebrow="Lo que incluye"
          title="Todo lo que necesitas para"
          titleAccent="gestionar tu equipo."
          subtitle="Desde la invitación de nuevos miembros hasta la distribución automática de leads, cada función está pensada para que tu agencia funcione como un reloj."
          items={getEquipoBenefits(vocab)}
        />
        <FuncionalidadCTA
          eyebrow="¿Listo para empezar?"
          title="Lidera tu equipo con datos"
          titleAccent="y sin perder a nadie por el camino."
          subtitle="Un solo precio, todo incluido. Sin sorpresas en la factura."
          cta={{ label: 'Empezar mis 21 días gratis', href: preciosHref }}
        />
      </main>
      <Footer />
      <WhatsAppButton />
    </>
  );
};

window.EquipoPage = EquipoPage;