import { useEffect } from 'react';
import { motion } from 'framer-motion';

const fadeUp = {
  hidden: { opacity: 0, y: 28 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as const } },
};

export const Productos = () => {
  useEffect(() => {
    document.title = 'Productos | Rynext Technologies';
  }, []);

  return (
    <main id="main-content">

      {/* Hero */}
      <section
        style={{
          background: '#ffffff',
          borderBottom: '1px solid #dddbd5',
          paddingTop: '160px',
          paddingBottom: '100px',
        }}
        className="px-8 md:px-14"
      >
        <div className="mx-auto max-w-7xl">
          <motion.p className="text-mono-label mb-6"
            style={{ color: '#e50914', letterSpacing: '0.18em' }}
            initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp}>
            PRODUCTOS
          </motion.p>
          <motion.h1 className="text-display" style={{ color: '#0a0a0a', maxWidth: '18ch' }}
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={{ hidden: { opacity: 0, y: 32 }, visible: { opacity: 1, y: 0, transition: { duration: 0.7, delay: 0.1, ease: [0.22, 1, 0.36, 1] } } }}>
            Software diseñado para operar.
          </motion.h1>
          <motion.p className="mt-8 text-lg leading-relaxed"
            style={{ color: '#6a6866', maxWidth: '52ch' }}
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] } } }}>
            Módulos y licencias listos para implementar, respaldados por la misma ingeniería
            con la que construimos sistemas a medida.
          </motion.p>
        </div>
      </section>

      {/* Producto — comentado hasta tener contenido real */}
      {/* <section
        style={{
          background: '#f5f5f3',
          borderBottom: '1px solid #dddbd5',
          padding: '100px 0',
        }}
        className="px-8 md:px-14"
      >
        <div className="mx-auto max-w-7xl">
          <motion.div
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } } }}
            style={{
              background: '#ffffff',
              border: '1px solid #dddbd5',
              borderRadius: 4,
              padding: '60px 56px',
              display: 'flex',
              flexDirection: 'column',
              gap: 32,
              maxWidth: 720,
            }}
          >
            <div style={{
              width: 72, height: 72,
              background: '#f0efec',
              border: '1.5px dashed #c8c5bf',
              borderRadius: 8,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c8c5bf" strokeWidth="1.5">
                <rect x="3" y="3" width="18" height="18" rx="2"/>
                <circle cx="8.5" cy="8.5" r="1.5"/>
                <polyline points="21 15 16 10 5 21"/>
              </svg>
            </div>
            <div>
              <p className="text-mono-label mb-2" style={{ color: '#aaa8a4', letterSpacing: '0.14em' }}>NOMBRE DEL PRODUCTO</p>
              <h2 className="text-headline" style={{ color: '#0a0a0a' }}>Tu producto aquí</h2>
            </div>
            <p className="text-base leading-relaxed" style={{ color: '#6a6866', maxWidth: '48ch' }}>
              Descripción del producto. Qué resuelve, para quién está diseñado y qué lo hace diferente.
              Agrega aquí los detalles que quieres que el cliente vea antes de solicitar una demo.
            </p>
            <div>
              <a
                href="mailto:contacto@rynext.com.mx?subject=Solicitud%20de%20demo"
                className="inline-flex items-center gap-2 px-7 py-3.5 text-sm font-bold text-white transition hover:opacity-90"
                style={{ background: '#e50914', borderRadius: 3 }}
              >
                Solicitar demo
              </a>
            </div>
          </motion.div>
        </div>
      </section> */}

    </main>
  );
};