import { motion } from "framer-motion";
import React from "react";


import { 
  FaLeaf, 
  FaBoxes, 
  FaSyncAlt, 
  FaBolt, 
  FaStar, 
  FaSnowflake, 
  FaGlobe 
} from "react-icons/fa";
import "../../styles/howitworks.css";

export default function HowItWorks() {
  const benefits = [
    {
      icon: <FaLeaf className="icon" />,
      title: "Selective Ethylene Control",
      description:
        "Utilizes Silver Nano Technology to capture ethylene and convert it into ethylene oxide, slowing ripening while preserving quality.",
    },
    {
      icon: <FaSyncAlt className="icon" />,
      title: "Moderating, Not Blocking",
      description:
        "Allows natural ripening without disrupting biological pathways, maintaining texture, aroma, and taste.",
    },
    {
      icon: <FaBolt className="icon" />,
      title: "No Direct Application on Produce",
      description:
        "Works indirectly by managing ethylene levels in packaging, ensuring freshness without surface alterations.",
    },
    {
      icon: <FaStar className="icon" />,
      title: "Enhancing Flavors and Freshness",
      description:
        "Enables controlled ripening to retain flavour and appearance, preventing premature spoilage.",
    },
    {
      icon: <FaSnowflake className="icon" />,
      title: "Mitigating Risks",
      description:
        "Safe, non-toxic alternative to oxidizing agents, physically locking ethylene without chemical reactions.",
    },
    {
      icon: <FaGlobe className="icon" />,
      title: "Flexible and Customizable Solution",
      description:
        "Suitable for diverse produce with customizable formats for both domestic and export markets.",
    },
  ];

  return (
    <>
      {/* How It Works Section */}
      <div className="howitworks-container">
        <motion.h1
          className="title"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          How Vamsa Agri Fresh Keeper Works
        </motion.h1>

        <div className="cards">
          <motion.div
            className="card"
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <div className="icon-container">
              <FaLeaf className="icon" style={{ color: "#00ff00" }} />
            </div>
            <h2>Ethylene Management with Patented Silver Nano Technology</h2>
            <p>
              Fruits and vegetables release ethylene gas as they ripen. Vamsa Agri
              Fresh Keeper Liner Bags use silver nanoparticles to convert this
              ethylene gas into ethylene oxide, reducing the ripening process
              naturally.
            </p>
          </motion.div>

          <motion.div
            className="card"
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.3 }}
          >
            <div className="icon-container">
              <FaBoxes className="icon" style={{ color: "#00ff00" }} />
            </div>
            <h2>Breathable Design</h2>
            <p>
              The bags are designed with breathability, allowing ethylene oxide to
              escape. This prevents the accumulation of ripening agents inside the
              packaging, maintaining freshness.
            </p>
          </motion.div>
        </div>
      </div>
       <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="text-center "
        >
          Core Benefits
        </motion.h2>

      {/* Core Benefits Image Section */}
      <motion.div
        className="core-image-container"
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.8, delay: 0.3 }}
      >
        <img
          src="/images/CoreBenefits.png"
          alt="Core Benefits"
          className="benefits-image"
        />
      </motion.div>

      {/* Core Benefits Cards Section Below the Image */}
      <div className="core-benefits-container">
       

        <div className="benefits-grid">
          {benefits.map((benefit, index) => (
            <motion.div
              key={index}
              className="benefit-card"
              whileHover={{ scale: 1.05, boxShadow: "0 8px 20px rgba(0,0,0,0.2)" }}
              transition={{ type: "spring", stiffness: 300 }}
            >
              <div className="icon-container">{benefit.icon}</div>
              <h3>{benefit.title}</h3>
              <p>{benefit.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </>
  );
}
