/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* gobernanza-trazabilidad.jsx — landing "Producto" para
   /gobernanza-trazabilidad (redesign 2026-09, Sprint 3). Textos
   definitivos del handoff: no reescribir, salvo un desvío señalado al
   usuario: el párrafo de "Cumplí antes de que te pregunten" abría con
   "SOC 2 Type II auditado (2026)" — se corrigió a la única redacción de
   compliance correcta sitewide (SOC 2 Type I certificado, Type II en
   curso), igual que en seguridad.jsx y mcp.jsx, para no introducir
   un claim de compliance incorrecto en una página nueva. 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 RESUELVE_CARDS = [
  { icon: 'ph-clock-counter-clockwise', title: 'Log de cambios completo', body: 'Cada modificación con usuario, momento, motivo y valor anterior. Sin excepciones.' },
  { icon: 'ph-stack', title: 'Versiones de todo', body: 'Podés ver cualquier reporte tal como estaba hace un mes, hace un trimestre, hace un año.' },
  { icon: 'ph-function', title: 'Fórmulas visibles', body: 'Cada número muestra su fórmula y las fuentes de sus componentes. Click y bajás al ERP.' },
  { icon: 'ph-lock-key', title: 'Permisos por rol', body: 'Control granular por área, entidad, cuenta. Quién ve qué, quién puede modificar qué.' },
  { icon: 'ph-chat-text', title: 'Motivos requeridos', body: 'Un ajuste manual no se aplica sin explicación registrada.' },
  { icon: 'ph-export', title: 'Export auditor-friendly', body: 'Todo el log exportable a Excel, CSV o PDF con un click.' },
];

const REGISTRO_CHECKLIST = [
  'Log inalterable con usuario, momento y motivo',
  'Versiones publicadas accesibles para comparar',
  'Permisos por área, entidad y cuenta',
  'Segregación entre quien carga y quien aprueba',
  'Export del log para auditoría interna y externa',
];

const FAQ_ITEMS = [
  { q: '¿Cuánto tiempo se guarda el histórico?', a: 'Todo el histórico queda disponible mientras tu cuenta esté activa. <b>No se resume ni se comprime</b>: cada versión conserva su detalle línea por línea.' },
  { q: '¿El log de cambios se puede exportar para auditoría?', a: 'Sí, a <b>Excel, CSV o PDF</b>, filtrado por período, entidad o usuario. Es el formato en el que el auditor lo pide.' },
  { q: '¿Hay control de aprobaciones para ajustes?', a: 'Sí. Cada ajuste puede requerir motivo y <b>aprobación de un responsable</b> antes de impactar el reporte publicado.' },
  { q: '¿Es compatible con SOX?', a: 'Teramot cubre los controles que se auditan sobre el proceso: permisos por rol, motivo obligatorio, segregación entre quien carga y quien aprueba, y log inalterable. <b>La certificación es de tu proceso; la evidencia la da la herramienta.</b>' },
];

const { useEffect: useEffectGT, useRef: useRefGT } = React;

