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

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

const Newsletter = () => {
  const [email, setEmail] = useState('');
  const shouldReduceMotion = useReducedMotion();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Newsletter signup:', email);
    setEmail('');
  };

  if (shouldReduceMotion) {
    return (
      <section className="section-padding bg-nest-light-gray">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-nest-dark mb-4">Join our Newsletter</h2>
          <p className="text-nest-gray mb-8">
            Subscribe to stay up to date with the latest Nest updates, features, and videos!
          </p>
          
          <form onSubmit={handleSubmit} className="max-w-md mx-auto">
            <div className="flex gap-4">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter your email"
                className="flex-1 px-4 py-3 border border-nest-border rounded-full focus:outline-none focus:ring-2 focus:ring-nest-red focus:border-transparent"
                required
              />
              <button
                type="submit"
                className="bg-nest-red text-white px-6 py-3 rounded-full hover:bg-red-600 transition-colors flex items-center gap-2"
              >
                <Send className="w-4 h-4" />
              </button>
            </div>
          </form>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-nest-light-gray"
    >
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <motion.h2 
          {...fadeUpPreset(0.2, 0.8)}
          className="text-3xl font-bold text-nest-dark mb-4"
        >
          Join our Newsletter
        </motion.h2>
        <motion.p 
          {...fadeUpPreset(0.4, 0.8)}
          className="text-nest-gray mb-8"
        >
          Subscribe to stay up to date with the latest Nest updates, features, and videos!
        </motion.p>
        
        <motion.form 
          {...fadeUpPreset(0.6, 0.8)}
          onSubmit={handleSubmit} 
          className="max-w-md mx-auto"
        >
          <div className="flex gap-4">
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Enter your email"
              className="flex-1 px-4 py-3 border border-nest-border rounded-full focus:outline-none focus:ring-2 focus:ring-nest-red focus:border-transparent"
              required
            />
            <button
              type="submit"
              className="bg-nest-red text-white px-6 py-3 rounded-full hover:bg-red-600 transition-colors flex items-center gap-2"
            >
              <Send className="w-4 h-4" />
            </button>
          </div>
        </motion.form>
      </div>
    </motion.section>
  );
};

export default Newsletter;