// CronoDato — Términos y Condiciones (pantalla web)

const TerminosScreen = ({ onClose }) => {
  const [seccionActiva, setSeccionActiva] = React.useState(null);

  const secciones = [
    { id: 'definiciones',    num: 1,  titulo: 'Definiciones' },
    { id: 'objeto',          num: 2,  titulo: 'Objeto del contrato' },
    { id: 'planes',          num: 3,  titulo: 'Planes y condiciones económicas' },
    { id: 'obligaciones',    num: 4,  titulo: 'Obligaciones del usuario' },
    { id: 'responsabilidad', num: 5,  titulo: 'Limitación de responsabilidad' },
    { id: 'datos',           num: 6,  titulo: 'Protección de datos personales' },
    { id: 'propiedad',       num: 7,  titulo: 'Propiedad intelectual' },
    { id: 'modificaciones',  num: 8,  titulo: 'Modificaciones del servicio' },
    { id: 'suspension',      num: 9,  titulo: 'Suspensión y terminación' },
    { id: 'soporte',         num: 10, titulo: 'Soporte y comunicaciones' },
    { id: 'jurisdiccion',    num: 11, titulo: 'Jurisdicción y ley aplicable' },
    { id: 'generales',       num: 12, titulo: 'Disposiciones generales' },
  ];

  React.useEffect(() => {
    window.__showTyC = () => {}; // ya estamos en TyC
    return () => { window.__showTyC = null; };
  }, []);

  const Seccion = ({ id, num, titulo, children }) => (
    <div id={id} style={{ marginBottom: 40, scrollMarginTop: 80 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14, paddingBottom: 10, borderBottom: '2px solid #ECFDF5' }}>
        <div style={{ width: 28, height: 28, borderRadius: 6, background: '#059669', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <span style={{ fontSize: 11, fontWeight: 800, color: 'white' }}>{num}</span>
        </div>
        <h2 style={{ fontSize: 16, fontWeight: 700, color: '#0F172A', margin: 0 }}>{titulo}</h2>
      </div>
      <div>{children}</div>
    </div>
  );

  const P = ({ children, style = {} }) => (
    <p style={{ fontSize: 14, color: '#475569', lineHeight: 1.7, marginBottom: 10, ...style }}>{children}</p>
  );

  const Li = ({ children }) => (
    <div style={{ display: 'flex', gap: 10, marginBottom: 6, paddingLeft: 8 }}>
      <span style={{ color: '#059669', fontWeight: 700, flexShrink: 0, marginTop: 2 }}>•</span>
      <span style={{ fontSize: 14, color: '#475569', lineHeight: 1.6 }}>{children}</span>
    </div>
  );

  const Destaque = ({ children }) => (
    <div style={{ background: '#ECFDF5', border: '1px solid #A7F3D0', borderRadius: 8, padding: '14px 18px', marginBottom: 14, fontSize: 14, color: '#047857', lineHeight: 1.6 }}>
      {children}
    </div>
  );

  const SubTitulo = ({ children }) => (
    <div style={{ fontSize: 13, fontWeight: 700, color: '#0F172A', marginTop: 16, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{children}</div>
  );

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.6)', zIndex: 200, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '20px', overflowY: 'auto' }}>
      <div style={{ background: 'white', borderRadius: 14, width: '100%', maxWidth: 900, boxShadow: '0 32px 64px rgba(0,0,0,0.3)', marginBottom: 20 }}>

        {/* Header */}
        <div style={{ background: '#0F172A', borderRadius: '14px 14px 0 0', padding: '28px 36px', position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
            <CDLogo size={36} showName nameColor="white" />
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 700, color: 'white', margin: '0 0 4px', letterSpacing: '-0.02em' }}>Términos y Condiciones de Uso</h1>
          <p style={{ fontSize: 13, color: '#64748B', margin: 0 }}>Versión 1.0 — Vigente desde mayo de 2025 · República Argentina y Latinoamérica</p>
          <button
            onClick={onClose}
            style={{ position: 'absolute', top: 20, right: 20, background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 8, width: 36, height: 36, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', transition: 'background 150ms' }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.2)'}
            onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
          >
            <i data-lucide="x" style={{ width: 18, height: 18 }}></i>
          </button>
        </div>

        <div style={{ display: 'flex', minHeight: 600 }}>

          {/* Índice lateral */}
          <div style={{ width: 220, flexShrink: 0, borderRight: '1px solid #F1F5F9', padding: '20px 12px', position: 'sticky', top: 0, alignSelf: 'flex-start' }}>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#94A3B8', marginBottom: 10, paddingLeft: 8 }}>Índice</div>
            {secciones.map(s => (
              <a
                key={s.id}
                href={`#${s.id}`}
                onClick={e => { e.preventDefault(); document.getElementById(s.id)?.scrollIntoView({ behavior: 'smooth' }); }}
                style={{
                  display: 'flex', alignItems: 'center', gap: 8, padding: '7px 8px', borderRadius: 6,
                  fontSize: 12, color: '#64748B', textDecoration: 'none', marginBottom: 2,
                  transition: 'background 120ms, color 120ms',
                }}
                onMouseEnter={e => { e.currentTarget.style.background = '#F0FDF4'; e.currentTarget.style.color = '#059669'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#64748B'; }}
              >
                <span style={{ fontSize: 10, fontWeight: 700, color: '#94A3B8', width: 16, flexShrink: 0 }}>{s.num}</span>
                {s.titulo}
              </a>
            ))}
          </div>

          {/* Contenido */}
          <div style={{ flex: 1, padding: '32px 36px', overflowY: 'auto', maxHeight: '75vh' }}>

            {/* Aviso */}
            <Destaque>
              <strong>Aviso importante:</strong> La utilización de la plataforma CronoDato implica la aceptación plena y expresa de los presentes Términos. Si no está de acuerdo con alguna cláusula, deberá abstenerse de utilizar el servicio.
            </Destaque>

            <P>Los presentes Términos y Condiciones constituyen un contrato legalmente vinculante entre el Usuario y <strong>Om Ideas S.A.S.</strong>, sociedad titular de la marca registrada <strong>CronoDato®</strong>, responsable del desarrollo, operación y administración de la plataforma.</P>

            {/* 1 */}
            <Seccion id="definiciones" num={1} titulo="Definiciones">
              <P>A los efectos de los presentes Términos, se entenderá por:</P>
              <Li><strong>«Plataforma» o «Servicio»:</strong> La aplicación web CronoDato® y todos sus componentes, incluyendo el panel de usuario, los sistemas de procesamiento de comprobantes, integraciones con terceros e infraestructura tecnológica.</Li>
              <Li><strong>«Usuario» o «Cliente»:</strong> Toda persona humana o jurídica que acceda, utilice o contrate el Servicio, ya sea directamente o a través de representante autorizado.</Li>
              <Li><strong>«Comprobante Fiscal»:</strong> Toda factura, nota de crédito, nota de débito, remito u otro documento fiscal enviado para su procesamiento.</Li>
              <Li><strong>«Pack Prepago»:</strong> Unidad de contratación consistente en una cantidad determinada de Comprobantes Fiscales a procesar, adquirida mediante pago anticipado.</Li>
              <Li><strong>«Datos del Cliente»:</strong> Toda información, incluidos los Comprobantes Fiscales y los datos extraídos de estos, que el Usuario proporcione a la Plataforma.</Li>
            </Seccion>

            {/* 2 */}
            <Seccion id="objeto" num={2} titulo="Objeto del contrato">
              <P>Se otorga al Usuario una licencia de uso no exclusiva, intransferible y revocable para acceder y utilizar la Plataforma conforme a los presentes Términos, por el período de vigencia del Pack Prepago contratado.</P>
              <P>El Servicio consiste en el procesamiento automatizado mediante inteligencia artificial de Comprobantes Fiscales enviados a través de los canales habilitados (correo electrónico, carga manual u otras integraciones), con extracción de datos estructurados y volcado en los destinos configurados por el Usuario.</P>
              <P><strong>Alcance territorial:</strong> El Servicio está disponible para usuarios en la República Argentina y demás países de América Latina. La adecuación a normativas fiscales de otras jurisdicciones es responsabilidad exclusiva del Usuario.</P>
            </Seccion>

            {/* 3 */}
            <Seccion id="planes" num={3} titulo="Planes y condiciones económicas">
              <P>El Servicio se comercializa exclusivamente bajo modalidad de pago anticipado mediante Packs Prepago. No existe suscripción periódica automática salvo contratación expresa.</P>
              <SubTitulo>Packs disponibles</SubTitulo>
              <div style={{ background: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: 8, overflow: 'hidden', marginBottom: 14 }}>
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
                  <thead>
                    <tr style={{ background: '#059669' }}>
                      {['Pack', 'Facturas', 'Precio (ARS)', 'Costo unitario'].map(h => (
                        <th key={h} style={{ padding: '9px 14px', textAlign: 'left', color: 'white', fontWeight: 600, fontSize: 12 }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ['Pack Inicial', '50', '$5.000', '$100 / factura'],
                      ['Pack Estándar', '200', '$16.000', '$80 / factura'],
                      ['Pack Profesional*', 'Ver condiciones vigentes', 'Ver condiciones vigentes', 'Ver condiciones vigentes'],
                    ].map(([pack, fact, precio, costo], i) => (
                      <tr key={pack} style={{ borderBottom: '1px solid #F1F5F9', background: i % 2 === 0 ? 'white' : '#F8FAFC' }}>
                        <td style={{ padding: '9px 14px', fontWeight: 600, color: '#0F172A' }}>{pack}</td>
                        <td style={{ padding: '9px 14px', color: '#475569' }}>{fact}</td>
                        <td style={{ padding: '9px 14px', color: '#475569', fontFamily: "'DM Mono',monospace" }}>{precio}</td>
                        <td style={{ padding: '9px 14px', color: '#475569', fontFamily: "'DM Mono',monospace" }}>{costo}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <P style={{ fontSize: 12, color: '#94A3B8' }}>(*) El Pack Profesional puede estar sujeto a condiciones promocionales por tiempo limitado, claramente indicadas al momento de la contratación. Nos reservamos el derecho de modificar o dar por concluida cualquier promoción sin previo aviso.</P>
              <P>Los precios se expresan en Pesos Argentinos (ARS) e impuestos aplicables son a cargo del Usuario. Los pagos se procesan a través de <strong>Mercado Pago</strong>. Los créditos de los Packs no tienen fecha de vencimiento mientras la cuenta esté activa.</P>
            </Seccion>

            {/* 4 */}
            <Seccion id="obligaciones" num={4} titulo="Obligaciones del usuario">
              <P>El Usuario se compromete a:</P>
              <Li>Proporcionar información veraz, completa y actualizada en el registro y durante la vigencia del Servicio.</Li>
              <Li>Utilizar la Plataforma exclusivamente para el procesamiento de comprobantes propios o de clientes con autorización expresa.</Li>
              <Li>Mantener la confidencialidad de sus credenciales de acceso, siendo único responsable de toda actividad bajo su cuenta.</Li>
              <Li>Verificar la exactitud de los datos extraídos por la inteligencia artificial antes de su utilización en declaraciones juradas, sistemas contables o cualquier fin oficial.</Li>
              <Li>No utilizar el Servicio para el procesamiento de comprobantes apócrifos, adulterados o que no cumplan con los requisitos legales vigentes.</Li>
              <Li>No intentar acceder a sistemas o áreas de la Plataforma para los que no cuente con autorización expresa.</Li>
              <Li>No realizar ingeniería inversa, descompilar ni intentar obtener el código fuente de la Plataforma.</Li>
              <Li>Notificar de inmediato ante cualquier uso no autorizado de su cuenta o vulneración de seguridad.</Li>
            </Seccion>

            {/* 5 */}
            <Seccion id="responsabilidad" num={5} titulo="Limitación de responsabilidad">
              <Destaque>
                La extracción de datos mediante inteligencia artificial es un proceso automatizado sujeto a márgenes de error inherentes a la tecnología. <strong>No se garantiza la exactitud absoluta</strong> de los datos extraídos. El Usuario es el único responsable de verificar la información antes de su utilización.
              </Destaque>
              <P>No se asume responsabilidad por:</P>
              <Li>Errores u omisiones en los datos extraídos por el sistema de inteligencia artificial.</Li>
              <Li>Sanciones, multas o consecuencias fiscales derivadas del uso de información procesada sin la debida verificación.</Li>
              <Li>Interrupciones del servicio por mantenimiento, fuerza mayor o fallos de terceros proveedores.</Li>
              <Li>Pérdida de datos ocasionada por causas no directamente imputables al Servicio.</Li>
              <Li>La exactitud o disponibilidad de servicios de terceros integrados (Google, Dropbox, Mercado Pago, entre otros).</Li>
              <P>La responsabilidad total, por cualquier concepto, no podrá exceder el monto abonado durante los tres (3) meses anteriores al evento generador de responsabilidad.</P>
            </Seccion>

            {/* 6 */}
            <Seccion id="datos" num={6} titulo="Protección de datos personales">
              <P>Se cumple con la Ley N° 25.326 de Protección de los Datos Personales de la República Argentina y normativa equivalente aplicable en los países latinoamericanos donde opera el Servicio.</P>
              <SubTitulo>Datos recopilados</SubTitulo>
              <Li><strong>Datos de registro:</strong> nombre, razón social, correo electrónico y contraseña, para gestionar el acceso al Servicio.</Li>
              <Li><strong>Comprobantes Fiscales:</strong> tratados exclusivamente para prestar el servicio contratado.</Li>
              <Li><strong>Datos de uso:</strong> información técnica sobre la utilización de la Plataforma, empleada para mejorar el Servicio.</Li>
              <SubTitulo>Almacenamiento y cesión</SubTitulo>
              <P>Los Comprobantes Fiscales se almacenan durante el período de retención contratado. Se implementan medidas técnicas y organizativas para proteger la información. <strong>No se venden, alquilan ni ceden datos del Cliente a terceros con fines comerciales</strong>. La información solo se comparte con proveedores tecnológicos estrictamente necesarios para la prestación del Servicio, bajo acuerdos de confidencialidad.</P>
            </Seccion>

            {/* 7 */}
            <Seccion id="propiedad" num={7} titulo="Propiedad intelectual">
              <P>La marca <strong>CronoDato®</strong>, sus logotipos, diseños, interfaz gráfica, algoritmos, código fuente y toda propiedad intelectual asociada se encuentran protegidos por la Ley N° 11.723 de Propiedad Intelectual y la Ley N° 22.362 de Marcas y Designaciones de la República Argentina, así como los tratados internacionales aplicables.</P>
              <P>Se prohíbe expresamente cualquier reproducción, distribución, modificación o creación de obras derivadas sin autorización escrita previa. La licencia de uso otorgada no implica transferencia alguna de derechos de propiedad intelectual.</P>
            </Seccion>

            {/* 8 */}
            <Seccion id="modificaciones" num={8} titulo="Modificaciones del servicio">
              <P>Nos reservamos el derecho de modificar, suspender o discontinuar el Servicio en cualquier momento, incluyendo la incorporación o eliminación de funcionalidades.</P>
              <P>Las modificaciones sustanciales a los presentes Términos serán notificadas con una antelación mínima de <strong>quince (15) días corridos</strong> a través del correo electrónico registrado y/o mediante aviso en la Plataforma. El uso continuado del Servicio implicará aceptación de las modificaciones.</P>
            </Seccion>

            {/* 9 */}
            <Seccion id="suspension" num={9} titulo="Suspensión y terminación">
              <P>Se podrá suspender o dar de baja la cuenta del Usuario, sin previo aviso, ante:</P>
              <Li>Incumplimiento de cualquier disposición de los presentes Términos.</Li>
              <Li>Uso fraudulento, abusivo o contrario a la ley del Servicio.</Li>
              <Li>Falta de pago o contracargo bancario.</Li>
              <Li>Actividad que pueda causar daño a terceros o al Servicio.</Li>
              <Li>Orden judicial o requerimiento de autoridad competente.</Li>
              <P>El Usuario podrá solicitar la baja de su cuenta en cualquier momento a través de <strong>info@cronodato.com</strong>. Los créditos no utilizados al momento de la baja voluntaria no serán reembolsados, salvo acuerdo expreso.</P>
            </Seccion>

            {/* 10 */}
            <Seccion id="soporte" num={10} titulo="Soporte y comunicaciones">
              <P>El soporte técnico y la atención al usuario se canalizan exclusivamente a través de <strong>info@cronodato.com</strong>. Las consultas serán atendidas en días hábiles en un plazo máximo de cuarenta y ocho (48) horas.</P>
              <P>Todas las comunicaciones oficiales se realizarán a través del correo electrónico registrado en la cuenta. El Usuario es responsable de mantenerlo actualizado.</P>
            </Seccion>

            {/* 11 */}
            <Seccion id="jurisdiccion" num={11} titulo="Jurisdicción y ley aplicable">
              <P>Los presentes Términos se rigen por las leyes de la <strong>República Argentina</strong>. Cualquier controversia será sometida a la jurisdicción exclusiva de los <strong>Tribunales Ordinarios de la Ciudad Autónoma de Buenos Aires</strong>, con renuncia expresa del Usuario a cualquier otro fuero.</P>
              <P>Para usuarios fuera de Argentina, los presentes Términos se aplicarán en todo lo que no contradiga la normativa de orden público de la jurisdicción del Usuario.</P>
            </Seccion>

            {/* 12 */}
            <Seccion id="generales" num={12} titulo="Disposiciones generales">
              <Li><strong>Divisibilidad:</strong> Si alguna disposición fuere declarada nula o inaplicable, ello no afectará la validez de las restantes.</Li>
              <Li><strong>No renuncia:</strong> El ejercicio tardío o la falta de ejercicio de cualquier derecho no implicará renuncia al mismo.</Li>
              <Li><strong>Integralidad:</strong> Los presentes Términos, junto con la Política de Privacidad, constituyen el acuerdo íntegro entre las partes.</Li>
              <Li><strong>Cesión:</strong> El Usuario no podrá ceder sus derechos u obligaciones sin consentimiento previo escrito.</Li>
            </Seccion>

            {/* Pie */}
            <div style={{ marginTop: 40, padding: '20px 24px', background: '#F8FAFC', border: '1px solid #E2E8F0', borderRadius: 10, textAlign: 'center' }}>
              <div style={{ fontSize: 13, color: '#64748B', marginBottom: 4 }}>
                Para consultas: <strong style={{ color: '#059669' }}>info@cronodato.com</strong>
              </div>
              <div style={{ fontSize: 12, color: '#94A3B8' }}>
                © {new Date().getFullYear()} Om Ideas S.A.S. — CronoDato® es una marca registrada. Todos los derechos reservados.
              </div>
            </div>

          </div>
        </div>

        {/* Footer con botón cerrar */}
        <div style={{ padding: '16px 36px', borderTop: '1px solid #E2E8F0', display: 'flex', justifyContent: 'flex-end' }}>
          <button
            onClick={onClose}
            style={{ fontFamily: "'DM Sans',sans-serif", fontSize: 14, fontWeight: 600, padding: '10px 28px', background: '#059669', color: 'white', border: 'none', borderRadius: 8, cursor: 'pointer' }}
          >
            Entendido, cerrar
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TerminosScreen });