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 } },
};

const articulos = [
  {
    categoria: 'ARQUITECTURA',
    titulo: 'Por qué el software empresarial fracasa antes de llegar a producción',
    desc: 'La mayoría de los proyectos de software empresarial no fallan en el código, fallan en el diseño. Exploramos las causas estructurales más comunes y cómo evitarlas desde el inicio.',
    fecha: 'Próximamente',
    img: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80',
  },
  {
    categoria: 'INTEGRACIONES',
    titulo: 'ERP vs. sistema a medida: cuándo tiene sentido cada uno',
    desc: 'La respuesta no es simple. Depende del tamaño de la operación, la madurez del proceso y la capacidad técnica interna. Aquí el marco de decisión que usamos con nuestros clientes.',
    fecha: 'Próximamente',
    img: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80',
  },
  {
    categoria: 'DATOS',
    titulo: 'Instrumentación operacional: medir lo que importa',
    desc: 'Tener datos no es lo mismo que tener visibilidad. La diferencia está en qué se mide, cómo se almacena y cuándo se activa una alerta. Una guía práctica para equipos de operaciones.',
    fecha: 'Próximamente',
    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80',
  },
];

export const Blog = () => {
  useEffect(() => {
    document.title = 'Blog | 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}>
            RECURSOS
          </motion.p>
          <motion.h1 className="text-display" style={{ color: '#0a0a0a', maxWidth: '16ch' }}
            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] } } }}>
            Pensamiento de ingeniería.
          </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] } } }}>
            Perspectivas sobre arquitectura de software, sistemas empresariales y decisiones técnicas
            que impactan la operación real de los negocios.
          </motion.p>
        </div>
      </section>

      {/* Artículos */}
      <section
        style={{
          background: '#f5f5f3',
          borderBottom: '1px solid #dddbd5',
          padding: '100px 0',
          minHeight: '60vh',
        }}
        className="px-8 md:px-14"
      >
        <div className="mx-auto max-w-7xl">
          <motion.p className="text-mono-label mb-12"
            style={{ color: '#e50914', letterSpacing: '0.18em' }}
            initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeUp}>
            PRÓXIMOS ARTÍCULOS
          </motion.p>
          <div className="grid gap-6 md:grid-cols-3">
            {articulos.map((art, i) => (
              <motion.article key={i}
                initial="hidden" whileInView="visible" viewport={{ once: true }}
                variants={{ hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: i * 0.1, ease: [0.22, 1, 0.36, 1] } } }}
                style={{
                  background: '#ffffff',
                  border: '1px solid #dddbd5',
                  borderRadius: 4,
                  overflow: 'hidden',
                  display: 'flex',
                  flexDirection: 'column',
                  opacity: 0.82,
                }}
              >
                {/* Thumbnail */}
                <div style={{ aspectRatio: '16/9', background: '#f0efec', overflow: 'hidden', position: 'relative' }}>
                  <img
                    src={art.img}
                    alt={art.titulo}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
                  />
                  {/* Categoria badge encima */}
                  <span
                    style={{
                      position: 'absolute', top: 14, left: 14,
                      background: '#e50914', color: '#fff',
                      fontFamily: 'monospace', fontSize: 10, letterSpacing: '0.12em',
                      padding: '3px 8px', borderRadius: 2,
                    }}
                  >{art.categoria}</span>
                </div>
                {/* Contenido */}
                <div style={{ padding: '28px 28px 24px', display: 'flex', flexDirection: 'column', gap: 12, flexGrow: 1 }}>
                  <h2 className="font-display font-bold text-lg leading-snug" style={{ color: '#0a0a0a' }}>
                    {art.titulo}
                  </h2>
                  <p className="text-sm leading-relaxed" style={{ color: '#6a6866', flexGrow: 1 }}>
                    {art.desc}
                  </p>
                  <p className="text-mono-label" style={{ color: '#aaa8a4', letterSpacing: '0.12em', marginTop: 4 }}>
                    {art.fecha}
                  </p>
                </div>
              </motion.article>
            ))}
          </div>

          <motion.div
            className="mt-20 text-center"
            initial="hidden" whileInView="visible" viewport={{ once: true }}
            variants={{ hidden: { opacity: 0 }, visible: { opacity: 1, transition: { duration: 0.6, delay: 0.3 } } }}
          >
            <p className="text-sm" style={{ color: '#aaa8a4' }}>
              El blog está en preparación. Los artículos llegarán pronto.
            </p>
          </motion.div>
        </div>
      </section>

    </main>
  );
};