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 Hero = () => {
  const shouldReduce = useReducedMotion();
  
  if (shouldReduce) {
    return (
      <section className="bg-linkedin-light-gray py-16 lg:py-24">
        <div className="section-container">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl lg:text-5xl font-light text-linkedin-text mb-6 leading-tight">
                Ласкаво просимо до професійної спільноти!
              </h1>
              <div className="space-y-4">
                <button className="btn-primary w-full sm:w-auto">
                  Приєднатися зараз
                </button>
                <div className="flex items-center gap-4">
                  <span className="text-sm text-linkedin-gray">або</span>
                  <button className="text-linkedin-blue hover:underline font-semibold">
                    Увійти
                  </button>
                </div>
              </div>
              <p className="text-sm text-linkedin-gray mt-6">
                Умови та додаткові умови конфіденційності застосовуються.
              </p>
              <p className="text-sm text-linkedin-gray mt-2">
                Цей сайт захищений reCAPTCHA та застосовуються Політика конфіденційності та Умови обслуговування Google.
              </p>
              <p className="text-sm text-linkedin-gray mt-4">
                Вперше на LinkedIn? <a href="#" className="text-linkedin-blue hover:underline">Приєднайтеся зараз</a>
              </p>
            </div>
            <div className="relative">
              <div className="bg-white rounded-lg p-8 shadow-lg">
                <div className="w-full h-64 bg-gradient-to-br from-blue-100 to-orange-100 rounded-lg flex items-center justify-center">
                  <div className="text-center">
                    <div className="w-16 h-16 bg-linkedin-blue rounded-full mx-auto mb-4 flex items-center justify-center">
                      <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                      </svg>
                    </div>
                    <p className="text-linkedin-gray text-sm">Професійна мережа</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 0.8)}
      className="bg-linkedin-light-gray py-16 lg:py-24"
    >
      <div className="section-container">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div {...fadeUpPreset(0.2, 1.0)}>
            <h1 className="text-4xl lg:text-5xl font-light text-linkedin-text mb-6 leading-tight">
              Ласкаво просимо до професійної спільноти!
            </h1>
            <div className="space-y-4">
              <button className="btn-primary w-full sm:w-auto">
                Приєднатися зараз
              </button>
              <div className="flex items-center gap-4">
                <span className="text-sm text-linkedin-gray">або</span>
                <button className="text-linkedin-blue hover:underline font-semibold">
                  Увійти
                </button>
              </div>
            </div>
            <p className="text-sm text-linkedin-gray mt-6">
              Умови та додаткові умови конфіденційності застосовуються.
            </p>
            <p className="text-sm text-linkedin-gray mt-2">
              Цей сайт захищений reCAPTCHA та застосовуються Політика конфіденційності та Умови обслуговування Google.
            </p>
            <p className="text-sm text-linkedin-gray mt-4">
              Вперше на LinkedIn? <a href="#" className="text-linkedin-blue hover:underline">Приєднайтеся зараз</a>
            </p>
          </motion.div>
          <motion.div {...fadeUpPreset(0.4, 1.0)} className="relative">
            <div className="bg-white rounded-lg p-8 shadow-lg">
              <div className="w-full h-64 bg-gradient-to-br from-blue-100 to-orange-100 rounded-lg flex items-center justify-center">
                <div className="text-center">
                  <div className="w-16 h-16 bg-linkedin-blue rounded-full mx-auto mb-4 flex items-center justify-center">
                    <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                  </div>
                  <p className="text-linkedin-gray text-sm">Професійна мережа</p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

export default Hero;