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

import { useContactForm } from '../src/hooks/useContactForm';

const Contact: React.FC = () => {
  const { errorMessage, hasError, isSubmitted, isSubmitting, resetFeedback, submitContactForm } = useContactForm();

  return (
    <motion.section
      id="contact"
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.8, ease: "easeOut" }}
      className="py-24 bg-white dark:bg-[#0f0f0f] border-t border-gray-100 dark:border-white/5"
    >
      <div className="max-w-3xl mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-12"
        >
          <h2 className="font-display text-4xl md:text-5xl font-medium mb-6 text-gray-900 dark:text-white">
            Get in Touch
          </h2>
          <p className="text-gray-600 dark:text-gray-400 text-lg">
            We're here to help you with all your IT needs.
          </p>
        </motion.div>

        <motion.form
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ delay: 0.2 }}
          className="space-y-6"
          onChange={resetFeedback}
          onSubmit={submitContactForm}
        >
          <input type="text" name="website" tabIndex={-1} autoComplete="off" className="hidden" aria-hidden="true" />
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label htmlFor="contact-name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name *</label>
              <motion.input
                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
                transition={{ duration: 0.2 }}
                type="text"
                id="contact-name"
                name="name"
                placeholder="Your Name"
                required
                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
              />
            </div>
            <div>
              <label htmlFor="contact-email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
              <motion.input
                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
                transition={{ duration: 0.2 }}
                type="email"
                id="contact-email"
                name="email"
                placeholder="Your Email"
                required
                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
              />
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label htmlFor="contact-phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone (optional)</label>
              <motion.input
                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
                transition={{ duration: 0.2 }}
                type="tel"
                id="contact-phone"
                name="phone"
                placeholder="Your Phone Number"
                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
              />
            </div>
            <div>
              <label htmlFor="contact-company" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Company (optional)</label>
              <motion.input
                whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
                transition={{ duration: 0.2 }}
                type="text"
                id="contact-company"
                name="company"
                placeholder="Your Company Name"
                className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all"
              />
            </div>
          </div>
          <div>
            <label htmlFor="contact-message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message *</label>
            <motion.textarea
              whileFocus={{ scale: 1.01, borderColor: "#3b82f6" }}
              transition={{ duration: 0.2 }}
              id="contact-message"
              name="message"
              placeholder="Your Message"
              required
              className="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-400/20 focus:border-blue-500 outline-none transition-all h-32 resize-none"
            ></motion.textarea>
          </div>
          <div className="text-center">
            <motion.button
              type="submit"
              whileHover={{ scale: isSubmitting ? 1 : 1.05 }}
              whileTap={{ scale: isSubmitting ? 1 : 0.95 }}
              disabled={isSubmitting}
              className="selection-inverse px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium transition-all duration-300 w-full md:w-auto shadow-lg disabled:cursor-not-allowed disabled:opacity-70"
            >
              {isSubmitting ? 'Sending...' : 'Send Message'}
            </motion.button>
          </div>
          {isSubmitted && (
            <p className="text-sm text-green-600 dark:text-green-400">
              Thanks. Your message was sent successfully.
            </p>
          )}
          {hasError && (
            <p className="text-sm text-red-600 dark:text-red-400">
              {errorMessage}
            </p>
          )}
        </motion.form>
      </div>
    </motion.section>
  );
};

export default Contact;