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

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 SupportSection = () => {
  const shouldReduceMotion = useReducedMotion();

  if (shouldReduceMotion) {
    return (
      <section className="section-padding bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-nest-dark mb-6">Support us</h2>
            <p className="text-xl text-nest-gray max-w-3xl mx-auto mb-12">
              Nest is an MIT-licensed open-source project. Hence, it grows thanks to the sponsors and support by the amazing backers. Please, consider supporting us!
            </p>
          </div>

          <div className="space-y-12">
            {/* Principal Sponsors */}
            <div className="text-center">
              <h3 className="text-lg font-bold text-nest-dark mb-6">PRINCIPAL SPONSORS</h3>
              <div className="flex justify-center items-center space-x-8">
                <div className="w-32 h-16 bg-gray-200 rounded flex items-center justify-center">
                  <span className="text-gray-500 text-sm">Sponsor Logo</span>
                </div>
                <div className="w-32 h-16 bg-gray-200 rounded flex items-center justify-center">
                  <span className="text-gray-500 text-sm">Sponsor Logo</span>
                </div>
              </div>
            </div>

            {/* Gold Sponsors */}
            <div className="text-center">
              <h3 className="text-lg font-bold text-nest-dark mb-6">GOLD SPONSORS</h3>
              <div className="flex justify-center items-center space-x-6 flex-wrap gap-4">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="w-24 h-12 bg-gray-200 rounded flex items-center justify-center">
                    <span className="text-gray-500 text-xs">Logo</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Silver Sponsors */}
            <div className="text-center">
              <h3 className="text-lg font-bold text-nest-dark mb-6">SILVER SPONSORS</h3>
              <div className="flex justify-center items-center space-x-4 flex-wrap gap-3">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <div key={i} className="w-20 h-10 bg-gray-200 rounded flex items-center justify-center">
                    <span className="text-gray-500 text-xs">Logo</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Sponsors/Partners */}
            <div className="text-center">
              <h3 className="text-lg font-bold text-nest-dark mb-6">SPONSORS / PARTNERS</h3>
              <div className="flex justify-center items-center space-x-4 flex-wrap gap-3">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="w-16 h-8 bg-gray-200 rounded flex items-center justify-center">
                    <span className="text-gray-500 text-xs">Logo</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="text-center mt-12">
            <button className="btn-primary">
              Become a sponsor / backer
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-white"
    >
      <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"
        >
          <h2 className="text-4xl font-bold text-nest-dark mb-6">Support us</h2>
          <p className="text-xl text-nest-gray max-w-3xl mx-auto mb-12">
            Nest is an MIT-licensed open-source project. Hence, it grows thanks to the sponsors and support by the amazing backers. Please, consider supporting us!
          </p>
        </motion.div>

        <div className="space-y-12">
          {/* Principal Sponsors */}
          <motion.div 
            {...fadeUpPreset(0.3, 0.6)}
            className="text-center"
          >
            <h3 className="text-lg font-bold text-nest-dark mb-6">PRINCIPAL SPONSORS</h3>
            <div className="flex justify-center items-center space-x-8">
              <div className="w-32 h-16 bg-gray-200 rounded flex items-center justify-center">
                <span className="text-gray-500 text-sm">Sponsor Logo</span>
              </div>
              <div className="w-32 h-16 bg-gray-200 rounded flex items-center justify-center">
                <span className="text-gray-500 text-sm">Sponsor Logo</span>
              </div>
            </div>
          </motion.div>

          {/* Gold Sponsors */}
          <motion.div 
            {...fadeUpPreset(0.4, 0.6)}
            className="text-center"
          >
            <h3 className="text-lg font-bold text-nest-dark mb-6">GOLD SPONSORS</h3>
            <div className="flex justify-center items-center space-x-6 flex-wrap gap-4">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="w-24 h-12 bg-gray-200 rounded flex items-center justify-center">
                  <span className="text-gray-500 text-xs">Logo</span>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Silver Sponsors */}
          <motion.div 
            {...fadeUpPreset(0.5, 0.6)}
            className="text-center"
          >
            <h3 className="text-lg font-bold text-nest-dark mb-6">SILVER SPONSORS</h3>
            <div className="flex justify-center items-center space-x-4 flex-wrap gap-3">
              {[1, 2, 3, 4, 5, 6].map((i) => (
                <div key={i} className="w-20 h-10 bg-gray-200 rounded flex items-center justify-center">
                  <span className="text-gray-500 text-xs">Logo</span>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Sponsors/Partners */}
          <motion.div 
            {...fadeUpPreset(0.6, 0.6)}
            className="text-center"
          >
            <h3 className="text-lg font-bold text-nest-dark mb-6">SPONSORS / PARTNERS</h3>
            <div className="flex justify-center items-center space-x-4 flex-wrap gap-3">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="w-16 h-8 bg-gray-200 rounded flex items-center justify-center">
                  <span className="text-gray-500 text-xs">Logo</span>
                </div>
              ))}
            </div>
          </motion.div>
        </div>

        <motion.div 
          {...fadeUpPreset(0.7, 0.6)}
          className="text-center mt-12"
        >
          <button className="btn-primary">
            Become a sponsor / backer
          </button>
        </motion.div>
      </div>
    </motion.section>
  );
};

export default SupportSection;