/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* integraciones/bejerman.jsx — página por ERP (sprint 2026-09).

   REGLAS DE COPY (ver conversación 2026-09-18): nunca "conector nativo a
   Bejerman". Bejerman corre sobre SQL Server, que sí está en la lista de
   fuentes soportadas de /docs, así que el conector nativo se predica del
   motor y no de la marca.

   Acceso: base de datos + usuario de solo lectura + VPN o whitelist de
   IP.

   Ángulo propio (para no duplicar tango.jsx, que también es SQL Server):
   acá el eje es el salto del dato contable al análisis de gestión, no la
   consolidación multi-empresa.

   DELIBERADAMENTE NO se nombran líneas ni versiones de producto de
   Bejerman: no pude verificarlas y preferí no afirmar algo que se caiga
   en una demo. El FAQ de versiones está redactado de forma que sigue
   siendo cierto sin nombrarlas. Si el equipo confirma la nomenclatura,
   sumarla ahí.

   No hay casos de cliente propios sobre Bejerman en el sitio: la página
   no inventa ninguno. */

const PROBLEM_CARDS = [
  {
    icon: 'ph-file-text',
    title: 'El dato contable está, el de gestión no',
    body: 'Bejerman te da el balance y el libro diario. El margen por línea de negocio o el comparativo contra presupuesto hay que armarlo aparte.',
  },
  {
    icon: 'ph-microsoft-excel-logo',
    title: 'El análisis vive en Excel',
    body: 'Cada mes alguien exporta, pega, cruza con otras planillas y revisa. El resultado no es trazable y se rehace desde cero al mes siguiente.',
  },
  {
    icon: 'ph-question',
    title: 'Nadie sabe de dónde salió el número',
    body: 'Cuando la dirección pregunta por una cifra, reconstruir cómo se calculó lleva más tiempo que haberla calculado.',
  },
];

const HOW_CHECKLIST = [
  'Conector nativo a SQL Server, el motor sobre el que corre Bejerman',
  'Usuario de solo lectura: Teramot nunca escribe en Bejerman',
  'Transporte por VPN o whitelist de IP',
  'Modelado sobre tu plan de cuentas y tus centros de costo',
  'Cada número abre su asiento de origen y su fórmula',
];

const QUE_OBTENES = [
  {
    icon: 'ph-table',
    title: 'P&L y balance siempre al día',
    body: 'Sobre el dato contable real, con ajustes de gestión que quedan registrados con responsable y motivo.',
  },
  {
    icon: 'ph-target',
    title: 'Presupuesto contra real',
    body: 'Con los desvíos calculados y cada línea trazable hasta el asiento que la originó.',
  },
  {
    icon: 'ph-chat-circle-dots',
    title: 'Preguntas en lenguaje natural',
    body: 'Desde Teramot o desde Claude, ChatGPT o Gemini vía MCP, con la trazabilidad de Teramot.',
  },
];

const FAQ_ITEMS = [
  {
    q: '¿Cómo se conecta Teramot a Bejerman?',
    a: 'Leemos <b>la base SQL Server de tu Bejerman con un usuario de solo lectura</b>, por VPN o whitelist de IP. Teramot tiene conector nativo a SQL Server, así que no hace falta desarrollo intermedio ni instalar nada del lado del ERP.',
  },
  {
    q: '¿Teramot escribe algo en Bejerman?',
    a: 'No. El acceso es con un <b>usuario de solo lectura</b>. Teramot lee, modela y consolida de su lado. Tu Bejerman queda exactamente como está.',
  },
  {
    q: '¿Depende de la versión que tengamos instalada?',
    a: 'No. Como el acceso es <b>a la base de datos y no a la interfaz</b>, la versión no cambia el camino de conexión. Lo que sí miramos en el onboarding es tu plan de cuentas y cómo tenés armados los centros de costo.',
  },
  {
    q: 'Seguimos usando Excel para varias cosas. ¿Se pierde ese trabajo?',
    a: 'No. Teramot lee también <b>tus planillas de Excel y Google Sheets</b> y las cruza con el dato de Bejerman. Tus fórmulas siguen funcionando donde están; lo que sumás es el log de cambios, las versiones y la trazabilidad.',
  },
  {
    q: '¿Necesito involucrar a Sistemas o a mi implementador?',
    a: 'Una sola vez, al principio: alguien con acceso al servidor crea el <b>usuario de solo lectura</b> y habilita la conexión por VPN o whitelist de IP. Después de eso el equipo de finanzas trabaja solo, sin pedir un desarrollo por cada reporte nuevo.',
  },
  {
    q: '¿Qué pasa con la seguridad de los datos?',
    a: 'Acceso de <b>solo lectura</b>, transporte por <b>VPN o whitelist de IP</b>, y <b>SOC 2 Type I certificado</b> (Type II en curso). Tu base nunca queda expuesta públicamente, ni en tránsito ni en reposo.',
  },
];

