import { motion } from "framer-motion";
import { MdAutoGraph, MdPsychology, MdQueryStats } from "react-icons/md";

const aiSolutions = [
  {
    title: "NLP & LLMs",
    icon: <MdPsychology />,
    desc: "Custom language models and chatbots tailored to your specific business data.",
    features: ["Sentiment Analysis", "Entity Recognition", "Auto-Support"],
    color: "#3b82f6", // Blue
  },
  {
    title: "Predictive Analytics",
    icon: <MdQueryStats />,
    desc: "Turn historical data into future-proof strategies with deep learning.",
    features: ["Trend Forecasting", "Risk Assessment", "User Behavior"],
    color: "#a855f7", // Purple
  },
  {
    title: "Computer Vision",
    icon: <MdAutoGraph />,
    desc: "Extracting actionable insights from visual data and real-time streams.",
    features: ["Object Detection", "Image Synthesis", "Facial Recognition"],
    color: "#10b981", // Emerald
  },
];

export const AISolutions = () => {
  return (
    <section className="">
      <div className="container mx-auto px-6">
        {/* Header Section */}
        <div className="max-w-3xl mb-16">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
            AI <span className="text-primary">Solutions</span>
          </h2>

          <p className="text-lg">
            We build AI-powered features and automation tools that help
            businesses save time, improve workflows, and deliver smarter user
            experiences.
          </p>
        </div>

        {/* Grid Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {aiSolutions.map((solution, i) => (
            <motion.div
              key={solution.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              whileHover={{ y: -8 }}
              className="relative group p-8 rounded-3xl hover:border bg-card  transition-colors overflow-hidden"
            >
              {/* Subtle Background Glow */}
              <div
                className="absolute -right-10 -top-10 w-32 h-32 blur-2xl opacity-30 transition-opacity"
                style={{ backgroundColor: solution.color }}
              />

              {/* Icon & Title */}
              <div
                className="text-4xl mb-6 inline-block p-3 rounded-2xl border"
                style={{ color: solution.color }}
              >
                {solution.icon}
              </div>

              <h3 className="text-2xl font-semibold mb-4 tracking-tight">
                {solution.title}
              </h3>

              <p className=" leading-relaxed mb-8">{solution.desc}</p>

              {/* Feature Tags */}
              <div className="flex flex-wrap gap-2">
                {solution.features.map((feature) => (
                  <span
                    key={feature}
                    className="text-xs tracking-widest font-bold px-3 py-1 rounded-full bg-primary/10 text-primary"
                  >
                    {feature}
                  </span>
                ))}
              </div>

              {/* Bottom Accent Line */}
              <div
                className="absolute bottom-0 left-0 h-1 group-hover:w-0 w-full transition-all duration-500"
                style={{ backgroundColor: solution.color }}
              />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};
