'use client';
import React from 'react';
import { processItemsData } from '../lib/data';
import HomeProcessCard from './HomeProcessCard';
import { motion } from 'framer-motion';

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.3,
    },
  },
};

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0, 0.55, 0.45, 1] as const },
  },
};

const HomeProcess = () => {
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.3 }}
      className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 custom-container my-[30px]"
    >
      {processItemsData.map((item) => (
        <motion.div key={item.id} variants={cardVariants}>
          <HomeProcessCard item={item} />
        </motion.div>
      ))}
    </motion.div>
  );
};

export default HomeProcess;
