/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* integraciones/sap.jsx — página dedicada de integración SAP, primera de
   las páginas por ERP del plan SEO/AEO (sprint 2026-09).

   H1, meta title y meta description salen tal cual de la tabla del brief
   (sección "H1s y meta por página"), que está cerrada con SEO: no se
   reescriben.

   Por qué SAP primero y solo SAP: es el único ERP con conector
   documentado en /docs (SAP HANA figura en la lista de fuentes
   soportadas) y el único con material propio verificable — los casos de
   minería, combustibles y salud que ya están publicados. Para Odoo,
   Tango, Bejerman, Softland, Dynamics y NetSuite el mecanismo de
   conexión todavía no está confirmado por el equipo técnico, así que no
   se escriben páginas hasta saberlo (si no, habría que afirmar
   "conector nativo" sin respaldo).

   Todo el contenido de esta página sale de material que ya estaba
   publicado en las páginas de industria (mineria/combustibles/salud).
   Esas páginas se retiraron del sitio el 2026-09-18 porque su contenido
   apuntaba a un comprador operativo que dejó de ser el ICP — pero la
   parte de SAP sí le sirve al ICP nuevo, así que se consolidó acá y las
   URLs viejas redirigen a esta página. El original queda en el historial
   de git si hace falta revisarlo:
   - variantes ECC / S/4HANA / HANA, objeción de migración a S/4HANA con
     el backup en S3, y objeción de SAP Analytics Cloud vs CDS views:
     venían de mineria.jsx
   - casos anonimizados: mineria.jsx, combustibles.jsx, salud.jsx (se
     mantiene el mismo anonimato con el que estaban publicados)
   - read-only, VPN/allowlist y SOC 2 Type I: docs + seguridad.jsx

   Reusa hero-nav.css/product.css sin agregar CSS propio. */

const PROBLEM_CARDS = [
  {
    icon: 'ph-ticket',
    title: 'Cada indicador nuevo es un ticket',
    body: 'Negocio pide un número, el analista funcional traduce el requerimiento, el equipo ABAP lo modela. El indicador llega cuando la decisión ya se tomó.',
  },
  {
    icon: 'ph-table',
    title: 'La data vive en tablas que nadie lee',
    body: 'Las tablas de SAP no están pensadas para análisis. Sin alguien que las conozca de memoria, bajar un dato correcto es un proyecto en sí mismo.',
  },
  {
    icon: 'ph-arrows-split',
    title: 'El Excel paralelo termina siendo la fuente real',
    body: 'Como pedirle algo a SAP tarda, el equipo baja CSVs y arma su propio modelo al costado. Dos versiones del mismo número, ninguna trazable.',
  },
];

const HOW_CHECKLIST = [
  'Usuario de solo lectura: Teramot nunca escribe en SAP',
  'Transporte por VPN o whitelist de IP',
  'Modelado sobre tu plan de cuentas y tus centros de costo',
  'Consolidación multi-entidad y multi-moneda',
  'Cada número abre su tabla de origen y su fórmula',
  'Sin CDS views ni desarrollo ABAP para cada indicador',
];

const CASOS = [
  {
    sector: 'Minería · Maquinaria pesada',
    metric: 'De 6 meses a 3 días',
    body: 'Por indicador nuevo. Balance de flota automatizado sobre SAP, sin CDS views ni analista de datos dedicado.',
  },
  {
    sector: 'Multinacional consumer health',
    metric: '+5 fuentes SAP',
    body: 'Integradas en una sola vista del ciclo de devoluciones, sobre 10 países de LATAM.',
  },
  {
    sector: 'Petrolera grande · LATAM',
    metric: '4M partidas',
    body: 'Procesadas sobre SAP HANA, con scoring de 16.000 clientes B2B y reasignación de cartera en minutos.',
  },
];

const FAQ_ITEMS = [
  {
    q: '¿Con qué versiones de SAP funciona?',
    a: 'Leemos <b>la base de datos de tu SAP</b> — ECC, S/4HANA o SAP HANA — con un usuario de solo lectura, o entramos por su API cuando la expone. Como el acceso es a la base, no depende de la versión de la interfaz ni de qué módulos tengas activos.',
  },
  {
    q: '¿Teramot escribe algo en SAP?',
    a: 'No. El acceso es con un <b>usuario de solo lectura</b>: Teramot nunca escribe en tus sistemas fuente. Lee, modela y consolida del lado de Teramot. Tu SAP queda exactamente como está.',
  },
  {
    q: '¿Por dónde viaja la conexión?',
    a: 'Por <b>VPN o whitelist de IP</b>, según lo que use tu organización. La base no queda expuesta públicamente en ningún momento, ni en tránsito ni en reposo.',
  },
  {
    q: 'Estamos en medio de una migración a S/4HANA. ¿Conviene esperar?',
    a: 'Justamente por eso conviene arrancar ahora: la migración es el mejor momento para modelar la capa de datos limpia <b>sin tocar SAP en producción</b>. Restauramos un backup en S3 y trabajamos sobre eso en paralelo a tu migración.',
  },
  {
    q: 'Ya tenemos SAP Analytics Cloud o Power BI. ¿Para qué sumar Teramot?',
    a: 'La diferencia no está en la visualización, está en el ciclo de creación. Con SAC o Power BI seguís pidiendo <b>CDS views al equipo ABAP</b> cada vez que necesitás un indicador nuevo. Con Teramot el analista funcional lo arma solo, y el dashboard que ya tenés se puede alimentar de la capa gobernada en vez de la data cruda.',
  },
  {
    q: '¿Necesito involucrar a Sistemas?',
    a: 'Una sola vez, al principio: Sistemas crea el <b>usuario de solo lectura</b> y habilita el acceso por VPN o whitelist de IP. Después de eso tu equipo trabaja sin depender de tickets — cada consulta nueva se hace desde Teramot, no con un pedido de desarrollo.',
  },
  {
    q: '¿Qué pasa con la seguridad de los datos financieros?',
    a: 'Teramot está certificado <b>SOC 2 Type I</b> (Type II en curso), con permisos por rol, log de cambios completo y cifrado en tránsito y en reposo. Para organizaciones con requisitos estrictos de residencia de datos existe despliegue on-premise.',
  },
];

