import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import erpImg from "../assets/erp.png";
import crmImg from "../assets/crm.png";

const Solutions = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.3,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.8, ease: "easeOut" },
    },
  };

  return (
    <section
      className="py-24 bg-brand-dark relative overflow-hidden"
      id="soluciones"
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
        <div className="text-center max-w-3xl mx-auto mb-20">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="inline-block mb-4 px-4 py-1.5 rounded-full border border-accent/30 bg-accent/10 text-accent text-sm font-medium tracking-wide"
          >
            PRODUCTOS PROPIOS
          </motion.div>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="text-4xl md:text-5xl font-bold mb-6 text-white tracking-tight"
          >
            Soluciones TESS
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-lg text-brand-light/80 font-light leading-relaxed"
          >
            Desarrollamos herramientas potentes para digitalizar, centralizar y
            potenciar la gestión completa de tu negocio.
          </motion.p>
        </div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="space-y-32"
        >
          {/* TESS-ERP Section */}
          <motion.div
            variants={itemVariants}
            className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20"
          >
            <div className="w-full lg:w-1/2 space-y-8">
              <div className="flex items-center gap-4 mb-2">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondaccent flex items-center justify-center shadow-lg shadow-secondaccent/30 text-white font-bold text-xl">
                  E
                </div>
                <h3 className="text-3xl md:text-4xl font-bold text-white tracking-tight">
                  TESS-
                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent to-secondaccent">
                    ERP
                  </span>
                </h3>
              </div>

              <p className="text-brand-light text-lg leading-relaxed font-light">
                Un sistema de planificación de recursos empresariales diseñado
                para conectar todas las áreas de tu organización. Controla
                inventarios, finanzas, recursos humanos y operaciones
                comerciales desde una única plataforma inteligente.
              </p>

              <ul className="space-y-4">
                {[
                  "Control centralizado de almacenes e inventario multisucursal.",
                  "Automatización de facturación y contabilidad en tiempo real.",
                  "Módulos escalables según el crecimiento de tu empresa.",
                  "Reportes avanzados e inteligencia de negocios (BI).",
                ].map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <svg
                      className="w-6 h-6 text-accent mt-0.5 flex-shrink-0"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                    <span className="text-brand-light/80">{feature}</span>
                  </li>
                ))}
              </ul>

              <div className="pt-4">
                <button
                  onClick={() =>
                    document
                      .getElementById("contacto")
                      .scrollIntoView({ behavior: "smooth" })
                  }
                  className="px-8 py-3.5 rounded-full bg-secondaccent hover:bg-secondaccent/80 text-white font-medium transition-all duration-300 shadow-[0_0_20px_rgba(12,192,223,0.3)] hover:shadow-[0_0_30px_rgba(12,192,223,0.5)] transform hover:-translate-y-1 inline-flex items-center gap-2"
                >
                  Solicitar Demo
                  <svg
                    className="w-5 h-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M14 5l7 7m0 0l-7 7m7-7H3"
                    />
                  </svg>
                </button>
              </div>
            </div>

            <div className="w-full lg:w-1/2 relative group perspective-1000">
              <div className="absolute inset-0 bg-gradient-to-r from-secondaccent/20 to-accent/20 rounded-2xl transform rotate-3 scale-105 opacity-50 transition-transform duration-500 group-hover:rotate-6"></div>
              <div className="relative rounded-2xl overflow-hidden border border-slate-700/50 bg-slate-800 shadow-2xl transition-transform duration-500 group-hover:scale-[1.02]">
                {/* Mockup Window UI */}
                <div className="h-8 bg-slate-900 border-b border-slate-700 flex items-center px-4 gap-2">
                  <div className="w-3 h-3 rounded-full bg-red-400"></div>
                  <div className="w-3 h-3 rounded-full bg-amber-400"></div>
                  <div className="w-3 h-3 rounded-full bg-green-400"></div>
                </div>
                {/* Imagen del ERP */}
                <div 
                  className="aspect-[4/3] relative overflow-hidden bg-slate-900 cursor-pointer group"
                  onClick={() => setSelectedImage(erpImg)}
                >
                  <img src={erpImg} alt="Dashboard de TESS-ERP" className="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105" />
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <span className="text-white bg-black/50 px-4 py-2 rounded-full backdrop-blur-sm flex items-center gap-2">
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" /></svg>
                      Ver detalle
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>

          {/* TESS-CRM Section */}
          <motion.div
            variants={itemVariants}
            className="flex flex-col lg:flex-row-reverse items-center gap-12 lg:gap-20"
          >
            <div className="w-full lg:w-1/2 space-y-8">
              <div className="flex items-center gap-4 mb-2">
                <div className="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center shadow-lg shadow-accent/20 text-accent font-bold text-xl border border-accent/30">
                  C
                </div>
                <h3 className="text-3xl md:text-4xl font-bold text-white tracking-tight">
                  TESS-
                  <span className="text-accent">CRM</span>
                </h3>
              </div>

              <p className="text-slate-300 text-lg leading-relaxed font-light">
                Maximiza tus conversiones y fideliza a tus clientes. Nuestro
                gestor de relaciones te permite organizar embudos de ventas,
                automatizar seguimientos y medir el rendimiento de tu equipo
                comercial.
              </p>

              <ul className="space-y-4">
                {[
                  "Gestión visual de embudos de venta (Pipelines).",
                  "Historial unificado de comunicaciones por cliente.",
                  "Seguimiento de tareas, reuniones y alertas automatizadas.",
                  "Integración con correo electrónico y campañas de marketing.",
                ].map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <svg
                      className="w-6 h-6 text-secondaccent mt-0.5 flex-shrink-0"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                    <span className="text-brand-light/80">{feature}</span>
                  </li>
                ))}
              </ul>

              <div className="pt-4">
                <button
                  onClick={() =>
                    document
                      .getElementById("contacto")
                      .scrollIntoView({ behavior: "smooth" })
                  }
                  className="px-8 py-3.5 rounded-full bg-accent hover:bg-accent/80 text-primary font-bold transition-all duration-300 shadow-[0_0_20px_rgba(100,255,218,0.3)] hover:shadow-[0_0_30px_rgba(100,255,218,0.5)] transform hover:-translate-y-1 inline-flex items-center gap-2"
                >
                  Descubrir CRM
                  <svg
                    className="w-5 h-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M14 5l7 7m0 0l-7 7m7-7H3"
                    />
                  </svg>
                </button>
              </div>
            </div>

            <div className="w-full lg:w-1/2 relative group perspective-1000">
              <div className="absolute inset-0 bg-accent/10 rounded-2xl transform -rotate-3 scale-105 opacity-50 transition-transform duration-500 group-hover:-rotate-6"></div>
              <div className="relative rounded-2xl overflow-hidden border border-slate-700/50 bg-slate-800 shadow-2xl transition-transform duration-500 group-hover:scale-[1.02]">
                {/* Mockup Window UI */}
                <div className="h-8 bg-slate-900 border-b border-slate-700 flex items-center px-4 gap-2">
                  <div className="w-3 h-3 rounded-full bg-red-400"></div>
                  <div className="w-3 h-3 rounded-full bg-amber-400"></div>
                  <div className="w-3 h-3 rounded-full bg-green-400"></div>
                </div>
                {/* Imagen del CRM */}
                <div 
                  className="aspect-[4/3] relative overflow-hidden bg-slate-900 cursor-pointer group"
                  onClick={() => setSelectedImage(crmImg)}
                >
                  <img src={crmImg} alt="Pipeline de Ventas en TESS-CRM" className="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105" />
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <span className="text-white bg-black/50 px-4 py-2 rounded-full backdrop-blur-sm flex items-center gap-2">
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" /></svg>
                      Ver detalle
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </div>

      {/* Modal Visor de Imágenes */}
      <AnimatePresence>
        {selectedImage && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={() => setSelectedImage(null)}
            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 md:p-8"
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              onClick={(e) => e.stopPropagation()}
              className="relative w-full max-w-6xl max-h-[90vh] bg-slate-900 rounded-2xl overflow-hidden shadow-2xl border border-white/10 flex flex-col"
            >
              <div className="flex items-center justify-between p-4 border-b border-white/10 bg-black/20">
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <div className="w-3 h-3 rounded-full bg-amber-500"></div>
                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
                </div>
                <button
                  onClick={() => setSelectedImage(null)}
                  className="text-white/70 hover:text-white transition-colors"
                  aria-label="Cerrar"
                >
                  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
              <div className="flex-1 overflow-auto bg-slate-900 flex items-center justify-center p-4">
                <img 
                  src={selectedImage} 
                  alt="Vista detallada" 
                  className="w-full h-auto max-h-full object-contain rounded"
                />
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
};

export default Solutions;
