'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { Mail, Phone, MapPin, Send } from 'lucide-react';

export function ContactSection() {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    phone: '',
    message: '',
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormState((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Simulate form submission
    setTimeout(() => {
      setIsSubmitting(false);
      setIsSubmitted(true);
      setFormState({
        name: '',
        email: '',
        phone: '',
        message: '',
      });
      
      // Reset success message after 5 seconds
      setTimeout(() => {
        setIsSubmitted(false);
      }, 5000);
    }, 1500);
  };

  return (
    <section id="contact" className="section" style={{ 
      background: 'linear-gradient(to bottom, rgba(225, 215, 198, 0.3), var(--warm-white))'
    }}>
      <div className="container-custom">
        <div style={{ textAlign: 'center', maxWidth: '48rem', margin: '0 auto', marginBottom: '4rem' }}>
          <motion.span
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            viewport={{ once: true }}
            style={{ 
              display: 'inline-block', 
              padding: '0.5rem 1rem', 
              backgroundColor: 'rgba(255, 123, 84, 0.1)', 
              color: 'var(--sunset-orange)', 
              borderRadius: '9999px',
              fontWeight: 500,
              marginBottom: '1rem'
            }}
          >
            Get In Touch
          </motion.span>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            viewport={{ once: true }}
            style={{ 
              fontSize: 'clamp(1.875rem, 3vw, 2.25rem)', 
              fontWeight: 700, 
              color: 'var(--night-blue)', 
              marginBottom: '1rem'
            }}
          >
            Contact Us Today
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            viewport={{ once: true }}
            style={{ color: 'rgba(26, 95, 122, 0.8)' }}
          >
            Have questions or ready to experience our summer vibes? Reach out to us and we'll get back to you as soon as possible.
          </motion.p>
        </div>

        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: '1fr', 
          gap: '3rem'
        }} className="lg:grid-cols-2">
          {/* Contact Info */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
          >
            <div style={{ 
              backgroundColor: 'var(--warm-white)', 
              padding: '2rem', 
              borderRadius: '0.75rem', 
              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', 
              border: '1px solid var(--sand)'
            }}>
              <h3 style={{ 
                fontSize: '1.5rem', 
                fontWeight: 700, 
                color: 'var(--night-blue)', 
                marginBottom: '1.5rem'
              }}>Contact Information</h3>
              
              <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
                  <div style={{ 
                    width: '2.5rem', 
                    height: '2.5rem', 
                    backgroundColor: 'rgba(255, 123, 84, 0.1)', 
                    borderRadius: '9999px', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    flexShrink: 0
                  }}>
                    <Phone style={{ height: '1.25rem', width: '1.25rem', color: 'var(--sunset-orange)' }} />
                  </div>
                  <div>
                    <h4 style={{ fontWeight: 500, color: 'var(--night-blue)' }}>Phone</h4>
                    <p style={{ color: 'var(--evening-blue)' }}>(555) 123-4567</p>
                  </div>
                </div>
                
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
                  <div style={{ 
                    width: '2.5rem', 
                    height: '2.5rem', 
                    backgroundColor: 'rgba(255, 123, 84, 0.1)', 
                    borderRadius: '9999px', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    flexShrink: 0
                  }}>
                    <Mail style={{ height: '1.25rem', width: '1.25rem', color: 'var(--sunset-orange)' }} />
                  </div>
                  <div>
                    <h4 style={{ fontWeight: 500, color: 'var(--night-blue)' }}>Email</h4>
                    <p style={{ color: 'var(--evening-blue)' }}>hello@familybusiness.com</p>
                  </div>
                </div>
                
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
                  <div style={{ 
                    width: '2.5rem', 
                    height: '2.5rem', 
                    backgroundColor: 'rgba(255, 123, 84, 0.1)', 
                    borderRadius: '9999px', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    flexShrink: 0
                  }}>
                    <MapPin style={{ height: '1.25rem', width: '1.25rem', color: 'var(--sunset-orange)' }} />
                  </div>
                  <div>
                    <h4 style={{ fontWeight: 500, color: 'var(--night-blue)' }}>Address</h4>
                    <p style={{ color: 'var(--evening-blue)' }}>123 Summer Lane, Beachside, CA 90210</p>
                  </div>
                </div>
              </div>
              
              <div style={{ 
                marginTop: '2rem', 
                paddingTop: '2rem', 
                borderTop: '1px solid var(--sand)'
              }}>
                <h4 style={{ fontWeight: 500, color: 'var(--night-blue)', marginBottom: '1rem' }}>Business Hours</h4>
                <div style={{ 
                  display: 'grid', 
                  gridTemplateColumns: '1fr', 
                  gap: '0.5rem'
                }} className="sm:grid-cols-2">
                  <div>
                    <p style={{ fontWeight: 500, color: 'var(--evening-blue)' }}>Monday - Friday</p>
                    <p style={{ color: 'rgba(26, 95, 122, 0.8)' }}>9:00 AM - 6:00 PM</p>
                  </div>
                  <div>
                    <p style={{ fontWeight: 500, color: 'var(--evening-blue)' }}>Saturday</p>
                    <p style={{ color: 'rgba(26, 95, 122, 0.8)' }}>10:00 AM - 4:00 PM</p>
                  </div>
                  <div>
                    <p style={{ fontWeight: 500, color: 'var(--evening-blue)' }}>Sunday</p>
                    <p style={{ color: 'rgba(26, 95, 122, 0.8)' }}>Closed</p>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
          
          {/* Contact Form */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
          >
            <div style={{ 
              backgroundColor: 'var(--warm-white)', 
              padding: '2rem', 
              borderRadius: '0.75rem', 
              boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', 
              border: '1px solid var(--sand)'
            }}>
              <h3 style={{ 
                fontSize: '1.5rem', 
                fontWeight: 700, 
                color: 'var(--night-blue)', 
                marginBottom: '1.5rem'
              }}>Send Us a Message</h3>
              
              {isSubmitted ? (
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  style={{ 
                    backgroundColor: 'rgba(255, 123, 84, 0.1)', 
                    padding: '1.5rem', 
                    borderRadius: '0.5rem', 
                    textAlign: 'center'
                  }}
                >
                  <div style={{ 
                    width: '4rem', 
                    height: '4rem', 
                    backgroundColor: 'var(--sunset-orange)', 
                    borderRadius: '9999px', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    margin: '0 auto', 
                    marginBottom: '1rem'
                  }}>
                    <Send style={{ height: '2rem', width: '2rem', color: 'var(--warm-white)' }} />
                  </div>
                  <h4 style={{ 
                    fontSize: '1.25rem', 
                    fontWeight: 700, 
                    color: 'var(--night-blue)', 
                    marginBottom: '0.5rem'
                  }}>Message Sent!</h4>
                  <p style={{ color: 'var(--evening-blue)' }}>
                    Thank you for reaching out. We'll get back to you as soon as possible.
                  </p>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                  <div>
                    <label 
                      htmlFor="name" 
                      style={{ 
                        display: 'block', 
                        fontSize: '0.875rem', 
                        fontWeight: 500, 
                        color: 'var(--night-blue)', 
                        marginBottom: '0.25rem'
                      }}
                    >
                      Your Name
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formState.name}
                      onChange={handleChange}
                      required
                      style={{ 
                        width: '100%', 
                        padding: '0.75rem 1rem', 
                        borderRadius: '0.5rem', 
                        border: '1px solid var(--sand)', 
                        outline: 'none',
                        backgroundColor: 'var(--warm-white)'
                      }}
                      placeholder="John Smith"
                    />
                  </div>
                  
                  <div style={{ 
                    display: 'grid', 
                    gridTemplateColumns: '1fr', 
                    gap: '1.5rem'
                  }} className="md:grid-cols-2">
                    <div>
                      <label 
                        htmlFor="email" 
                        style={{ 
                          display: 'block', 
                          fontSize: '0.875rem', 
                          fontWeight: 500, 
                          color: 'var(--night-blue)', 
                          marginBottom: '0.25rem'
                        }}
                      >
                        Email Address
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        value={formState.email}
                        onChange={handleChange}
                        required
                        style={{ 
                          width: '100%', 
                          padding: '0.75rem 1rem', 
                          borderRadius: '0.5rem', 
                          border: '1px solid var(--sand)', 
                          outline: 'none',
                          backgroundColor: 'var(--warm-white)'
                        }}
                        placeholder="john@example.com"
                      />
                    </div>
                    
                    <div>
                      <label 
                        htmlFor="phone" 
                        style={{ 
                          display: 'block', 
                          fontSize: '0.875rem', 
                          fontWeight: 500, 
                          color: 'var(--night-blue)', 
                          marginBottom: '0.25rem'
                        }}
                      >
                        Phone Number
                      </label>
                      <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value={formState.phone}
                        onChange={handleChange}
                        style={{ 
                          width: '100%', 
                          padding: '0.75rem 1rem', 
                          borderRadius: '0.5rem', 
                          border: '1px solid var(--sand)', 
                          outline: 'none',
                          backgroundColor: 'var(--warm-white)'
                        }}
                        placeholder="(555) 123-4567"
                      />
                    </div>
                  </div>
                  
                  <div>
                    <label 
                      htmlFor="message" 
                      style={{ 
                        display: 'block', 
                        fontSize: '0.875rem', 
                        fontWeight: 500, 
                        color: 'var(--night-blue)', 
                        marginBottom: '0.25rem'
                      }}
                    >
                      Your Message
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formState.message}
                      onChange={handleChange}
                      required
                      rows={5}
                      style={{ 
                        width: '100%', 
                        padding: '0.75rem 1rem', 
                        borderRadius: '0.5rem', 
                        border: '1px solid var(--sand)', 
                        outline: 'none',
                        resize: 'vertical',
                        backgroundColor: 'var(--warm-white)'
                      }}
                      placeholder="How can we help you?"
                    ></textarea>
                  </div>
                  
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    style={{ 
                      width: '100%', 
                      display: 'flex', 
                      alignItems: 'center', 
                      justifyContent: 'center',
                      backgroundColor: 'var(--sunset-orange)',
                      color: 'var(--warm-white)',
                      padding: '0.75rem 1.5rem',
                      borderRadius: '9999px',
                      fontWeight: 500,
                      border: 'none',
                      cursor: 'pointer',
                      transition: 'background-color 0.3s ease'
                    }}
                    onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'var(--sunset-pink)'}
                    onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'var(--sunset-orange)'}
                  >
                    {isSubmitting ? (
                      <>
                        <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Sending...
                      </>
                    ) : (
                      <>
                        Send Message
                        <Send style={{ marginLeft: '0.5rem', height: '1.25rem', width: '1.25rem' }} />
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}