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

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

   Acceso: base de datos + usuario de solo lectura + VPN o whitelist de
   IP. Tango no expone una API pública general, así que acá la vía es la
   base — a diferencia de la página de Odoo, donde la API es alternativa.

   Ángulo propio de esta página (para que no sea un duplicado de
   odoo.jsx): en Tango lo habitual es una base por empresa, así que el
   dolor distintivo es la consolidación entre empresas, no el cruce entre
   módulos.

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

   A VERIFICAR con el equipo: los nombres de línea de producto (Tango
   Gestión / Tango Delta) se mencionan en el FAQ de versiones. Si Axoft
   cambió la nomenclatura, corregir ahí. */

const PROBLEM_CARDS = [
  {
    icon: 'ph-copy',
    title: 'Una base por empresa',
    body: 'Cada empresa vive en su propia base de Tango. El consolidado del grupo se arma a mano, exportando de a una y pegando en Excel.',
  },
  {
    icon: 'ph-printer',
    title: 'Listados pensados para imprimir',
    body: 'Los informes de Tango resuelven la operación del día. Para analizar margen por canal o comparar períodos, el camino sigue siendo exportar.',
  },
  {
    icon: 'ph-clock-counter-clockwise',
    title: 'El número del mes llega tarde',
    body: 'Cuando el consolidado depende de que alguien baje, pegue y revise, la dirección ve el resultado cuando el mes ya pasó.',
  },
];

const HOW_CHECKLIST = [
  'Conector nativo a SQL Server, el motor sobre el que corre Tango',
  'Usuario de solo lectura: Teramot nunca escribe en Tango',
  'Transporte por VPN o whitelist de IP',
  'Todas las empresas leídas juntas, aunque estén en bases separadas',
  'Cada número abre su tabla de origen y su fórmula',
];

const QUE_OBTENES = [
  {
    icon: 'ph-buildings',
    title: 'Consolidado de todas tus empresas',
    body: 'Aunque cada una esté en su propia base. Con eliminaciones, tipo de cambio de cierre y ajustes con log.',
  },
  {
    icon: 'ph-chart-pie-slice',
    title: 'Margen por producto, cliente y canal',
    body: 'Cruzando ventas, compras y stock de Tango, sin exportar ni rearmar la planilla cada mes.',
  },
  {
    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 Tango?',
    a: 'Leemos <b>la base SQL Server de tu Tango 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 ningún desarrollo intermedio ni instalar nada del lado de Tango.',
  },
  {
    q: 'Tenemos varias empresas, cada una en su base. ¿Las consolida?',
    a: 'Sí, y es el caso más común en Tango. Leemos <b>todas las bases juntas</b> y armamos el consolidado del grupo aplicando las reglas que definas — eliminaciones entre partes relacionadas, tipo de cambio de cierre, reclasificaciones — con log de cambios y responsable en cada ajuste.',
  },
  {
    q: '¿Teramot escribe algo en Tango?',
    a: 'No. El acceso es con un <b>usuario de solo lectura</b>. Teramot lee, modela y consolida de su lado. Tu Tango queda exactamente como está: no se instalan módulos ni se agregan campos.',
  },
  {
    q: '¿Qué versiones de Tango funcionan?',
    a: 'Como leemos la base SQL Server, <b>no dependemos de la versión de la interfaz</b>: funciona igual sobre Tango Gestión que sobre Tango Delta. Lo que sí miramos en el onboarding es tu plan de cuentas y cómo están separadas las empresas.',
  },
  {
    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: useEffectTango, useRef: useRefTango } = React;

const useScrollReveal = (rootRef) => {
  useEffectTango(() => {
    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 TangoHero = () => {
  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 Tango · Sin proyecto de IT</p>
          <h1>Integración con Tango: consolidá todas tus empresas <span>en una vista</span>.</h1>
          <p className="tm-prod-hero-sub">Leemos la base SQL Server de tu Tango con un usuario de solo lectura, por VPN o whitelist de IP. Aunque cada empresa esté en su propia base, el consolidado sale solo.</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="Varias bases de Tango consolidadas en Teramot">
            <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-buildings" style={{ fontSize: 12 }} /> 3 empresas</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: 'Base empresa 1', status: 'Leída' },
                { icon: 'ph-database', label: 'Base empresa 2', status: 'Leída' },
                { icon: 'ph-database', label: 'Base empresa 3', status: 'Leída' },
                { icon: 'ph-stack', label: 'Consolidado del grupo', status: 'Armado', 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 exportar de a una y pegar en Excel</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>Por qué el consolidado de Tango se arma a mano</h2>
        <p>Tango registra bien cada empresa. El problema aparece cuando querés verlas todas juntas.</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 Tango</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' }}>Tango → 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 bases de Tango</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['Empresa 1', 'Empresa 2', 'Empresa 3'].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-stack" style={{ fontSize: 14, color: '#253DE5' }} />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Reglas de consolidació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 }}>
                {['Eliminaciones entre empresas', 'Tipo de cambio de cierre'].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' }}>aplicada</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-table" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Consolidado del grupo</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['Ingresos del grupo', false], ['Resultado por empresa', false], ['P&L consolidado', 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 empresa y su fórmula</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>Tango 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. A partir de ahí leemos todas las bases juntas, aplicamos tus reglas de consolidación y el P&L del grupo queda armado, con cada línea trazable hasta la empresa y 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 Tango</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' }}>Tango no es lo único que conectás</h2>
      <p style={{ marginTop: 14, fontSize: 15.5, color: '#4B5563' }}>Teramot cruza tu Tango 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/bejerman.html">Bejerman</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 Tango</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 Tango y consolidá el grupo</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tus propias empresas, 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 Tango queda intacto</p>
      </div>
    </section>
  );
};

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

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