/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* mcp.jsx — landing "Producto" para /mcp (redesign 2026-09,
   Sprint 3). Textos definitivos del handoff: no reescribir, salvo dos
   desvíos señalados al usuario: (1) el eyebrow del hero decía "SOC 2 Type
   II" — se corrigió a "SOC 2 Type I certificado" para no introducir un
   claim de compliance incorrecto en una página nueva (ver
   feedback_teramot_design_consistency.md / criterio de seguridad.jsx);
   (2) el sub de "Clientes MCP soportados" traía pegado el párrafo de
   Foco LATAM de otras páginas de Producto (error de copy del handoff, no
   aplica a esta sección) — se reemplazó por un sub acorde a la sección.
   Página en español únicamente (sin toggle EN) — mismo criterio que el
   resto de las páginas de Producto. Reusa product.css/hero-nav.css tal
   cual quedaron después del pase de consistencia con la home. */

const MCP_CLIENTS = [
  { logo: 'brand/clients/claude.png', label: 'Claude' },
  { logo: 'brand/clients/chatgpt.png', label: 'ChatGPT' },
  { logo: 'brand/clients/gemini.png', label: 'Gemini' },
  { icon: 'ph-cursor-click', label: 'Cursor' },
  { icon: 'ph-rocket-launch', label: 'Antigravity' },
  { icon: 'ph-triangle', label: 'Vercel' },
];

const GARANTIAS_CARDS = [
  { icon: 'ph-git-commit', title: 'Trazabilidad', body: 'Cada respuesta trae la fórmula y las fuentes. Verificable en un click.' },
  { icon: 'ph-lock-key', title: 'Permisos por rol', body: 'El CFO ve todo. El analista ve su área. La IA respeta el permiso del usuario que hace la pregunta.' },
  { icon: 'ph-clock-counter-clockwise', title: 'Log de auditoría', body: 'Cada consulta desde una IA queda registrada en Teramot con usuario, timestamp y query.' },
  { icon: 'ph-function', title: 'Fórmulas versionadas', body: 'Si sabés que la vas a repetir, se automatiza.' },
  { icon: 'ph-shield-check', title: 'Aislamiento de tenant', body: 'Tu data nunca sale a otro cliente ni entrena modelos.' },
  { icon: 'ph-prohibit', title: 'Revocación granular', body: 'Podés cortar el acceso de una IA específica sin tocar el resto del sistema.' },
];

const DIA_A_DIA_CARDS = [
  { kicker: 'CFO · desde Claude', title: 'Análisis de fondeo', q: '¿Cuánto fondeo necesito para cerrar el Q4?', a: 'Proyección de caja, con la fuente de cada línea' },
  { kicker: 'Head P&C · desde ChatGPT', title: 'Sensibilidad de forecast', q: '¿Qué pasa con el resultado si el volumen cae 10%?', a: 'Escenario recalculado, con la fórmula a la vista' },
  { kicker: 'Controller · desde Cursor', title: 'Análisis exploratorio', q: 'Mostrame los desvíos mayores al 5% en marzo', a: 'Lista con drill-down hasta la línea del ERP' },
];