const { useEffect: useEffectBej, useRef: useRefBej } = React;

const useScrollReveal = (rootRef) => {
  useEffectBej(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const root = rootRef.current;
    if (!root) return;
    const groups = [];
    root.querySelectorAll('section, footer').forEach((sec) => {
      const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec;
      const kids = Array.from(wrap.children).filter((el) => (
        el.nodeType === 1 && !el.classList.contains('tm-drawer') && !el.classList.contains('tm-drawer-overlay')
      ));
      if (kids.length) groups.push(kids);
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add('rv-in'); io.unobserve(en.target); }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    groups.forEach((kids) => kids.forEach((el, i) => {
      el.classList.add('rv');
      el.style.transitionDelay = Math.min(i, 4) * 70 + 'ms';
      io.observe(el);
    }));
    return () => io.disconnect();
  }, []);
};

const BejermanHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="integraciones" />
      <div className="tm-prod-hero-grid">
        <div className="tm-prod-hero-copy">
          <p className="tm-prod-hero-eyebrow">Integración Bejerman · Sin proyecto de IT</p>
          <h1>Integración con Bejerman: del dato contable al <span>reporte de gestión</span>.</h1>
          <p className="tm-prod-hero-sub">Leemos la base SQL Server de tu Bejerman con un usuario de solo lectura, por VPN o whitelist de IP. El análisis deja de vivir en Excel y cada número queda trazable.</p>
          <div className="tm-prod-hero-actions">
            <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-white">Pedí tu demo <i className="ph ph-arrow-right" /></a>
            <a href={c.links.app} className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-ghost-light"><i className="ph ph-play-circle" style={{ fontSize: 21 }} /> Comenzá Gratis</a>
          </div>
        </div>
        <div className="tm-prod-hero-art">
          <div className="tm-prod-hero-art-glow" />
          <div className="tm-prod-hero-mockup" style={{ position: 'relative', zIndex: 1, width: '100%', background: 'rgba(255,255,255,.96)', border: '1px solid rgba(255,255,255,.55)', borderRadius: 16, padding: 18, boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }} role="img" aria-label="Conexión de Bejerman a Teramot por SQL Server en modo lectura">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 9999, background: '#253DE5', color: '#fff', fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap' }}><i className="ph-bold ph-plugs-connected" style={{ fontSize: 12 }} /> Bejerman conectado</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', fontSize: 10.5, fontWeight: 600, color: '#4B5563' }}><i className="ph-bold ph-lock-simple" style={{ fontSize: 11 }} /> Solo lectura</span>
            </div>
            <div style={{ marginTop: 16, borderRadius: 10, background: '#fff', border: '1px solid #EEF0F4', overflow: 'hidden' }}>
              {[
                { icon: 'ph-database', label: 'SQL Server · usuario read-only', status: 'Conectado' },
                { icon: 'ph-tree-structure', label: 'Plan de cuentas modelado', status: 'Listo' },
                { icon: 'ph-microsoft-excel-logo', label: 'Planillas del equipo', status: 'Cruzadas' },
                { icon: 'ph-git-commit', label: 'Trazabilidad por número', status: 'Activa', neutral: true },
              ].map((row, i, arr) => (
                <div key={row.label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '14px 16px', borderBottom: i < arr.length - 1 ? '1px solid rgba(11,15,20,.05)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}><i className={`ph ${row.icon}`} style={{ fontSize: 15, color: '#253DE5', flex: 'none' }} /><span style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-.005em', color: '#0B0F14' }}>{row.label}</span></div>
                  {row.neutral ? (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', padding: '4px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', background: '#fff', fontSize: 10.5, fontWeight: 600, color: '#4B5563' }}>{row.status}</span>
                  ) : (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.22)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-check" style={{ fontSize: 11 }} /> {row.status}</span>
                  )}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: 80, padding: '18px 100px 0 4px' }}>
              <p style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#4B5563' }}>Sin rehacer la planilla todos los meses</p>
            </div>
          </div>
          <div style={{ position: 'absolute', right: -16, bottom: -24, zIndex: 2, width: 172, background: '#fff', border: '1px solid #E5E7EB', borderRadius: 11, boxShadow: '0 2px 4px rgba(11,15,20,.06), 0 1px 2px rgba(11,15,20,.04)', padding: '12px 13px' }}>
            <p style={{ fontSize: 8.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF' }}>Motor</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9 }}>
              <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 9999, background: '#263185', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ph-bold ph-database" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>SQL Server</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, paddingTop: 9, borderTop: '1px solid #EEF0F4' }}>
              <i className="ph ph-plug" style={{ color: '#253DE5', fontSize: 12, flex: 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 500, lineHeight: 1.35, color: '#4B5563' }}>Conector nativo al motor</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ProblemaSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Del balance al reporte de gestión hay un Excel en el medio</h2>
        <p>Bejerman resuelve la contabilidad. El análisis que pide la dirección se arma afuera, a mano.</p>
      </div>
      <div className="tm-prod-cards">
        {PROBLEM_CARDS.map((card) => (
          <article className="tm-prod-card" key={card.title}>
            <div className="tm-prod-card-icon"><i className={`ph ${card.icon}`} /></div>
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const ComoFuncionaSection = () => (
  <section className="tm-prod-section tm-prod-section-wash">
    <div className="tm-container">
      <h2 style={{ maxWidth: 820, margin: '0 auto 48px', textAlign: 'center', fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536', textWrap: 'pretty' }}>Cómo conectamos tu Bejerman</h2>
      <div className="tm-prod-split">
        <div style={{ borderRadius: 12, overflow: 'hidden', background: '#fff', border: '1px solid rgba(11,15,20,.06)', boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '13px 18px', borderBottom: '1px solid #EEF0F4', background: '#FCFCFE' }}>
            <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF' }}>Bejerman → Teramot</p>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.18)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-lock-simple" style={{ fontSize: 12 }} /> Read-only</span>
          </div>
          <div style={{ display: 'grid', gap: 6, padding: '16px 18px' }}>
            <div style={{ border: '1px solid #EEF0F4', borderRadius: 10, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-database" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Tus fuentes</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['Base de Bejerman', 'Planillas del equipo'].map((t) => (
                  <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', fontSize: 11, fontWeight: 500, color: '#374151' }}><span style={{ width: 6, height: 6, borderRadius: 9999, background: '#7BC1AD' }} /> {t}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid #EEF0F4', borderRadius: 10, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <i className="ph ph-tree-structure" style={{ fontSize: 14, color: '#253DE5' }} />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Modelado de gestión</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>Con log</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {['Plan de cuentas y centros de costo', 'Ajustes de gestión con responsable'].map((t) => (
                  <div key={t} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '7px 10px', borderRadius: 7, background: '#F7F8FD' }}>
                    <span style={{ fontSize: 11, fontWeight: 500, color: '#374151' }}>{t}</span>
                    <span style={{ fontSize: 10, color: '#6B7280' }}>mapeado</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid rgba(37,61,229,.18)', borderRadius: 10, padding: '13px 14px', background: '#F7F8FD' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-target" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Reporte de gestión</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['P&L del período', false], ['Presupuesto vs real', false], ['Desvíos explicados', true]].map(([label, bold]) => (
                  <div key={label} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 14, padding: '8px 11px', background: '#fff' }}>
                    <span style={{ fontSize: 11, fontWeight: bold ? 600 : 500, color: bold ? '#0B0F14' : '#4B5563' }}>{label}</span>
                    <span style={{ fontSize: 11, fontWeight: bold ? 600 : 400, color: '#0B0F14' }}>—</span>
                    <i className="ph ph-git-commit" style={{ fontSize: 12, color: '#253DE5' }} />
                  </div>
                ))}
              </div>
              <p style={{ marginTop: 10, fontSize: 10.5, fontWeight: 500, color: '#6B7280' }}>Cada línea abre su asiento de origen</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>Bejerman guarda los datos en SQL Server, y Teramot tiene conector nativo a ese motor. Alguien con acceso al servidor crea un usuario de solo lectura y habilita la conexión por VPN o whitelist de IP. Desde ahí modelamos tu plan de cuentas y tus centros de costo, cruzamos con las planillas que el equipo ya usa, y el reporte de gestión queda armado y actualizado — con cada línea trazable hasta el asiento que la originó.</p>
          <div className="tm-prod-checklist">
            {HOW_CHECKLIST.map((t) => (
              <div className="tm-prod-checklist-item" key={t}><i className="ph-bold ph-check" />{t}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const QueObtenesSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Qué obtenés sobre tu Bejerman</h2>
        <p>La capa de gestión que el ERP no trae, sin migrar nada.</p>
      </div>
      <div className="tm-prod-cards">
        {QUE_OBTENES.map((card) => (
          <article className="tm-prod-card" key={card.title}>
            <div className="tm-prod-card-icon"><i className={`ph ${card.icon}`} /></div>
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const OtrasIntegracionesSection = () => (
  <section className="tm-prod-section tm-prod-section-paper" style={{ textAlign: 'center' }}>
    <div className="tm-container">
      <h2 style={{ fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Bejerman no es lo único que conectás</h2>
      <p style={{ marginTop: 14, fontSize: 15.5, color: '#4B5563' }}>Teramot cruza tu Bejerman con las planillas, el BI y el resto de tus fuentes.</p>
      <div className="tm-prod-logos">
        {[
          { src: '../brand/integrations/excel.png', alt: 'Excel', h: 28 },
          { src: '../brand/integrations/google-sheets.png', alt: 'Google Sheets', h: 28 },
          { src: '../brand/integrations/power-bi.png', alt: 'Power BI', h: 28 },
          { src: '../brand/integrations/snowflake.svg', alt: 'Snowflake', h: 26 },
        ].map((logo) => (
          <img key={logo.alt} src={logo.src} alt={logo.alt} style={{ height: logo.h }} />
        ))}
      </div>
      <div className="tm-prod-erp-siblings">
        <span className="tm-prod-erp-siblings-label">Ver también:</span>
        <a href="/integraciones/sap.html">SAP</a>
        <a href="/integraciones/netsuite.html">NetSuite</a>
        <a href="/integraciones/odoo.html">Odoo</a>
        <a href="/integraciones/tango.html">Tango</a>
      </div>
      <a href="/integraciones.html" className="tm-btn tm-btn-md" style={{ marginTop: 44, background: 'transparent', color: '#253DE5', border: '1px solid rgba(37,61,229,.28)', borderRadius: 9999, fontWeight: 600 }}>Ver todas las integraciones <i className="ph ph-arrow-right" /></a>
    </div>
  </section>
);

const FaqSection = () => {
  useJsonLd({
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: FAQ_ITEMS.map((item) => ({
      '@type': 'Question',
      name: item.q,
      acceptedAnswer: { '@type': 'Answer', text: item.a.replace(/<\/?b>/g, '') },
    })),
  });
  return (
    <section className="tm-prod-section tm-prod-section-white">
      <div className="tm-container">
        <div className="tm-prod-faq-grid">
          <aside className="tm-prod-faq-aside">
            <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Preguntas frecuentes</span>
            <h2>Preguntas frecuentes sobre la <span>integración con Bejerman</span></h2>
          </aside>
          <div className="tm-prod-faq-list">
            {FAQ_ITEMS.map((item, i) => (
              <details className="tm-prod-faq-item" key={item.q} open={i === 0 ? true : undefined}>
                <summary>
                  <span className="tm-prod-faq-q">{item.q}</span>
                  <span className="tm-prod-faq-icon"><i className="ph-bold ph-plus" /></span>
                </summary>
                <p className="tm-prod-faq-a" dangerouslySetInnerHTML={{ __html: item.a }} />
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const CtaFinalSection = () => {
  const { c } = useLang();
  return (
    <section id="demo" className="tm-prod-cta">
      <div className="tm-prod-cta-inner">
        <p className="tm-prod-cta-kicker">Empezá ahora</p>
        <h2>Conectá tu Bejerman y sacá el reporte de gestión</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tu propia contabilidad, no un demo genérico.</p>
        <div className="tm-prod-cta-actions">
          <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-btn tm-btn-lg" style={{ background: '#fff', color: '#253DE5', borderColor: 'transparent', borderRadius: 9999, fontWeight: 600 }}>Pedí tu demo</a>
          <a href={c.links.app} className="tm-btn tm-btn-lg" style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.5)', borderRadius: 9999, fontWeight: 600 }}>Comenzá Gratis</a>
        </div>
        <p className="tm-prod-cta-fine">Usuario de solo lectura · VPN o whitelist de IP · Tu Bejerman queda intacto</p>
      </div>
    </section>
  );
};

const BejermanApp = () => {
  const rootRef = useRefBej(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <BejermanHero />
      <ProblemaSection />
      <ComoFuncionaSection />
      <QueObtenesSection />
      <OtrasIntegracionesSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider defaultLang="es">
    <BejermanApp />
  </LangProvider>
);