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

   REGLAS DE COPY (ver conversación 2026-09-18): nunca "conector nativo a
   Odoo" ni "integración nativa con Odoo" — Teramot no tiene conectores
   pre-armados por marca de ERP. Sí se puede decir conector nativo cuando
   el objeto es el motor de base, y Odoo corre sobre PostgreSQL, que está
   en la lista de fuentes soportadas de /docs. Por eso la página se apoya
   en "PostgreSQL" y no en "Odoo" para hablar de conectores.

   El acceso se describe siempre como: base de datos del ERP + usuario de
   solo lectura + VPN o whitelist de IP, o vía API cuando el ERP la
   expone. Odoo expone XML-RPC/JSON-RPC, así que las dos vías aplican.

   Distinción importante y real: Odoo Online (el SaaS de odoo.com) no da
   acceso a la base; self-hosted y Odoo.sh sí. Se dice explícitamente en
   el FAQ para no prometer algo que en Odoo Online no se puede.

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

const PROBLEM_CARDS = [
  {
    icon: 'ph-list-checks',
    title: 'El reporting de Odoo es operativo, no analítico',
    body: 'Los listados sirven para el día a día. Cuando necesitás margen por canal o un consolidado entre compañías, terminás exportando a Excel.',
  },
  {
    icon: 'ph-buildings',
    title: 'Multi-compañía que no consolida sola',
    body: 'Odoo maneja varias compañías, pero armar el consolidado con eliminaciones y tipo de cambio de cierre sigue siendo trabajo manual.',
  },
  {
    icon: 'ph-puzzle-piece',
    title: 'Módulos que no se cruzan entre sí',
    body: 'Ventas, compras, stock y contabilidad viven en el mismo sistema pero cada análisis que los cruza hay que armarlo a mano.',
  },
];

const HOW_CHECKLIST = [
  'Conector nativo a PostgreSQL, el motor sobre el que corre Odoo',
  'Usuario de solo lectura: Teramot nunca escribe en Odoo',
  'Transporte por VPN o whitelist de IP',
  'También por XML-RPC/JSON-RPC si preferís ir por la API',
  'Cada número abre su tabla de origen y su fórmula',
];

const QUE_OBTENES = [
  {
    icon: 'ph-table',
    title: 'P&L consolidado entre compañías',
    body: 'Con eliminaciones, tipo de cambio de cierre y ajustes con log. Sin exportar un solo CSV.',
  },
  {
    icon: 'ph-chart-pie-slice',
    title: 'Margen por producto, cliente y canal',
    body: 'Cruzando ventas, compras y stock de tus módulos, sin armar la planilla a mano.',
  },
  {
    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 Odoo?',
    a: 'Leemos <b>la base PostgreSQL de tu Odoo con un usuario de solo lectura</b>, por VPN o whitelist de IP. Teramot tiene conector nativo a PostgreSQL, así que no hace falta desarrollo intermedio. Si preferís no dar acceso a la base, también entramos por la API XML-RPC/JSON-RPC que Odoo expone.',
  },
  {
    q: 'Uso Odoo Online. ¿Sirve igual?',
    a: 'En <b>Odoo Online el SaaS no da acceso directo a PostgreSQL</b>, así que ahí la vía es la API. Si estás en <b>self-hosted u Odoo.sh</b> sí podés habilitar el usuario de solo lectura sobre la base, que es el camino más completo y más rápido. Contanos cuál de los tres usás y te decimos qué necesita de tu lado.',
  },
  {
    q: '¿Teramot escribe algo en Odoo?',
    a: 'No. El acceso es con un <b>usuario de solo lectura</b>. Teramot lee, modela y consolida de su lado. Tu Odoo queda exactamente como está, sin módulos nuevos ni campos agregados.',
  },
  {
    q: '¿Qué versiones de Odoo funcionan?',
    a: 'Como leemos la base, no dependemos de la versión de la interfaz. Funciona tanto con <b>Odoo Community como con Enterprise</b>. Lo que sí miramos en el onboarding es tu plan de cuentas y cómo tenés configuradas las compañías.',
  },
  {
    q: 'Tenemos varias compañías en Odoo. ¿Las consolida?',
    a: 'Sí. Modelamos tus compañías y aplicamos las <b>reglas de consolidación</b> que definas — eliminaciones entre partes relacionadas, tipo de cambio de cierre, reclasificaciones — con log de cambios y responsable identificado en cada ajuste.',
  },
  {
    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: useEffectOdoo, useRef: useRefOdoo } = React;

const useScrollReveal = (rootRef) => {
  useEffectOdoo(() => {
    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 OdooHero = () => {
  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 Odoo · Sin proyecto de IT</p>
          <h1>Integración con Odoo: reportes y consolidación <span>con IA</span>.</h1>
          <p className="tm-prod-hero-sub">Leemos la base PostgreSQL de tu Odoo con un usuario de solo lectura, por VPN o whitelist de IP — o entramos por su API. 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 Odoo a Teramot por PostgreSQL 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 }} /> Odoo 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: 'PostgreSQL · usuario read-only', status: 'Conectado' },
                { icon: 'ph-buildings', label: 'Compañías de Odoo', status: 'Mapeadas' },
                { icon: 'ph-squares-four', label: 'Ventas · Compras · Stock', status: 'Cruzados' },
                { 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 módulos nuevos en tu Odoo</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' }}>PostgreSQL</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é Odoo 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.</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 Odoo</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' }}>Odoo → 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' }}>Dos caminos posibles</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['Base PostgreSQL', 'API XML-RPC'].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 }}>
                {['Usuario de solo lectura', 'VPN o whitelist 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' }}>
                {[['P&L consolidado', false], ['Margen por canal', 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 tabla de origen</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>Odoo guarda todo en PostgreSQL, y Teramot tiene conector nativo a ese motor. Habilitás un usuario de solo lectura, abrís el acceso por VPN o whitelist de IP, y listo: la IA multi-agente modela tus tablas sobre tu plan de cuentas y tus compañías, y deja los reportes disponibles para consultar en lenguaje natural. Si preferís no dar acceso a la base, la API de Odoo es el camino alternativo.</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 Odoo</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' }}>Odoo no es lo único que conectás</h2>
      <p style={{ marginTop: 14, fontSize: 15.5, color: '#4B5563' }}>Teramot cruza tu Odoo 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/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 Odoo</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 Odoo y sacá el primer reporte</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tu propio Odoo, 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 Odoo queda intacto</p>
      </div>
    </section>
  );
};

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

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