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

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 HomeConditions = () => {
  return (
    <div className="my-[20px]">
      <motion.div
        initial={{ opacity: 0, top: '-20px' }}
        whileInView={{ opacity: 1, top: 0 }}
        transition={{ duration: 0.5 }}
        viewport={{ amount: 1, once: true }}
        className="relative"
      >
        <p className="text-center font-extrabold text-primary font-caveat text-[24px]">
          Доставка и условия
        </p>
        <h4 className="text-center font-extrabold text-[32px] text-accent tracking-tighter">
          Надёжная и своевременная доставка в любой регион
        </h4>
      </motion.div>
      <motion.div
        variants={containerVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.3 }}
        className="flex gap-4 max-sm:flex-col custom-container my-[30px]"
      >
        {conditions.map((item) => (
          <motion.div key={item.title} variants={cardVariants}>
            <ConditionCard item={item} />
          </motion.div>
        ))}
      </motion.div>
    </div>
  );
};

export default HomeConditions;
