// Página /funcionalidades/ogarom — datos específicos + ensamblaje
// Reutiliza Nav, Footer, WhatsAppButton, FuncionalidadHero/Benefits/CTA
// y el nuevo componente ImageDemo (en lugar de VideoDemo).

const getOgaromBenefits = (vocab) => [
  {
    title: 'Un portal moderno pensado para LATAM',
    desc: 'Ogarom es el portal inmobiliario que LATAM merece — interfaz moderna, optimizada para móvil y diseñada para que los compradores encuentren la propiedad ideal sin frustraciones.',
  },
  {
    title: 'Búsqueda inteligente con IA',
    desc: 'Los compradores describen lo que buscan en lenguaje natural ("una casa en Mérida con piscina, cerca de escuelas, hasta 5 millones") y la IA encuentra las propiedades que mejor coinciden con sus criterios.',
  },
  {
    title: 'Información del entorno integrada',
    desc: 'Cada propiedad muestra qué hay alrededor: escuelas, comercios, gimnasios, transporte. Los compradores toman decisiones informadas sin necesidad de salir de la página.',
  },
  {
    title: 'Leads cualificados directos a tu CRM',
    desc: `Cada prospecto que se interesa por tu propiedad en Ogarom entra automáticamente en tu CRM CloserBroker, asignado al ${vocab.agent} correcto. Sin perder tiempo, sin perder leads.`,
  },
  {
    title: '10 propiedades incluidas en tu plan (30 con Plan Pionero)',
    desc: 'Tu suscripción a CloserBroker incluye 10 propiedades activas en Ogarom, o 30 si eres Plan Pionero. Si necesitas publicar más, hay opciones disponibles cuando tu agencia crezca.',
  },
];

const OgaromPage = () => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const vocab = (ctx && ctx.vocab) || (window.CO_LOCALE && window.CO_LOCALE.vocab) || { agent: '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="Portal"
          titleAccent="Ogarom"
          subtitle="El portal inmobiliario moderno de LATAM, conectado directamente a tu CRM. Más visibilidad para tus propiedades, leads cualificados que llegan solos."
        />
        <ImageDemo
          imageSrc={undefined}
          alt="Portal Ogarom"
          placeholderLabel="Vista previa próximamente"
        />
        <FuncionalidadBenefits
          eyebrow="Lo que incluye"
          title="El portal"
          titleAccent="que LATAM merece."
          subtitle="Diseñado para que los compradores encuentren la propiedad ideal y para que tus listings reciban leads cualificados sin esfuerzo extra."
          items={getOgaromBenefits(vocab)}
        />
        <FuncionalidadCTA
          eyebrow="¿Listo para empezar?"
          title="Llega a más compradores"
          titleAccent="con el portal hecho para LATAM."
          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.OgaromPage = OgaromPage;