// Section 3 (Pain) + Section 4 (3 Pillars) // Helper : récupère le vocab (agent/agentPlural) selon le pays via window.useCountry, // avec fallback CO si Provider absent. const cbVocab = () => { if (typeof useCountry === 'function') { const c = useCountry(); if (c && c.vocab) return c.vocab; } return (window.CO_LOCALE && window.CO_LOCALE.vocab) || { agent: 'agente', agentPlural: 'agentes' }; }; const getPainItems = (vocab) => [ { n: '01', t: 'Tu sitio web no atrae ni convierte.', d: 'Pocas personas visitan tu sitio, y las que llegan no dejan sus datos. Tal vez ya hayas invertido en publicidad para atraer tráfico, pero los resultados no justifican el gasto.', tag: 'Web', icon: 'globe', }, { n: '02', t: 'Tardas horas en contactar a un nuevo lead.', d: `Entre que llega el formulario, alguien lo ve, lo asigna a un ${vocab.agent} y el ${vocab.agent} lo contacta… pasan 30 minutos, 3 horas, a veces un día entero. El lead ya se enfrió, o ya está hablando con otra agencia.`, tag: 'Velocidad', icon: 'clock', }, { n: '03', t: 'Los leads llegan mal calificados.', d: 'Pierdes horas con curiosos que nunca van a comprar. Y cuando contactas a uno bueno, ya no contesta.', tag: 'Calidad', icon: 'target', }, { n: '04', t: 'WhatsApp es tu CRM real.', d: 'Toda la info de tus prospectos está en conversaciones imposibles de buscar. Cuando necesitas el historial de un cliente, tienes que scrollear durante 10 minutos en un chat infinito.', tag: 'Datos', icon: 'chat', }, { n: '05', t: 'Repartes los leads "a ojo".', d: `Sin reglas claras. Algunos ${vocab.agentPlural} se saturan, otros se quedan sin nada. Y se pierden oportunidades en el camino.`, tag: 'Equipo', icon: 'users', }, { n: '06', t: 'No sabes qué hace tu equipo.', d: '¿Quién llamó a quién? ¿Quién hizo seguimiento? ¿Quién está cerrando? Sin visibilidad real, no puedes liderar.', tag: 'Visibilidad', icon: 'chart', }, ]; // ────────────────────────────────────────────────────────────── // Variante A — Grilla 2×3 compacta // ────────────────────────────────────────────────────────────── const PainEditorial = () => { const vocab = cbVocab(); const PAIN_ITEMS = getPainItems(vocab); return (
{/* Headline */}

¿Te suena{' '} familiar?

{/* Grilla 2×3 */}
{PAIN_ITEMS.map((p, i) => (
{p.n}
{p.t}
{p.d}
))}
{/* Closing — la velocidad mata o vende */}
{/* Accent bar */}
¿Crees que los leads de Meta o Google Ads son "leads basura"?{' '} Lo escuchamos todos los días. Pero un lead contactado en los primeros{' '} 5 minutos{' '} tiene hasta{' '} 100x más probabilidades{' '} de convertir que uno contactado a los 30. Si tardas horas, hasta el mejor lead se enfría.{' '} La velocidad mata o vende — no la fuente.
); }; // ────────────────────────────────────────────────────────────── // Variante B — Conversación (zigzag, citas) // ────────────────────────────────────────────────────────────── const getPainVoices = (vocab) => ({ '01': '"Pago anuncios y me llegan dos formularios al mes."', '02': '"Para cuando le llamo, ya está con otra agencia."', '03': '"Los buenos leads ya no contestan."', '04': '"Tengo que scrollear 10 minutos para encontrar algo."', '05': `"Le caen todos los leads al mismo ${vocab.agent}."`, '06': '"No sé quién está cerrando ni quién no llama."', }); const PainConversation = () => { const vocab = cbVocab(); const PAIN_ITEMS = getPainItems(vocab); const PAIN_VOICES = getPainVoices(vocab); return (

¿Te suena familiar?

