import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { Users, Heart } from 'lucide-react';

function Community() {
  const shouldReduceMotion = useReducedMotion();

  const fadeUpPreset = (delay = 0, duration = 0.8) => ({
    initial: { opacity: 0, y: 20 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, amount: 0.2 },
    transition: { delay, duration, ease: "easeOut" }
  });

  const communityImages = [
    "https://react.dev/images/home/conf2021/andrew.jpg",
    "https://react.dev/images/home/conf2021/lauren.jpg",
    "https://react.dev/images/home/conf2021/juan.jpg",
    "https://react.dev/images/home/conf2021/rick.jpg"
  ];

  if (shouldReduceMotion) {
    return (
      <section className="py-20 bg-gradient-to-b from-blue-50 to-purple-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <div className="flex items-center justify-center mb-6">
              <Users className="w-8 h-8 text-react-blue mr-3" />
              <h2 className="text-3xl md:text-4xl font-bold text-react-dark">
                Join a community of millions
              </h2>
            </div>
            <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
              You're not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
            {communityImages.map((image, index) => (
              <div key={index} className="aspect-square rounded-lg overflow-hidden">
                <img 
                  src={image} 
                  alt={`Community member ${index + 1}`}
                  className="w-full h-full object-cover"
                />
              </div>
            ))}
          </div>

          <div className="text-center space-y-6">
            <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
              This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It's a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.
            </p>
            
            <div className="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto">
              <div className="flex items-center justify-center mb-6">
                <div className="w-16 h-16 bg-react-blue rounded-full flex items-center justify-center">
                  <Heart className="w-8 h-8 text-white" />
                </div>
              </div>
              <h3 className="text-2xl font-bold text-react-dark mb-4">
                Welcome to the React community
              </h3>
              <button className="bg-react-blue text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
                Get Started
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 0.8)}
      className="py-20 bg-gradient-to-b from-blue-50 to-purple-50"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div {...fadeUpPreset(0.2, 0.8)} className="text-center mb-16">
          <div className="flex items-center justify-center mb-6">
            <Users className="w-8 h-8 text-react-blue mr-3" />
            <h2 className="text-3xl md:text-4xl font-bold text-react-dark">
              Join a community of millions
            </h2>
          </div>
          <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
            You're not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
          </p>
        </motion.div>

        <motion.div {...fadeUpPreset(0.3, 0.8)} className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
          {communityImages.map((image, index) => (
            <motion.div 
              key={index} 
              {...fadeUpPreset(0.4 + index * 0.05, 0.6)}
              className="aspect-square rounded-lg overflow-hidden"
            >
              <img 
                src={image} 
                alt={`Community member ${index + 1}`}
                className="w-full h-full object-cover"
              />
            </motion.div>
          ))}
        </motion.div>

        <motion.div {...fadeUpPreset(0.5, 0.8)} className="text-center space-y-6">
          <p className="text-lg text-react-gray max-w-4xl mx-auto leading-relaxed">
            This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It's a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.
          </p>
          
          <motion.div 
            {...fadeUpPreset(0.6, 0.8)}
            className="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto"
          >
            <div className="flex items-center justify-center mb-6">
              <div className="w-16 h-16 bg-react-blue rounded-full flex items-center justify-center">
                <Heart className="w-8 h-8 text-white" />
              </div>
            </div>
            <h3 className="text-2xl font-bold text-react-dark mb-4">
              Welcome to the React community
            </h3>
            <button className="bg-react-blue text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
              Get Started
            </button>
          </motion.div>
        </motion.div>
      </div>
    </motion.section>
  );
}

export default Community;