const { useEffect: useEffectSap, useRef: useRefSap } = React;

/* Scroll reveal — mismo hook que el resto de las páginas de Producto. */
const useScrollReveal = (rootRef) => {
  useEffectSap(() => {
    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 SapHero = () => {
  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 SAP · Sin proyecto de IT</p>
          <h1>Integración con SAP: reportes financieros <span>automáticos con IA</span>.</h1>
          <p className="tm-prod-hero-sub">Leemos la base de tu SAP — ECC, S/4HANA o HANA — con un usuario de solo lectura, por VPN o whitelist de IP. Consolidación y reportes automáticos sin tocar tu ERP en producción.</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 SAP a Teramot 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 }} /> SAP 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: 'SAP ECC · S/4HANA · HANA', status: 'Conectado' },
                { icon: 'ph-tree-structure', label: 'Plan de cuentas modelado', status: 'Listo' },
                { icon: 'ph-buildings', label: 'Consolidación multi-entidad', status: 'Listo' },
                { 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 CDS views ni desarrollo ABAP</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' }}>Indicador nuevo</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-lightning" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>3 días, no 6 meses</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, paddingTop: 9, borderTop: '1px solid #EEF0F4' }}>
              <i className="ph ph-user-gear" style={{ color: '#253DE5', fontSize: 12, flex: 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 500, lineHeight: 1.35, color: '#4B5563' }}>Lo arma el analista funcional</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é sacar un número de SAP cuesta tanto</h2>
        <p>No es el ERP: es que la capa de análisis nunca existió del lado del negocio.</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' }}>De tablas de SAP a reportes que el negocio entiende</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' }}>SAP → 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' }}>Tu SAP, sin tocar</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['ECC', 'S/4HANA', 'SAP HANA'].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 tu negocio</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>Sin ABAP</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {['Plan de cuentas y centros de costo', 'Reglas de consolidación multi-entidad'].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-chart-line-up" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Reportes y consultas</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['P&L consolidado', false], ['Rentabilidad por cliente', false], ['Indicador nuevo', 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 tabla de origen</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>Teramot lee la base de tu SAP con un usuario de solo lectura, por VPN o whitelist de IP. La IA multi-agente modela tus tablas sobre tu plan de cuentas y tus centros de costo, aplica las reglas de consolidación que definiste y deja los reportes disponibles para que cualquiera del equipo consulte en lenguaje natural. Cada número abre su tabla de origen y su fórmula. Tu SAP queda intacto.</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 CasosSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Equipos que ya corren sobre SAP con Teramot</h2>
        <p>Casos reales, anonimizados a pedido de cada empresa.</p>
      </div>
      <div className="tm-prod-cards">
        {CASOS.map((caso) => (
          <article className="tm-prod-card" key={caso.sector}>
            <p style={{ margin: 0, fontSize: 10.5, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#9CA3AF' }}>{caso.sector}</p>
            <h3 style={{ marginTop: 14, fontSize: 24, letterSpacing: '-.03em', color: '#253DE5' }}>{caso.metric}</h3>
            <p style={{ marginTop: 10 }}>{caso.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' }}>SAP no es lo único que conectás</h2>
      <p style={{ marginTop: 14, fontSize: 15.5, color: '#4B5563' }}>Teramot cruza tu SAP 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/netsuite.html">NetSuite</a>
        <a href="/integraciones/odoo.html">Odoo</a>
        <a href="/integraciones/tango.html">Tango</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 SAP</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 SAP y sacá el primer reporte</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tu propio SAP, 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">Conexión de solo lectura · Sin proyecto de IT · Tu SAP queda intacto</p>
      </div>
    </section>
  );
};

const SapApp = () => {
  const rootRef = useRefSap(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <SapHero />
      <ProblemaSection />
      <ComoFuncionaSection />
      <CasosSection />
      <OtrasIntegracionesSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

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