import { motion } from "framer-motion";
import styles, { layout } from "../style";
import { NewsVid1 } from "../assets";

const Container = {
  hidden: {},
  visible: { staggerChildren: 0.2 },
};

const News = () => {
  return (
    <section id="news" className={styles.padding}>
      {/* Heading */}

      <motion.div
        className="md:w-2/4 mx-auto text-center"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.5 }}
        transition={{ duration: 0.5 }}
        variants={{
          hidden: { opacity: 0, y: -50 },
          visible: { opacity: 1, y: 0 },
        }}
      >
        <div>
          <p
            className={`  font-playfair font-semibold sm:text-4xl uppercase text-black `}
          >
            {" "}
            We are in news{" "}
          </p>
        </div>
      </motion.div>

      {/* Video */}

      <div className={`${styles.flexCenter}`}>
        <div className="grid grid-col-3">
          {/* card */}
          <div className="">
            <div className="">
              <div className=" ">India News</div>
              <video autoPlay loop muted controls className=" ">
                {" "}
                <source src={NewsVid1} type="video/mp4" />
              </video>
            </div>
          </div>
          {/* card */}
          <div className="rounded overflow-hidden shadow-lg flex justify-center text-center items-center  bg-red max-w-[400px ] text-2xl  font-playfair font-semibold ">
            <div className="px-2">
              <div className="font-bold text-xl mb-10 ">India News</div>
              <video
                autoPlay
                loop
                muted
                controls
                className="object-contain   border-10 rounded-lg "
              >
                <source src={NewsVid1} type="video/mp4" />
              </video>
            </div>
          </div>
          {/* card */}
          <div className="rounded overflow-hidden shadow-lg flex justify-center text-center items-center  bg-red max-w-[400px ] text-2xl  font-playfair font-semibold ">
            <div className="px-2">
              <div className="font-bold text-xl mb-10 ">India News</div>
              <video
                autoPlay
                loop
                muted
                controls
                className="object-contain   border-10 rounded-lg "
              >
                <source src={NewsVid1} type="video/mp4" />
              </video>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default News;