/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* integraciones.jsx — landing "Integraciones" para /integraciones
   (redesign 2026-09, Sprint 3 — hub). Textos definitivos del handoff: no
   reescribir, con dos desvíos señalados al usuario: (1) el handoff
   incluía un diagrama animado de varias fases (fuentes → capa de
   gobernanza → outputs, con líneas dibujándose por CSS keyframes
   dgDrawX/dgDrawY) — se reemplazó por el mismo tipo de mockup de panel
   usado en el resto de las páginas de Producto (hero-nav.css/
   product.css), consistente con el criterio de home-gana-sobre-el-
   handoff ya aplicado en toda la sección; (2) hay página dedicada para
   SAP, Odoo, Tango, Bejerman y NetSuite. NetSuite se sumó el 2026-09-21:
   al ser SaaS cloud no expone base, así que su página se apoya en la API
   que el propio ERP expone y no en el motor (ver el encabezado de
   integraciones/netsuite.jsx). Softland y Dynamics siguen sin página por
   falta de material. Página en
   español únicamente (sin toggle EN) — mismo criterio que el resto de
   las páginas de Producto/Soluciones. Reusa product.css/hero-nav.css tal
   cual quedaron después del pase de consistencia con la home. */

const COMBO_CARDS = [
  {
    kicker: 'SAP + Teramot', title: 'Cierre contable en minutos',
    body: 'ECC, S/4HANA o SAP HANA. Consolidación multi-entidad automatizada sobre plan de cuentas SAP, con ajustes trazables.',
    href: '/integraciones/sap.html', cta: 'Ver integración SAP',
  },
  {
    kicker: 'NetSuite + Teramot', title: 'Forecast rolling sobre actuales reales',
    body: 'OneWorld, Multi-Book. Consolidación multi-entidad y multi-moneda con refresh automático al cierre.',
    href: '/integraciones/netsuite.html', cta: 'Ver integración NetSuite',
  },
  {
    kicker: 'Sheets · Excel + Teramot', title: 'Trazabilidad sobre tu modelo de siempre',
    body: 'Sincronización en vivo con Google Sheets y Excel. Tus fórmulas siguen funcionando, sumás log de cambios y versiones.',
    href: '/cierre-mensual.html', cta: 'Ver caso completo',
  },
  {
    kicker: 'Odoo + Teramot', title: 'Consolidación sobre PostgreSQL',
    body: 'Leemos la base PostgreSQL de tu Odoo con un usuario de solo lectura — o entramos por su API. Multi-compañía consolidada sin exportar nada.',
    href: '/integraciones/odoo.html', cta: 'Ver integración Odoo',
  },
  {
    kicker: 'Tango · Bejerman + Teramot', title: 'Gestión sobre SQL Server',
    body: 'Leemos la base de tu ERP con un usuario de solo lectura, por VPN o whitelist de IP. Consolidá todas tus empresas aunque estén en bases separadas.',
    href: '/integraciones/tango.html', cta: 'Ver integración Tango',
  },
  {
    kicker: 'Claude · ChatGPT · Gemini + Teramot MCP', title: 'Consultá tu ERP desde tu IA de confianza',
    body: 'Vía Model Context Protocol. Preguntás en lenguaje natural desde el asistente de IA que ya usás, la respuesta viene con trazabilidad de Teramot.',
    href: '/mcp.html', cta: 'Ver Teramot MCP', highlight: true,
  },
  {
    kicker: 'Power BI · BigQuery + Teramot', title: 'Dashboards con data gobernada, no cruda',
    body: 'Alimentá tus dashboards de BI y tu data warehouse con la capa de consolidación y trazabilidad encima del ERP.',
    href: '#listado', cta: 'Ver detalle',
  },
];