/* Scroll reveal — mismo hook que el resto de las páginas de Producto. */
const useScrollReveal = (rootRef) => {
  useEffectGT(() => {
    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 GobernanzaHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="gobernanza-trazabilidad" />
      <div className="tm-prod-hero-grid">
        <div className="tm-prod-hero-copy">
          <p className="tm-prod-hero-eyebrow">Auditoría financiera · Permisos por rol · Log completo</p>
          <h1>Gobernanza y trazabilidad de datos financieros: cada número con <span>origen, fórmula y responsable</span>.</h1>
          <p className="tm-prod-hero-sub">Gobernanza de datos financieros diseñada para pasar auditoría. Permisos por rol, log de cambios, versiones. Como te lo pide el auditor.</p>
          <div className="tm-prod-hero-actions">
            <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-white">Pedí tu demo <i className="ph ph-arrow-right" /></a>
            <a href={c.links.app} className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-ghost-light"><i className="ph ph-play-circle" style={{ fontSize: 21 }} /> Comenzá Gratis</a>
          </div>
        </div>
        <div className="tm-prod-hero-art">
          <div className="tm-prod-hero-art-glow" />
          <div className="tm-prod-hero-mockup" style={{ position: 'relative', zIndex: 1, width: '100%', background: 'rgba(255,255,255,.96)', border: '1px solid rgba(255,255,255,.55)', borderRadius: 16, padding: 18, boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }} role="img" aria-label="Panel de gobernanza y trazabilidad en Teramot">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 9999, background: '#253DE5', color: '#fff', fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap' }}><i className="ph-bold ph-shield-check" style={{ fontSize: 12 }} /> Gobernanza y trazabilidad</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-clock-counter-clockwise', label: 'Log de cambios', status: 'Completo' },
                { icon: 'ph-lock-key', label: 'Permisos por rol', status: 'Activos' },
                { icon: 'ph-chat-text', label: 'Motivo del ajuste', status: 'Obligatorio', neutral: true },
                { icon: 'ph-export', label: 'Export para auditoría', status: 'Listo' },
              ].map((row, i, arr) => (
                <div key={row.label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '14px 16px', borderBottom: i < arr.length - 1 ? '1px solid rgba(11,15,20,.05)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}><i className={`ph ${row.icon}`} style={{ fontSize: 15, color: '#253DE5', flex: 'none' }} /><span style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-.005em', color: '#0B0F14' }}>{row.label}</span></div>
                  {row.neutral ? (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', padding: '4px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', background: '#fff', fontSize: 10.5, fontWeight: 600, color: '#4B5563' }}>{row.status}</span>
                  ) : (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.22)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-check" style={{ fontSize: 11 }} /> {row.status}</span>
                  )}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: 80, padding: '18px 176px 0 4px' }}>
              <p style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#4B5563' }}>Cada cambio queda con usuario, momento y motivo</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' }}>Log · Marzo</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9 }}>
              <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 9999, background: '#263185', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ph-bold ph-check" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Trazabilidad completa</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' }}>Usuario, momento y motivo</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>&quot;¿De dónde salió este número?&quot; no debería ser un fin de semana de trabajo</h2>
        <p>El auditor pide el origen de un ajuste hecho hace cuatro meses. El analista que lo hizo ya no está. La planilla se guardó encima. Nadie recuerda el motivo. Empieza la reconstrucción manual — dos días de laburo para responder una pregunta que debería llevar 30 segundos.</p>
      </div>
    </div>
  </section>
);

const ComoLoResuelveSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-head">
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Cómo lo resuelve</span>
        <h2 style={{ marginTop: 16 }}>Todo lo que Teramot hace, queda registrado</h2>
      </div>
      <div className="tm-prod-cards">
        {RESUELVE_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 RegistroSection = () => (
  <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' }}>Cumplí antes de que te pregunten</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' }}>Log · Marzo</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 }} /> Auditable</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-identification-card" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Cada cambio registra</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['Usuario', 'Momento', 'Motivo'].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-clock-counter-clockwise" style={{ fontSize: 14, color: '#253DE5' }} />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Cambios del período</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>Con log</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {[['Reclasificación de gastos indirectos', 'hace 2 h'], ['Tipo de cambio de cierre', 'hace 1 d'], ['Ajuste de provisión', 'hace 3 d']].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-stack" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Versiones del reporte</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['Marzo · publicado', false], ['Febrero · publicado', false], ['Enero · publicado', 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 y su responsable</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>SOC 2 Type I certificado, Type II en curso. Compatible con requerimientos de auditoría interna, revisiones externas y controles de compliance (SOX-like, NIIF, US GAAP). Cada reporte publicado guarda quién lo armó, con qué datos y bajo qué reglas, de modo que la respuesta al auditor sale de la herramienta y no de la memoria del equipo.</p>
          <div className="tm-prod-checklist">
            {REGISTRO_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 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>gobernanza y trazabilidad</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>Auditá en 30 segundos, no en dos días</h2>
        <p className="tm-prod-cta-sub">30 minutos con nuestro equipo y te mostramos cómo se ve la trazabilidad completa en Teramot.</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 GobernanzaTrazabilidadApp = () => {
  const rootRef = useRefGT(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <GobernanzaHero />
      <ProblemaSection />
      <ComoLoResuelveSection />
      <RegistroSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

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