import { BrainCog, Puzzle, Speech } from "lucide-react";

import { Card, CardContent } from "@/components/ui/card";
import NumberTicker from "@/components/ui/number-ticker";
import BlurFade from "@/components/magicui/blur-fade";
import Section from "@/components/section";

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: BrainCog,
  },
  {
    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: Puzzle,
  },
  {
    title: "Human Values at Core",
    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: Speech,
  },
];

const stats = [
  {
    title: "Specialized Agents",
    number: 50,
    unit: "+",
    description: "Purpose-built AI agents for specific tasks and industries.",
  },
  {
    title: "Processing Speed",
    number: 65,
    unit: "x",
    description: "Faster than human operators in complex decision scenarios",
  },
  {
    title: "Daily Decisions",
    number: 100,
    unit: "+",
    description: "Autonomous conversations made by our systems every day",
  },
];

export default function Component() {
  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>
      <Section subtitle="Operational Metrics">
        <BlurFade>
          <div className="border-primary/10 bg-accent-foreground py-8 rounded-lg shadow grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
            {stats.map((stat, index) => (
              <Card
                key={index}
                className="bg-transparent border-none shadow-none"
              >
                <CardContent className="p-6 space-y-4 flex flex-col items-center text-center">
                  <div className="flex items-center text-4xl font-bold text-primary">
                    <div className="w-32 h-32 bg-primary/10 rounded-full flex items-center justify-center">
                      <NumberTicker
                        value={stat.number}
                        className="text-primary"
                      />
                      <span>{stat.unit}</span>
                    </div>
                  </div>
                  <h3 className="text-xl font-bold">{stat.title}</h3>
                  <p className="text-muted-foreground">{stat.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </BlurFade>
      </Section>
    </>
  );
}
