import { FaChartLine, FaEye, FaMessage, FaShield, FaCode } from 'react-icons/fa6';
import {
  Badge,
  Card,
  Container,
  Group,
  SimpleGrid,
  Text,
  Title,
  useMantineTheme,
} from '@mantine/core';
import classes from "./FeatureCards.module.css";

const mockdata = [
  {
    title: 'Computer Vision',
    description:
      'I have experience in building computer vision models for a range of applications, from object detection to image segmentation. If your business works with images, these models can improve your efficiency and accuracy.',
    icon: FaEye,
  },
  {
    title: 'Natural Language Processing',
    description:
      'Expertise working with LLMs, from training to deployment. These state-of-the-art models are a powerful tool for a range of applications, and can drive your business forward.',
    icon: FaMessage,
  },
  {
    title: 'Data Science',
    description:
      "Sometimes you just need a simple model and some nice graphs. I can help you understand your data and build a model that works for you.",
    icon: FaChartLine,
  },
  {
    title: 'Privacy Focused',
    description:
      "Your data is valuable and sensitive. All my solutions are built with privacy and security in mind from the ground up, ensuring regulatory compliance and protecting your competitive advantage.",
    icon: FaShield,
  },
  {
    title: 'Open Source',
    description:
      "Leverage the power and innovation of open source technologies while avoiding vendor lock-in. This approach provides transparency, cost-effectiveness, and ensures your solutions remain maintainable long-term.",
    icon: FaCode,
  },
];

export function FeaturesCards() {
  const theme = useMantineTheme();
  const features = mockdata.map((feature) => (
    <Card key={feature.title} shadow="md" radius="md" className={classes.card} padding="xl">
      <feature.icon size={50} color={theme.colors.blue[6]} />
      <Text fz="lg" fw={500} className={classes.cardTitle} mt="md">
        {feature.title}
      </Text>
      <Text fz="sm" c="dimmed" mt="sm">
        {feature.description}
      </Text>
    </Card>
  ));

  return (
    <Container size="lg" py="xl">
      <Group justify="center">
        <Badge variant="filled" size="lg">
          My Expertise
        </Badge>
      </Group>

      <Title order={2} className={classes.title} ta="center" mt="sm">
        What can I bring to your business?
      </Title>

      <Text c="dimmed" className={classes.description} ta="center" mt="md">
        I've worked with a range of businesses, from startups to established companies, and I've 
        learned a lot about what works and what doesn't. I work across the full Machine Learning stack, from 
        data collection to model deployment.
      </Text>

      <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl" mt="50px">
        {features}
      </SimpleGrid>
    </Container>
  );
}