const FAQ_ITEMS = [
  { q: '¿Cómo se autoriza el acceso de una IA a mi Teramot?', a: 'Desde la configuración de tu cuenta generás una conexión MCP para el asistente que uses. <b>La conexión queda atada a tu usuario</b> y se puede revocar en cualquier momento.' },
  { q: '¿La IA "ve" toda mi data o solo lo que le pido?', a: 'Solo lo que la consulta necesita, y siempre dentro de <b>los permisos de tu usuario</b>. Teramot resuelve la pregunta y devuelve el resultado; el modelo no recibe un volcado de tu base.' },
  { q: '¿Puedo revocar el acceso de una IA específica?', a: 'Sí. Cada conexión se corta por separado, <b>sin tocar el resto del sistema</b> ni las demás integraciones.' },
  { q: '¿Registra en el log de auditoría de Teramot?', a: 'Sí. Cada consulta queda con usuario, momento, asistente y la pregunta hecha, junto al resto del log del período.' },
  { q: '¿Cómo maneja los permisos cuando la pregunta es del CFO vs. del analista?', a: 'La consulta viaja con el usuario que la hace: <b>el CFO ve todo, el analista ve su área</b>. La misma pregunta puede devolver distinto alcance según quién pregunte.' },
  { q: '¿Necesito una API key aparte o basta con mi cuenta Teramot?', a: 'Basta con tu cuenta. La conexión MCP se genera desde Teramot; del lado del asistente solo la pegás una vez.' },
  { q: '¿Mi data se usa para entrenar los modelos de Anthropic, OpenAI o Google?', a: 'No. Teramot no envía tu data a entrenamiento y la respuesta viaja solo para la consulta que la pidió. <b>Tu data queda aislada por tenant.</b>' },
];

const { useEffect: useEffectMCP, useRef: useRefMCP } = React;

