import { motion } from 'framer-motion';
import FieldCard from '../FieldCard';
import { setionTitleVariants } from '@/lib/animations';
import engineering from '@/assets/icons/Engineering.svg';
import science from '@/assets/icons/Science.svg';
import art from '@/assets/icons/art.svg';
import language from '@/assets/icons/Language.svg';
import business from '@/assets/icons/business.svg';
import coding from '@/assets/icons/coding.svg';

export default function WeAreNotLimitedSection() {
  return (
    <section
      id="weAreNotLimited"
      className="flex-col flex gap-12 content-between items-center justify-center py-12 px-4"
    >
      <motion.h1
        variants={setionTitleVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        className="text-secondary font-extrabold"
      >
        We are not limited
      </motion.h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
        <FieldCard
          iconSrc={engineering}
          iconAlt="Icon"
          color="orange"
          value="Engineering"
        />
        <FieldCard
          iconSrc={science}
          iconAlt="Icon"
          color="purple"
          value="Science"
        />
        <FieldCard
          iconSrc={art}
          iconAlt="Icon"
          color="pink"
          value="Art/Craft"
        />
        <FieldCard
          iconSrc={language}
          iconAlt="Icon"
          color="blue"
          value="Language"
        />
        <FieldCard
          iconSrc={business}
          iconAlt="Icon"
          color="green"
          value="Business"
        />
        <FieldCard
          iconSrc={coding}
          iconAlt="Icon"
          color="yellow"
          value="Coding"
        />
      </div>
    </section>
  );
}