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

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

const DiscoverPrograms = () => {
  const shouldReduce = useReducedMotion();
  
  const programs = [
    'Програми корпоративного навчання',
    'Програми обмінного навчання',
    'Програми обмінного CRM',
    'Системи управління навчанням',
    'Програми обмінного для розробників',
    'Програми обмінного для аналітики даних',
    'Програми обмінного для управління проектами',
    'Програми обмінного для соціальних мереж',
    'Програми обмінного для управління командою',
    'Програми обмінного для управління часом',
    'Програми обмінного для управління фінансами',
    'Показати все'
  ];

  if (shouldReduce) {
    return (
      <section className="py-16 bg-white">
        <div className="section-container">
          <div className="max-w-2xl">
            <h2 className="text-3xl lg:text-4xl font-light text-linkedin-text mb-6">
              Відкрийте для себе найкращі програми навчальні інструменти
            </h2>
            <p className="text-linkedin-gray mb-8">
              Щоб знайти найкращі навчальні програми для вас або вашої команди, скористайтеся нашими рекомендаціями, які базуються на ваших інтересах та досвіді.
            </p>
            <div className="flex flex-wrap gap-3">
              {programs.map((program, index) => (
                <button key={index} className="tag-button">
                  {program}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="py-16 bg-white"
    >
      <div className="section-container">
        <div className="max-w-2xl">
          <motion.h2 
            {...fadeUpPreset(0.2, 1.0)}
            className="text-3xl lg:text-4xl font-light text-linkedin-text mb-6"
          >
            Відкрийте для себе найкращі програми навчальні інструменти
          </motion.h2>
          <motion.p 
            {...fadeUpPreset(0.3, 1.0)}
            className="text-linkedin-gray mb-8"
          >
            Щоб знайти найкращі навчальні програми для вас або вашої команди, скористайтеся нашими рекомендаціями, які базуються на ваших інтересах та досвіді.
          </motion.p>
          <motion.div 
            {...fadeUpPreset(0.4, 1.0)}
            className="flex flex-wrap gap-3"
          >
            {programs.map((program, index) => (
              <motion.button 
                key={index}
                {...fadeUpPreset(0.5 + index * 0.03, 0.6)}
                className="tag-button"
              >
                {program}
              </motion.button>
            ))}
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

export default DiscoverPrograms;