import React, { useState } from "react";
import Marquee from "react-fast-marquee";
import { motion, AnimatePresence } from "framer-motion";

import logo1 from "../assets/cl-1.png";
import logo2 from "../assets/cl-2.png";
import logo3 from "../assets/cl-3.jpeg";
import logo5 from "../assets/cl-5.png";

const successCases = [
  {
    id: 1,
    name: "Hazard",
    logo: logo1,
    challenge:
      "Necesidad de gestión delegada para infraestructura TI, hosting y correos empresariales.",
    solution:
      "Soporte TI integral y administración completa de servidores y correos TESS.",
    result:
      "Operación continua sin interrupciones técnicas y comunicación empresarial estable.",
  },
  {
    id: 2,
    name: "Vital Care",
    logo: logo2,
    challenge:
      "Requerimiento de una aplicación médica especializada y soporte técnico concurrente para equipos.",
    solution:
      "Desarrollo de App a la medida para doctores + Soporte TI y Hosting TESS.",
    result:
      "Optimización de consultas médicas y resolución inmediata de incidencias en equipos de cómputo.",
  },
  {
    id: 3,
    name: "Clínicas de la Frontera",
    logo: logo3,
    challenge:
      "Gestión ineficiente de infraestructura tecnológica y comunicación.",
    solution: "Póliza de soporte TI y migración a Hosting y Correo TESS.",
    result:
      "Modernización tecnológica y alta disponibilidad en todos sus canales de comunicación.",
  },
  {
    id: 5,
    name: "TRIMAPE",
    logo: logo5,
    challenge:
      "Control descentralizado en el mantenimiento de equipos industriales.",
    solution:
      "Desarrollo e implementación de TESS-ERP adaptado a sus procesos industriales.",
    result:
      "Trazabilidad total en mantenimientos y mejora sustancial en la logística operativa.",
  },
];

