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

   REGLAS DE COPY (ver conversación 2026-09-18): nunca "conector nativo a
   NetSuite" ni "integración nativa con NetSuite" — Teramot no tiene
   conectores pre-armados por marca de ERP.

   NetSuite es DISTINTO del resto de las páginas por ERP y por eso esta
   página no copia su estructura de copy. Odoo corre sobre PostgreSQL,
   Tango y Bejerman sobre SQL Server: en esos casos se lee la base con un
   usuario de solo lectura por VPN o whitelist de IP. NetSuite es SaaS
   cloud puro y NO da acceso a su base de datos — no existe un motor al
   que apuntar. Decir acá "leemos la base de tu ERP" sería directamente
   falso, así que toda la página se apoya en la otra vía que las reglas
   habilitan: "vía API cuando el ERP la expone".

   Lo que se afirma sobre NetSuite es verificable en su propia
   documentación de producto: expone SuiteTalk (REST y SOAP) y
   SuiteAnalytics Connect (ODBC/JDBC), el acceso se define por rol, se
   autentica con token (TBA/OAuth 2.0) y admite reglas de restricción por
   IP del lado de NetSuite. Son características de NetSuite, no
   afirmaciones sobre un conector nuestro.

   ⚠ PENDIENTE DE CONFIRMACIÓN TÉCNICA: el equipo todavía no confirmó por
   cuál de las dos vías nos conectamos en la práctica (SuiteTalk o
   SuiteAnalytics Connect). La copy está escrita para ser correcta con
   cualquiera de las dos — habla de "la API de NetSuite" y nombra las dos
   como opciones, sin comprometerse a una. Si el equipo confirma que solo
   una está implementada, hay que sacar la otra del checklist, del
   mockup del hero y del primer item del FAQ.

   No hay casos de cliente propios sobre NetSuite en el sitio, así que la
   página no inventa ninguno: igual que en Odoo, va una sección de "qué
   obtenés" en lugar de casos.

   El H1, el title y la meta description salen literales de la tabla de
   SEO. Página en español únicamente, como el resto de Producto. */

const PROBLEM_CARDS = [
  {
    icon: 'ph-buildings',
    title: 'La consolidación de OneWorld llega tarde',
    body: 'NetSuite consolida, pero recién cuando cerraste todas las subsidiarias. Hasta entonces el número del grupo no existe y el forecast se arma a ciegas.',
  },
  {
    icon: 'ph-currency-circle-dollar',
    title: 'Multi-moneda que hay que reconciliar a mano',
    body: 'Tipo de cambio de cierre, de transacción y de presentación conviven en el mismo reporte. Explicar la diferencia entre dos vistas se lleva medio día.',
  },
  {
    icon: 'ph-file-arrow-down',
    title: 'Saved searches que terminan en Excel',
    body: 'Cada análisis nuevo es una saved search más. Cuando hay que cruzarlas entre sí o con algo que no está en NetSuite, el destino siempre es una planilla.',
  },
];

const HOW_CHECKLIST = [
  'Entramos por la API que NetSuite expone — no por su base',
  'Rol de NetSuite con permisos de solo lectura: Teramot nunca escribe',
  'Autenticación por token, con restricción de IP del lado de NetSuite',
  'Subsidiarias, libros y monedas mapeados en el onboarding',
  'Cada número abre su origen y su fórmula',
];