const LISTADO_GROUPS = [
  {
    label: 'ERP global',
    items: [
      { logo: 'brand/integrations/sap.png', alt: 'SAP', href: '/integraciones/sap.html' },
      { logo: 'brand/integrations/netsuite.png', alt: 'NetSuite', href: '/integraciones/netsuite.html' },
      { logo: 'brand/integrations/dynamics.png', alt: 'Microsoft Dynamics', href: '#listado' },
    ],
  },
  {
    label: 'ERP LATAM',
    items: [
      { logo: 'brand/integrations/tango.png', alt: 'Tango', href: '/integraciones/tango.html' },
      { logo: 'brand/integrations/odoo.png', alt: 'Odoo', href: '/integraciones/odoo.html' },
      { logo: 'brand/integrations/softland.png', alt: 'Softland', href: '#listado' },
      { logo: 'brand/integrations/bejerman.png', alt: 'Bejerman', href: '/integraciones/bejerman.html' },
    ],
  },
  {
    label: 'Planillas',
    items: [
      { logo: 'brand/integrations/google-sheets.png', alt: 'Google Sheets', href: '/cierre-mensual.html' },
      { logo: 'brand/integrations/excel.png', alt: 'Excel', href: '/cierre-mensual.html' },
    ],
  },
  {
    label: 'BI y Data warehouse',
    items: [
      { logo: 'brand/integrations/power-bi.png', alt: 'Power BI', href: '#listado' },
      { text: 'BigQuery', href: '#listado' },
      { logo: 'brand/integrations/snowflake.svg', alt: 'Snowflake', href: '#listado' },
    ],
  },
  {
    label: 'IA / LLMs · Vía MCP', accent: true,
    items: [
      { text: 'Claude', href: '/mcp.html' },
      { text: 'ChatGPT', href: '/mcp.html' },
      { text: 'Gemini', href: '/mcp.html' },
      { text: 'Cursor', href: '/mcp.html' },
      { text: 'Vercel AI', href: '/mcp.html' },
      { text: 'Google Antigravity', href: '/mcp.html' },
    ],
  },
];

const FAQ_ITEMS = [
  { q: '¿Y si mi ERP no está en la lista?', a: 'Si tu ERP expone base de datos, API o exportaciones programadas, se conecta. <b>Leemos la base de tu ERP con un usuario de solo lectura</b> — o entramos por su API cuando la expone. Escribinos con el sistema y la versión y te confirmamos el camino.' },
  { q: '¿Cuánto tarda una integración estándar?', a: '<b>Semanas, no meses.</b> Una vez que Sistemas habilita el usuario de solo lectura y el acceso por VPN o whitelist de IP, la conexión la hace el equipo de finanzas, sin un proyecto de IT de por medio. El plazo real depende del acceso a la base y de cuántas entidades haya que consolidar.' },
  { q: '¿La integración es en tiempo real?', a: 'Depende de la fuente. Las planillas sincronizan en vivo. Los ERPs se refrescan de forma programada — al cierre o en la frecuencia que definas — porque leer transaccional en tiempo real sobre un ERP productivo tiene costo de performance. En los dos casos <b>cada número queda con su fuente y su fórmula</b>.' },
  { q: '¿Cómo funciona la integración vía MCP con Claude o ChatGPT?', a: 'Teramot expone un servidor <b>MCP (Model Context Protocol)</b>. Conectás tu asistente una vez y desde ahí preguntás en lenguaje natural. La consulta la resuelve Teramot sobre tus datos gobernados, con los mismos permisos por rol que en la plataforma, y la respuesta vuelve con su trazabilidad.' },
];

const { useEffect: useEffectInt, useRef: useRefInt } = React;