const Clients = () => {
  const logos = [
    { name: "Hazard", src: logo1 },
    { name: "Vital Care", src: logo2 },
    { name: "Clínicas de la Frontera", src: logo3 },
    { name: "TRIMAPE", src: logo5 },
  ];

  const [activeCase, setActiveCase] = useState(successCases[0].id);

  return (
    <section
      className="py-20 md:py-24 bg-brand-dark bg-gradient-to-b from-[#020617] to-[#000000] overflow-hidden"
      id="clientes"
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center mb-10 md:mb-12">
        <h2
          className="text-secondary tracking-tight text-white mb-3 text-3xl font-bold md:text-4xl"
          id="services-subtitle"
        >
          Nuestros Casos de Éxito
        </h2>
        <p className="max-w-2xl mx-auto text-brand-light text-base md:text-lg leading-relaxed font-light text-justify md:text-center mt-4">
          Empresas de distintos sectores confían en TESS para resolver sus retos
          tecnológicos y acelerar su crecimiento.
        </p>
      </div>

      {/* Carrusel usando React Fast Marquee */}
      <div className="max-w-7xl mx-auto px-6 lg:px-8 mb-24 relative">
        {/* Usamos gradientColors usando formato rgb para overlayar en el fondo oscuro (#020617) */}
        <Marquee
          gradient={true}
          gradientColor={[2, 6, 23]}
          gradientWidth={100}
          speed={40}
          pauseOnHover={true}
          autoFill={true}
          className="flex items-center"
        >
          {logos.map((client, index) => (
            <div
              key={index}
              className="flex-none mx-14"
            >
              <img
                src={client.src}
                alt={client.name}
                className="h-11 md:h-12 w-auto object-contain"
              />
            </div>
          ))}
        </Marquee>
      </div>

      {/* Sección Interactiva de Casos de Éxito */}
      <div className="max-w-7xl mx-auto px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
          {/* Lista de Selección */}
          <div className="col-span-1 lg:col-span-4 flex flex-col gap-3">
            {successCases.map((story) => (
              <button
                key={story.id}
                onClick={() => setActiveCase(story.id)}
                className={`text-left p-5 rounded-xl transition-all duration-300 border ${
                  activeCase === story.id
                    ? "bg-primary/20 border-secondaccent/50 shadow-[0_0_20px_rgba(12,192,223,0.15)]"
                    : "bg-brand-dark border-white/10 hover:bg-white/5 hover:border-white/20"
                }`}
              >
                <div className="flex items-center gap-4">
                  <div
                    className={`w-12 h-12 rounded-lg flex items-center justify-center p-2 bg-white ${activeCase === story.id ? "opacity-100 shadow-[0_0_10px_rgba(100,255,218,0.5)]" : "opacity-70 grayscale"}`}
                  >
                    <img
                      src={story.logo}
                      alt={story.name}
                      className="max-h-full max-w-full object-contain"
                    />
                  </div>
                  <div>
                    <h4
                      className={`font-semibold ${activeCase === story.id ? "text-accent" : "text-brand-light"}`}
                    >
                      {story.name}
                    </h4>
                    <p className="text-sm text-brand-light/60">
                      Ver caso completo →
                    </p>
                  </div>
                </div>
              </button>
            ))}
          </div>

          {/* Panel de Detalles (Contenido Cambiante) */}
          <div className="col-span-1 lg:col-span-8 bg-primary/20 border border-white/10 rounded-2xl p-6 md:p-10 relative overflow-hidden flex flex-col justify-center min-h-[400px]">
            {/* Background glow para el caso activo */}
            <div className="absolute top-0 right-0 w-[300px] h-[300px] bg-accent/10 blur-[100px] rounded-full"></div>

            <AnimatePresence mode="wait">
              {successCases.map(
                (story) =>
                  story.id === activeCase && (
                    <motion.div
                      key={story.id}
                      initial={{ opacity: 0, y: 15 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -15 }}
                      transition={{ duration: 0.4 }}
                      className="relative z-10 h-full flex flex-col justify-center"
                    >
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
                        {/* Columna Izquierda (Reto y Solución) */}
                        <div className="space-y-8">
                          <div>
                            <div className="flex items-center gap-3 mb-3">
                              <div className="w-8 h-8 rounded-full bg-red-400/20 text-red-400 flex items-center justify-center">
                                <svg
                                  className="w-4 h-4"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  stroke="currentColor"
                                >
                                  <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                                  />
                                </svg>
                              </div>
                              <h4 className="text-brand-light/70 font-medium uppercase tracking-wider text-sm">
                                El Reto
                              </h4>
                            </div>
                            <p className="text-brand-light text-lg leading-relaxed">
                              {story.challenge}
                            </p>
                          </div>

                          <div>
                            <div className="flex items-center gap-3 mb-3">
                              <div className="w-8 h-8 rounded-full bg-accent/20 text-accent flex items-center justify-center">
                                <svg
                                  className="w-4 h-4"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  stroke="currentColor"
                                >
                                  <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z"
                                  />
                                </svg>
                              </div>
                              <h4 className="text-brand-light/70 font-medium uppercase tracking-wider text-sm">
                                Nuestra Solución
                              </h4>
                            </div>
                            <p className="text-brand-light text-lg leading-relaxed">
                              {story.solution}
                            </p>
                          </div>
                        </div>

                        {/* Columna Derecha (Resultado) */}
                        <div className="bg-gradient-to-br from-primary/60 to-brand-dark/80 border border-primary/40 rounded-xl p-6 md:p-8 flex flex-col justify-center border-t-4 border-t-secondaccent">
                          <div className="flex items-center gap-3 mb-4">
                            <div className="w-8 h-8 rounded-full bg-secondaccent/20 text-secondaccent flex items-center justify-center">
                              <svg
                                className="w-4 h-4"
                                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>
                            </div>
                            <h4 className="text-secondaccent font-semibold uppercase tracking-wider text-sm">
                              Impacto / Resultado
                            </h4>
                          </div>
                          <p className="text-white text-xl md:text-2xl font-light leading-relaxed">
                            "{story.result}"
                          </p>
                        </div>
                      </div>
                    </motion.div>
                  ),
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Clients;