{PAIN_ITEMS.map((p, i) => { const flip = i % 2 === 1; return (
{p.n}
{p.tag}
{p.t}
{p.d}
{PAIN_VOICES[p.n]}
— Agente · Real
); })}
¿Crees que los leads de Meta o Google Ads son "leads basura"?{' '} Lo escuchamos todos los días. Pero un lead contactado en los primeros{' '} 5 minutos{' '} tiene hasta{' '} 100x más probabilidades{' '} de convertir que uno contactado a los 30.{' '} La velocidad mata o vende — no la fuente.
); }; // ────────────────────────────────────────────────────────────── // Variante C — Timeline scroll-driven (alternada izq/der) // ────────────────────────────────────────────────────────────── const PainTimeline = () => { const vocab = cbVocab(); const PAIN_ITEMS = getPainItems(vocab); const sectionRef = React.useRef(null); const trackRef = React.useRef(null); const [progress, setProgress] = React.useState(0); const [reduced, setReduced] = React.useState(false); // Respect prefers-reduced-motion React.useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); const update = () => setReduced(mq.matches); update(); mq.addEventListener?.('change', update); return () => mq.removeEventListener?.('change', update); }, []); // Track scroll progress along the timeline track (0→1) React.useEffect(() => { if (reduced) { setProgress(1); return; } let raf = 0; const compute = () => { raf = 0; const el = trackRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight; // Start filling when track top hits 65% of viewport // Finish when track bottom hits 40% of viewport const start = vh * 0.65; const end = vh * 0.4; const total = (rect.height) + (start - end); const passed = start - rect.top; const p = Math.max(0, Math.min(1, passed / total)); setProgress(p); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); }; compute(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, [reduced]); return (
{/* Headline */}

¿Te suena{' '} familiar?

{/* Timeline track */}
{/* Vertical line — background (gray) */}
); }; const PainTimelineRow = ({ item, right, index, reduced }) => { const ref = React.useRef(null); const [inView, setInView] = React.useState(false); React.useEffect(() => { if (reduced) { setInView(true); return; } const el = ref.current; if (!el) return; const obs = new IntersectionObserver( (entries) => entries.forEach(e => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } }), { threshold: 0.25, rootMargin: '0px 0px -10% 0px' } ); obs.observe(el); return () => obs.disconnect(); }, [reduced]); return (
{item.n}
{item.tag}
{item.t}
{item.d}
); }; // ────────────────────────────────────────────────────────────── // Switcher // ────────────────────────────────────────────────────────────── const PainSection = ({ variant = 'editorial' }) => { if (variant === 'conversation') return ; if (variant === 'timeline') return ; return ; }; const PillarsSection = () => { const vocab = cbVocab(); const pillars = [ { n: '01', label: 'Capta', title: 'Más leads, mejor calificados, contactados al instante.', d: 'Un sitio web que sí atrae tráfico y convierte. Lead scoring automático para identificar quién está listo para comprar. Y cada nuevo lead recibe un primer mensaje automático por WhatsApp desde tu agencia, en segundos.', }, { n: '02', label: 'Gestiona', title: 'El control que WhatsApp y otros CRMs nunca te dieron.', d: `Todo el historial de cada cliente en un solo lugar, fácil de buscar. Pipelines visuales por tipo de prospecto. Reglas claras de distribución de leads entre tus ${vocab.agentPlural}. Y reportes en tiempo real de qué hace cada miembro de tu equipo.`, }, { n: '03', label: 'Cierra', title: 'Menos fricción, más comisiones.', d: 'Automatizaciones que hacen el seguimiento por ti — sin perder el toque humano. IA que redacta descripciones y artículos en segundos. Bolsa inmobiliaria con co-brokerage para multiplicar tu inventario sin captar una propiedad más.', }, ]; return (
La solución

Una sola plataforma. Todo lo que tu agencia necesita.

CloserBroker no es otro CRM con funcionalidades pegadas. Es una herramienta diseñada desde cero para el trabajo real de una agencia inmobiliaria.

{pillars.map((p, i) => (
{/* Top gradient accent line */}
{/* Big number */}
{p.n}
{/* Label */}
{p.label}
{/* Title */}
{p.title}
{/* Description */}

{p.d}

))}
); }; window.PainSection = PainSection; window.PillarsSection = PillarsSection;