import BlurFade from "@/components/magicui/blur-fade";
import Section from "@/components/section";
import { Card, CardContent } from "@/components/ui/card";
import { Brain, Shield, Zap } from "lucide-react";

const problems = [
  {
    title: "Dynamic Goal Formation",
    description:
      "Unlike traditional AI systems that rely on predefined objectives, our agents can formulate and prioritize their own goals based on their understanding of the broader context and desired outcomes.",
    icon: Brain,
  },
  {
    title: "Contextual Understanding",
    description:
      "Our agents don't operate in a vacuum. They grasp the nuances of their environment, understanding not just what's happening, but why it matters and how it affects their objectives.",
    icon: Zap,
  },
  {
    title: "Ethical Framework Integration",
    description:
      "We've built robust ethical considerations directly into our agents' decision-making processes, ensuring they operate not just effectively, but responsibly and in alignment with human values.",
    icon: Shield,
  },
];

export default function Statistic() {
  return (
    <Section title="Be Different" subtitle="Technology That Sets Us Apart">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
        {problems.map((problem, index) => (
          <BlurFade key={index} delay={0.2 + index * 0.2} inView>
            <Card className="bg-background border-none shadow-none">
              <CardContent className="p-6 space-y-4">
                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                  <problem.icon className="w-6 h-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold">{problem.title}</h3>
                <p className="text-muted-foreground">{problem.description}</p>
              </CardContent>
            </Card>
          </BlurFade>
        ))}
      </div>
    </Section>
  );
}