const QUE_OBTENES = [
  {
    icon: 'ph-table',
    title: 'Consolidado multi-entidad antes del cierre',
    body: 'Con eliminaciones, tipo de cambio y ajustes con log. Sobre actuales reales, sin esperar a que cierren todas las subsidiarias.',
  },
  {
    icon: 'ph-chart-line-up',
    title: 'Forecast rolling sobre la data de NetSuite',
    body: 'Escenarios versionados y sensibilidad, alimentados con los actuales que ya están cargados en tu ERP.',
  },
  {
    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 NetSuite?',
    a: 'Por la <b>API que NetSuite expone</b>. A diferencia de un ERP on-premise, NetSuite no da acceso a su base de datos, así que no hay un motor al que apuntar: se entra por <b>SuiteTalk</b> o por <b>SuiteAnalytics Connect</b>, con un <b>rol de solo lectura</b> creado para Teramot. No hace falta instalar nada en tu cuenta.',
  },
  {
    q: '¿Teramot escribe algo en NetSuite?',
    a: 'No. El rol que se crea para Teramot tiene <b>permisos de solo lectura</b>. Teramot lee, modela y consolida de su lado. Tu NetSuite queda exactamente como está, sin bundles nuevos ni campos custom agregados.',
  },
  {
    q: 'Tenemos OneWorld con varias subsidiarias. ¿Las consolida?',
    a: 'Sí, y es el caso donde más se nota. Mapeamos tus <b>subsidiarias, libros y monedas</b> y aplicamos las reglas de consolidación que definas — eliminaciones entre partes relacionadas, tipo de cambio de cierre, reclasificaciones — con log de cambios y responsable identificado en cada ajuste.',
  },
  {
    q: 'Usamos Multi-Book. ¿Lo soporta?',
    a: 'Sí. Se modelan los <b>libros contables por separado</b>, de forma que podés mirar el mismo período bajo un criterio u otro sin rehacer el reporte. En el onboarding definimos cuál es el libro primario para cada vista.',
  },
  {
    q: '¿Cómo se controla el acceso?',
    a: 'El acceso se define con un <b>rol de NetSuite de solo lectura</b>, se autentica con <b>token</b> y admite <b>restricción por IP</b> del lado de NetSuite, así que las credenciales solo sirven desde nuestra infraestructura. Podés revocarlo vos desde tu cuenta en cualquier momento, sin depender de nosotros.',
  },
  {
    q: '¿Qué pasa con la seguridad de los datos?',
    a: 'Acceso de <b>solo lectura</b>, credenciales revocables desde tu propia cuenta de NetSuite, y <b>SOC 2 Type I certificado</b> (Type II en curso). Los datos viajan cifrados en tránsito y quedan cifrados en reposo.',
  },
];

const { useEffect: useEffectNs, useRef: useRefNs } = React;

const useScrollReveal = (rootRef) => {
  useEffectNs(() => {
    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 NetSuiteHero = () => {
  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 NetSuite · Sin proyecto de IT</p>
          <h1>Integración con NetSuite: consolidación y reportes <span>con IA</span>.</h1>
          <p className="tm-prod-hero-sub">Entramos por la API que NetSuite expone, con un rol de solo lectura creado para Teramot. Consolidación multi-entidad y multi-moneda sin migrar nada y sin tocar tu ERP.</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 NetSuite a Teramot por su API 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 }} /> NetSuite 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-plug', label: 'API de NetSuite · rol read-only', status: 'Conectado' },
                { icon: 'ph-buildings', label: 'Subsidiarias de OneWorld', status: 'Mapeadas' },
                { icon: 'ph-currency-circle-dollar', label: 'Multi-Book · multi-moneda', status: 'Modelado' },
                { 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 bundles nuevos en tu NetSuite</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' }}>Acceso</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-plug" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>API de NetSuite</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, paddingTop: 9, borderTop: '1px solid #EEF0F4' }}>
              <i className="ph ph-lock-simple" style={{ color: '#253DE5', fontSize: 12, flex: 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 500, lineHeight: 1.35, color: '#4B5563' }}>Rol de solo lectura</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é NetSuite solo no te da el reporte de gestión</h2>
        <p>No es una falla del ERP: registra bien la operación, pero no fue pensado para analizarla al ritmo del CFO office.</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 NetSuite</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' }}>NetSuite → 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-plug" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Por la API, no por la base</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['SuiteTalk', 'SuiteAnalytics Connect'].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-shield-check" style={{ fontSize: 14, color: '#253DE5' }} />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Acceso controlado</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>SOC 2</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {['Rol de solo lectura', 'Token con restricción de IP'].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' }}>activo</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' }}>Tu capa de gestión</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['Consolidado multi-entidad', false], ['Forecast rolling', false], ['Consulta en lenguaje natural', 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 origen</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>NetSuite es cloud y no da acceso a su base de datos, así que no hay un motor al que apuntar: la vía es la API que el propio ERP expone. Creás un rol de solo lectura para Teramot, generás el token y listo — la IA multi-agente modela tus subsidiarias, libros y monedas sobre tu plan de cuentas, y deja los reportes disponibles para consultar en lenguaje natural. No se instala nada en tu cuenta y podés revocar el acceso vos cuando quieras.</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 NetSuite</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' }}>NetSuite no es lo único que conectás</h2>
      <p style={{ marginTop: 14, fontSize: 15.5, color: '#4B5563' }}>Teramot cruza tu NetSuite 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/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 NetSuite</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 NetSuite y sacá el primer reporte</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tu propio NetSuite, 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">Rol de solo lectura · Token revocable por vos · Tu NetSuite queda intacto</p>
      </div>
    </section>
  );
};

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

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