import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef } from "react";
import { Leaf, Users, Award, TrendingUp } from "lucide-react";

const features = [
  {
    icon: Leaf,
    title: "Sustainable Solutions",
    description: "Eco-friendly preservation methods that reduce food waste and environmental impact",
  },
  {
    icon: Users,
    title: "Expert Team",
    description: "Decades of combined experience in agricultural science and food preservation",
  },
  {
    icon: Award,
    title: "Proven Results",
    description: "Award-winning research published in leading scientific journals",
  },
  {
    icon: TrendingUp,
    title: "Innovation First",
    description: "Cutting-edge techniques backed by rigorous scientific methodology",
  },
];

export default function AboutSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section id="about" className="py-20 bg-white">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 50 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <div className="flex justify-center mb-6">
            <img 
              src="/chopfreshinternational.png" 
              alt="ChopFresh International Logo" 
              width="200"
              height="80"
              className="object-contain"
            />
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            About ChopFresh International Pvt. Ltd.
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Leading the way in produce hibernation research and sustainable food preservation solutions
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              className="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow"
            >
              <div className="bg-green-600 w-14 h-14 rounded-xl flex items-center justify-center mb-4">
                <feature.icon className="w-7 h-7 text-white" />
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                {feature.title}
              </h3>
              <p className="text-gray-600">{feature.description}</p>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          className="bg-gradient-to-r from-green-600 to-emerald-600 rounded-3xl p-8 md:p-12 text-white"
        >
          <div className="max-w-4xl mx-auto">
            <h3 className="text-3xl font-bold mb-6">Our Mission</h3>
            <p className="text-lg leading-relaxed mb-6">
              At ChopFresh International, we're dedicated to revolutionizing how the world preserves and stores fresh produce. 
              Through innovative hibernation techniques and cutting-edge research, we help reduce food waste, 
              extend shelf life, and maintain nutritional value.
            </p>
            <p className="text-lg leading-relaxed">
              Our team of agricultural scientists and food preservation experts work tirelessly to develop 
              sustainable solutions that benefit farmers, distributors, retailers, and consumers alike.
            </p>
          </div>
        </motion.div>
      </div>
    </section>
  );
}