/* Scroll reveal — mismo hook que el resto de las páginas de Producto. */
const useScrollReveal = (rootRef) => {
  useEffectMCP(() => {
    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 McpHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="mcp" />
      <div className="tm-prod-hero-grid">
        <div className="tm-prod-hero-copy">
          <p className="tm-prod-hero-eyebrow">Software financiero con IA para CFO office · SOC 2 Type I certificado</p>
          <h1>MCP para datos financieros: tu ERP en <span>Claude, ChatGPT y Gemini</span>.</h1>
          <p className="tm-prod-hero-sub">Teramot expone tu data consolidada vía Model Context Protocol a cualquier asistente de IA. Preguntá desde Claude, ChatGPT, Gemini o Cursor — con la trazabilidad de Teramot, no las alucinaciones del LLM.</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>
          <p style={{ marginTop: 30, fontSize: 12.5, fontWeight: 500, color: 'rgba(255,255,255,.6)' }}>Compatible con Claude · ChatGPT · Gemini · Cursor · Antigravity · Vercel</p>
        </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="Asistente de IA conectado a Teramot vía MCP">
            <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 }} /> Teramot MCP</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-plugs-connected', label: 'Conexión vía MCP', status: 'Activa' },
                { icon: 'ph-lock-key', label: 'Permisos del usuario', status: 'Respetados' },
                { icon: 'ph-function', label: 'Fórmula y fuente', status: 'En cada respuesta' },
                { icon: 'ph-clock-counter-clockwise', label: 'Log de auditoría', status: 'Cada consulta', 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' }}>El LLM formula la pregunta; Teramot responde con la data</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' }}>MCP · Claude</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' }}>Respuesta trazable</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' }}>Bajás al ERP en un click</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" style={{ maxWidth: 900 }}>
        <h2>Del &quot;IA que responde preguntas&quot; al &quot;IA que consulta tu empresa&quot;.</h2>
        <p>Hasta ahora, para que una IA respondiera sobre tu empresa había dos caminos malos: (1) copiar la data al chat, lo cual rompe seguridad y no escala; (2) dejar que el LLM &quot;acceda directo&quot; a la data, lo cual produce alucinaciones porque el LLM no sabe qué es un centro de costo. MCP resuelve esto: Teramot mantiene la data auditable y los permisos; el LLM solo formula la pregunta y traduce la respuesta.</p>
      </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 funciona</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' }}>Consulta · MCP</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-check-circle" style={{ fontSize: 12 }} /> Trazable</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-chat-circle-text" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>La pregunta llega del asistente</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['Claude', 'ChatGPT', 'Cursor'].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' }}>Teramot la resuelve</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>Con permisos</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {[['Selecciona la data permitida', 'por rol'], ['Aplica las fórmulas versionadas', 'aplicadas'], ['Devuelve el resultado con su fuente', 'trazable']].map(([label, status]) => (
                  <div key={label} 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' }}>{label}</span>
                    <span style={{ fontSize: 10, color: '#6B7280' }}>{status}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid rgba(37,61,229,.18)', borderRadius: 10, padding: '13px 14px', background: '#F7F8FD' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-table" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Respuesta en el chat</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {['Resultado', 'Fórmula', 'Fuente en el ERP'].map((label) => (
                  <div key={label} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 14, padding: '8px 11px', background: '#fff' }}>
                    <span style={{ fontSize: 11, fontWeight: 500, color: '#4B5563' }}>{label}</span>
                    <span style={{ fontSize: 11, 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 consulta queda en el log de auditoría</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy" data-reveal-row style={{ display: 'grid', gap: 22 }}>
          {[
            { n: '01', text: 'El asistente de IA hace la pregunta en lenguaje natural.' },
            { n: '02', text: 'Teramot decide qué data corresponde (respetando permisos), la ejecuta con las fórmulas versionadas, y devuelve el resultado con su fuente.' },
            { n: '03', text: 'El LLM traduce la respuesta a lenguaje humano. Cada consulta queda en el log de auditoría de Teramot.' },
          ].map((step) => (
            <div key={step.n} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <span style={{ flex: 'none', fontSize: 12, fontWeight: 600, letterSpacing: '.14em', color: '#253DE5', paddingTop: 3 }}>{step.n}</span>
              <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.65, color: '#374151' }}>{step.text}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const ClientesMcpSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div className="tm-prod-head">
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Capacidades</span>
        <h2 style={{ marginTop: 16 }}>Clientes MCP soportados</h2>
        <p>Conectás Teramot una vez y preguntás desde el asistente que ya usás todos los días, sin instalar nada del lado del ERP.</p>
      </div>
      <div className="tm-prod-cards">
        {MCP_CLIENTS.map((client) => (
          <article className="tm-prod-card" key={client.label} style={{ display: 'grid', gap: 14, justifyItems: 'center', textAlign: 'center' }}>
            {client.logo ? (
              <div style={{ width: '100%', height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src={client.logo} alt={client.label} style={{ height: 44, width: 'auto' }} />
              </div>
            ) : (
              <div className="tm-prod-card-icon" style={{ margin: '0 auto' }}><i className={`ph ${client.icon}`} /></div>
            )}
            <span style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>{client.label}</span>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const GarantiasSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Lo que no perdés cuando consultás desde una IA externa</h2>
      </div>
      <div className="tm-prod-cards">
        {GARANTIAS_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 DiaADiaSection = () => (
  <section className="tm-prod-section tm-prod-section-wash">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Cómo se usa en el día a día</h2>
      </div>
      <div className="tm-prod-cards">
        {DIA_A_DIA_CARDS.map((card) => (
          <article className="tm-prod-card" key={card.title}>
            <p style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: '#253DE5' }}>{card.kicker}</p>
            <h3 style={{ marginTop: 10 }}>{card.title}</h3>
            <div style={{ marginTop: 18, border: '1px solid #EEF0F4', borderRadius: 10, overflow: 'hidden', background: '#FCFCFE' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '12px 13px', borderBottom: '1px solid #EEF0F4' }}>
                <i className="ph ph-chat-circle-text" style={{ fontSize: 13, color: '#9CA3AF', flex: 'none', transform: 'translateY(1px)' }} />
                <span style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#374151' }}>{card.q}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '12px 13px' }}>
                <i className="ph ph-git-commit" style={{ fontSize: 13, color: '#253DE5', flex: 'none', transform: 'translateY(1px)' }} />
                <span style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#374151' }}>{card.a}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </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>MCP</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>Tu IA de confianza, conectada a tu empresa</h2>
        <p className="tm-prod-cta-sub">30 minutos y te mostramos cómo se ve Claude o ChatGPT respondiendo con tu data real, con trazabilidad completa.</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 TeramotMcpApp = () => {
  const rootRef = useRefMCP(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <McpHero />
      <ProblemaSection />
      <ComoFuncionaSection />
      <ClientesMcpSection />
      <GarantiasSection />
      <DiaADiaSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

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