import { motion } from "framer-motion";
import { MdCloudQueue, MdSecurity } from "react-icons/md";
import { SiDocker } from "react-icons/si";

const cloudServices = [
  {
    title: "Serverless Architecture",
    icon: <MdCloudQueue />,
    desc: "Scale to millions of users without managing a single server.",
    color: "text-orange-400",
    border: "group-hover:border-orange-500/50",
  },
  {
    title: "Containerization",
    icon: <SiDocker />,
    desc: "Orchestrated deployments using Docker for zero-downtime.",
    color: "text-blue-400",
    border: "group-hover:border-blue-500/50",
  },
  {
    title: "Cyber Security",
    icon: <MdSecurity />,
    desc: "End-to-end encryption and automated threat detection.",
    color: "text-emerald-400",
    border: "group-hover:border-emerald-500/50",
  },
];

export const CloudSolutions = () => {
  return (
    <section className=" mt-32  px-6 overflow-hidden">
      <div className="container mx-auto grid lg:grid-cols-2 gap-16 items-center">
        {/* Left Side: Content */}
        <motion.div
          initial={{ opacity: 0, x: -30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="z-10"
        >
          <h2 className="text-4xl md:text-5xl font-bold tracking-tighter leading-none mb-8">
            Cloud {" "}
            <span className="text-primary tracking-tight">Solutions</span>
          </h2>
          <p className=" text-lg  leading-relaxed">
            We build high-availability cloud systems that guarantee reliability,
            performance, and a scalable architecture for the modern web.
          </p>

          {/* Optional: Simple CTA or stat to fill space */}
          <div className="mt-10 flex gap-8 border-t border-border pt-8">
            <div>
              <p className="text-2xl font-bold ">99.9%</p>
              <p className="text-xs uppercase tracking-widest ">Uptime</p>
            </div>
            <div>
              <p className="text-2xl font-bold ">Global</p>
              <p className="text-xs uppercase tracking-widest ">Edge Network</p>
            </div>
          </div>
        </motion.div>

        {/* Right Side: Cards */}
        <div className="flex flex-col gap-4">
          {cloudServices.map((service, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.15, duration: 0.5 }}
              className={`group flex items-center gap-6 p-6 rounded-3xl border border-border  transition-all duration-300 cursor-default ${service.border}`}
            >
              {/* Icon Container */}
              <div
                className={`text-4xl p-4 rounded-2xl border group-hover:scale-110 transition-transform duration-300 ${service.color}`}
              >
                {service.icon}
              </div>

              {/* Text Content */}
              <div>
                <h4 className="text-xl font-bold mb-1 transition-colors">
                  {service.title}
                </h4>
                <p className="text-sm leading-relaxed max-w-xs">
                  {service.desc}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};
