import React, { useState } from 'react';

const Contact = () => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        phone: '',
        interest: '',
        message: ''
    });

    const [submissionStatus, setSubmissionStatus] = useState(null); // 'success', 'error', 'submitting'

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = async (e) => {
    e.preventDefault(); // Prevent default form submission and page reload
    setSubmissionStatus('submitting');

    try {
      const response = await fetch('/api/v1/contact', { // Replace with your API endpoint
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setSubmissionStatus('success');
        setFormData({ name: '', email: '', phone: '', interest: '', message: '' }); // Clear form
      } else {
        setSubmissionStatus('error');
        console.error('API submission failed:', response.statusText);
      }
    } catch (error) {
      setSubmissionStatus('error');
      console.error('Error submitting form:', error);
    }
    // e.preventDefault();
    // // Handle form submission logic here
    // console.log('Form submitted:', formData);
    // alert('Thank you for your message!');
    // setFormData({ name: '', email: '', phone: '', interest: '', message: '' });
    };

    return (
        <div className="w-full">
            <div className="bg-red-700 text-white text-center p-8">
                <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Want to help people?</h2>
                <h1 className="text-4xl md:text-6xl font-extrabold mt-2">Join our team.</h1>
            </div>

            <div className="bg-white py-12 sm:py-16">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">

                        {/* Contact Form Section */}
                        <div className="bg-gray-50 p-8 rounded-lg shadow-lg">
                            <h2 className="text-3xl font-bold text-gray-900 mb-6 border-b-2 border-red-600 pb-2">APPLY HERE</h2>
                            <form onSubmit={handleSubmit} className="space-y-6">
                                <div>
                                    <label htmlFor="interest" className="block text-sm font-medium text-gray-700">I would like to...</label>
                                    <select id="interest" name="interest" value={formData.interest} onChange={handleChange} required className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md">
                                        <option value="" disabled>Select an option</option>
                                        <option>Ask a Question</option>
                                        <option>Apply as a Full Member</option>
                                        <option>Apply as a Junior Member</option>
                                    </select>
                                </div>
                                <div>
                                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
                                    <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} required className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
                                </div>
                                <div>
                                    <label htmlFor="email" className="block text-sm font-medium text-gray-700">Email Address</label>
                                    <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} required className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
                                </div>
                                <div>
                                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number</label>
                                    <input type="tel" name="phone" id="phone" value={formData.phone} onChange={handleChange} className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
                                </div>
                                <div>
                                    <label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</label>
                                    <textarea id="message" name="message" rows="4" value={formData.message} onChange={handleChange} required className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm"></textarea>
                                </div>
                                <div>
                                    <button type="submit" disabled={submissionStatus === 'submitting'} className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transform hover:scale-105 transition-transform duration-200">
                                        {submissionStatus === 'submitting' ? 'Sending...' : 'SUBMIT'}
                                    </button>
                                    {submissionStatus === 'success' && (
                                        <p style={{ color: 'green' }}>Message sent successfully!</p>
                                    )}
                                    {submissionStatus === 'error' && (
                                        <p style={{ color: 'red' }}>Error sending message. Please try again.</p>
                                    )}
                                </div>
                            </form>
                        </div>

                        {/* Location and Emergency Info Section */}
                        <div className="space-y-8">
                            <div className="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
                                <h2 className="text-3xl font-bold mb-4 border-b-2 border-red-600 pb-2">Our Location</h2>
                                <p className="text-lg">175 Floral Avenue</p>
                                <p className="text-lg">New Providence, NJ 07974</p>
                                <a href="mailto:npfdfireofficers@gmail.com" className="mt-4 inline-block text-red-400 hover:text-red-300 transition-colors duration-200">
                                    npfdfireofficers@gmail.com
                                </a>
                            </div>

                            <div className="bg-yellow-400 border-l-4 border-yellow-600 text-yellow-900 p-6 rounded-r-lg shadow-lg">
                                <h2 className="text-2xl font-extrabold">Call 911 if you are having an emergency.</h2>
                            </div>

                            <div className="text-center text-xs text-gray-500 mt-6">
                                <p>This site is protected by reCAPTCHA and the Google</p>
                                <p>
                                    <a href="https://www.google.com/intl/en/policies/privacy/" className="underline hover:text-red-600">Privacy Policy</a> and 
                                    <a href="https://www.google.com/intl/en/policies/terms/" className="underline hover:text-red-600"> Terms of Service</a> apply.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Contact;