/* Scroll reveal — mismo hook que el resto de las páginas de Producto/Soluciones. */
const useScrollReveal = (rootRef) => {
  useEffectInt(() => {
    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 IntegracionesHero = () => {
  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">ERP · Planillas · BI · IA (MCP)</p>
          <h1>Conectores ERP para reportes financieros: conectá tus fuentes de datos <span>en minutos</span>.</h1>
          <p className="tm-prod-hero-sub">Teramot no reemplaza tu ERP: se conecta con él, con tus planillas, con tu BI y con Claude, ChatGPT o Gemini vía MCP. Cada integración con casos de uso y detalles técnicos.</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="Panel de integraciones conectadas a 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-plugs-connected" style={{ fontSize: 12 }} /> Integraciones</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: '#6B7280' }}>Marzo 2026</span>
            </div>
            <div style={{ marginTop: 16, borderRadius: 10, background: '#fff', border: '1px solid #EEF0F4', overflow: 'hidden' }}>
              {[
                { icon: 'ph-stack', label: 'ERP + planillas', status: 'Conectado' },
                { icon: 'ph-shield-check', label: 'Capa de gobernanza Teramot', status: 'Activa' },
                { icon: 'ph-chart-bar', label: 'Reportes y BI', status: 'Servidos' },
                { icon: 'ph-plugs-connected', label: 'Claude · ChatGPT · Gemini', status: 'Vía MCP', 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 176px 0 4px' }}>
              <p style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#4B5563' }}>Cada número queda con su fuente y su fórmula</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' }}>Fuentes · Marzo</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-check" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Sin migración</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, paddingTop: 9, borderTop: '1px solid #EEF0F4' }}>
              <i className="ph ph-git-commit" style={{ color: '#253DE5', fontSize: 12, flex: 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 500, lineHeight: 1.35, color: '#4B5563' }}>Enchufás y funciona</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CombosSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-head">
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Elegí por lo que ya tenés</span>
        <h2 style={{ marginTop: 16 }}>Qué ganás cuando Teramot entra a tu stack</h2>
      </div>
      <div className="tm-prod-cards">
        {COMBO_CARDS.map((card) => {
          const inner = (
            <>
              <p style={{ margin: 0, fontSize: 10.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: card.highlight ? '#253DE5' : '#9CA3AF' }}>{card.kicker}</p>
              <h3 style={{ marginTop: 14, fontSize: 19, lineHeight: 1.28 }}>{card.title}</h3>
              <p style={{ marginTop: 12 }}>{card.body}</p>
              {card.cta && (
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 20, fontSize: 13, fontWeight: 600, color: '#253DE5' }}>{card.cta} <i className="ph-bold ph-arrow-right" style={{ fontSize: 12 }} /></span>
              )}
            </>
          );
          const style = card.highlight
            ? { display: 'flex', flexDirection: 'column', border: '2px solid #253DE5' }
            : { display: 'flex', flexDirection: 'column' };
          return card.href ? (
            <a className="tm-prod-card" href={card.href} key={card.kicker} style={{ ...style, textDecoration: 'none' }}>{inner}</a>
          ) : (
            <article className="tm-prod-card" key={card.kicker} style={style}>{inner}</article>
          );
        })}
      </div>
    </div>
  </section>
);

const ListadoSection = () => (
  <section id="listado" className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div style={{ maxWidth: 780 }}>
        <p style={{ margin: 0, fontSize: 11, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: '#9CA3AF' }}>Listado completo</p>
        <h2 style={{ marginTop: 14, fontSize: 'clamp(22px,2.2vw,28px)', lineHeight: 1.2, fontWeight: 600, letterSpacing: '-.03em', color: '#1C2536', textWrap: 'pretty' }}>Todas las integraciones soportadas</h2>
        <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.6, color: '#4B5563' }}>Grid compacto agrupado por tipo de fuente.</p>
      </div>
      <div style={{ display: 'grid', gap: 36, marginTop: 40 }}>
        {LISTADO_GROUPS.map((group) => (
          <div key={group.label}>
            <p style={{ margin: 0, fontSize: 10, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: group.accent ? '#253DE5' : '#9CA3AF' }}>{group.label}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 14 }}>
              {group.items.map((item) => {
                const boxStyle = {
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  width: 104, height: 60, padding: item.text ? '0 8px' : 0,
                  background: '#fff', border: group.accent ? '1px solid rgba(37,61,229,.26)' : '1px solid #E5E7EB',
                  borderRadius: 8, textDecoration: 'none', textAlign: 'center',
                };
                const content = item.logo
                  ? <img src={item.logo} alt={item.alt} style={{ maxHeight: 24, maxWidth: 72, width: 'auto', objectFit: 'contain' }} />
                  : <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', lineHeight: 1.25, color: '#4B5563' }}>{item.text}</span>;
                const key = item.alt || item.text;
                return item.href ? (
                  <a href={item.href} key={key} style={boxStyle}>{content}</a>
                ) : (
                  <div key={key} style={boxStyle}>{content}</div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <p style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid #E5E7EB', fontSize: 12, fontWeight: 500, lineHeight: 1.6, color: '#9CA3AF' }}>SAP, Odoo, Tango y Bejerman tienen página dedicada. Más integraciones en camino. IA / LLMs va a Teramot MCP.</p>
    </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 <span>integraciones</span> con Teramot</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á esta semana</p>
        <h2>Se conecta a lo que ya tenés</h2>
        <p className="tm-prod-cta-sub">30 minutos con nuestro equipo y te mostramos el combo sobre tu propio stack.</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">Sin proyecto de IT · Setup en semanas, no meses · Tus planillas siguen funcionando</p>
      </div>
    </section>
  );
};

const IntegracionesApp = () => {
  const rootRef = useRefInt(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <IntegracionesHero />
      <CombosSection />
      <ListadoSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

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