// src/components/Hero.jsx
import { motion } from 'framer-motion';

const Hero = () => {
  const containerVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        staggerChildren: 0.2,
      },
    },
  };

  const childVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  };

  const buttonVariants = {
    hover: { scale: 1.03 },
    tap: { scale: 0.97 },
  };

  return (
    <div className="relative min-h-screen bg-gradient-to-b from-slate-50 to-white pt-20 overflow-hidden">
      <div className="container-custom h-full flex items-center justify-center">
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          className="max-w-3xl mx-auto text-center"
        >
          <motion.h1
            variants={childVariants}
            className="text-4xl md:text-5xl font-bold text-slate-900 mb-4 leading-tight"
          >
            Crafting Excellence in Hardware
          </motion.h1>
          <motion.p
            variants={childVariants}
            className="text-lg text-slate-600 mb-8"
          >
            Discover our range of premium tools and equipment, designed for professionals and DIY enthusiasts alike.
          </motion.p>
          <div className="flex gap-4 justify-center">
            <motion.button
              variants={buttonVariants}
              whileHover="hover"
              whileTap="tap"
              className="bg-slate-800 text-white px-6 py-2.5 rounded-full font-medium text-sm shadow-md transition-all duration-200 hover:shadow-lg"
            >
              Explore Our Collection
            </motion.button>
            <motion.button
              variants={buttonVariants}
              whileHover="hover"
              whileTap="tap"
              className="bg-white text-slate-800 border border-slate-200 px-6 py-2.5 rounded-full font-medium text-sm shadow-md transition-all duration-200 hover:shadow-lg"
            >
              Learn More
            </motion.button>
          </div>
        </motion.div>
      </div>

      {/* Decorative Elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -left-8 top-1/3 w-32 h-32 bg-blue-400 rounded-full blur-3xl opacity-10" />
        <div className="absolute right-1/4 bottom-1/3 w-40 h-40 bg-purple-400 rounded-full blur-3xl opacity-10" />
      </div>

      {/* Infinite Scroll Products */}
      <div className="absolute bottom-0 left-0 w-full py-6 bg-gradient-to-t from-white to-transparent">
        <div className="overflow-hidden">
          <motion.div
            initial={{ x: 0 }}
            animate={{ x: '-100%' }}
            transition={{ duration: 30, repeat: Infinity, ease: 'linear' }}
            className="flex"
          >
            {[...Array(10).keys()].map((_, index) => (
              <div key={index} className="mx-4 w-40 flex-shrink-0">
                <img
                  src={`https://picsum.photos/200/300?random=${index}`}
                  alt={`Product ${index}`}
                  className="w-full h-24 object-cover rounded-lg mb-2"
                />
                <p className="text-sm text-slate-600 text-center">Product {index}</p>
              </div>
            ))}
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default Hero; update this make it more bettter and beautiful and modern