'use client'
import React, { useState, ChangeEvent, MouseEvent } from 'react';
import Link from 'next/link';
import { ChevronRight } from 'lucide-react';

interface FormData {
  name: string;
  phone: string;
  service: string;
  email: string;
  organization: string;
  description: string;
}

const ContactForm: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    phone: '',
    service: '',
    email: '',
    organization: '',
    description: ''
  });

  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e: MouseEvent<HTMLButtonElement>): Promise<void> => {
    e.preventDefault();
    setIsSubmitting(true);
    
    try {
      // Simulate API call
      await new Promise<void>((resolve) => setTimeout(resolve, 1000));
      console.log('Form submitted:', formData);
      
      // Reset form after successful submission
      setFormData({
        name: '',
        phone: '',
        service: '',
        email: '',
        organization: '',
        description: ''
      });
      
      alert('Message sent successfully!');
    } catch (error) {
      console.error('Error submitting form:', error);
      alert('Error sending message. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen">
      {/* Breadcrumb Section */}
      <section className="py-4" style={{ backgroundColor: '#f4f4f4' }}>
        <div className="max-w-7xl mx-auto px-4">
          <nav className="flex items-center space-x-2 text-sm">
            <Link 
              href="/" 
              className="hover:opacity-70 transition-opacity duration-200"
              style={{ color: '#012068' }}
            >
              Home
            </Link>
            <ChevronRight className="w-4 h-4" style={{ color: '#012068' }} />
            <span className="font-medium" style={{ color: '#e64838' }}>
              Contact Us
            </span>
          </nav>
          
          {/* Page Header */}
          <div className="mt-6">
            <div className="flex items-center mb-4">
              <h1 className="text-3xl font-bold" style={{ color: '#012068' }}>
                Get in Touch
              </h1>
            </div>
            <p className="text-base max-w-2xl leading-relaxed"style={{ color: '#333' }}>
              We&apos;re here to help with your research and innovation needs. Reach out to our team for personalized support.
            </p>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <div className="py-8 px-4"style={{ backgroundColor: '#fff' }}>
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
            
            {/* Left side - Content */}
            <div className="space-y-6">
              <div className="space-y-5">
                <h2 className="text-2xl lg:text-3xl font-bold leading-tight" style={{ color: '#012068' }}>
                  Ready to collaborate on your next breakthrough?
                </h2>
                <p className="text-base leading-relaxed" style={{ color: '#333' }}>
                  Whether you need genomics analysis, research consultation, or laboratory services, our expert team is ready to support your scientific endeavors.
                </p>
                
                {/* Contact Features */}
                <div className="space-y-3 mt-4">
                  <div className="flex items-center space-x-3">
                    <div 
                      className="w-7 h-7 rounded-full flex items-center justify-center"
                      style={{ backgroundColor: '#012068' }}
                    >
                      <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <span className="text-md"style={{ color: '#333' }}>Quick response within 24 hours</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div 
                      className="w-7 h-7 rounded-full flex items-center justify-center"
                      style={{ backgroundColor: '#012068' }}
                    >
                      <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                    <span className="text-md" style={{ color: '#333' }}>Expert consultation available</span>
                  </div>
                  <div className="flex items-center space-x-3">
                    <div 
                      className="w-7 h-7 rounded-full flex items-center justify-center"
                      style={{ backgroundColor: '#012068' }}
                    >
                      <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                      </svg>
                    </div>
                    <span className="text-md" style={{ color: '#333' }}>Secure and confidential</span>
                  </div>
                </div>
              </div>

              {/* Contact Information */}
              <div className="rounded-lg border border-gray-300 p-6"style={{ backgroundColor: '#f4f4f4' }}>
                <h3 className="text-lg font-bold mb-1" style={{ color: '#012068' }}>
                  Contact Information
                </h3>
                <div className="w-9 h-0.5 rounded-lg mb-4" style={{ backgroundColor: '#e64838' }}></div>
                
                <div className="space-y-4">
                  <div className="flex items-start space-x-3">
                    <div 
                      className="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                      style={{ backgroundColor: '#012068' }}
                    >
                      <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="font-semibold text-sm mb-1" style={{ color: '#012068' }}>Address</h4>
                      <p className="text-xs leading-relaxed" style={{ color: '#333' }}>
                        Department of Trauma Surgery<br />
                        Room A601, 6th Floor, A Block<br />
                        CMC Vellore Ranipet Campus<br />
                        Kilminnal Village, Ranipet - 632517<br />
                        Tamil Nadu, India
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center space-x-3">
                    <div 
                      className="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0"
                      style={{ backgroundColor: '#012068' }}
                    >
                      <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="font-semibold text-sm mb-1" style={{ color: '#012068' }}>Phone</h4>
                      <p className="text-xs" style={{ color: '#333' }}>
                        0417-2224626
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center space-x-3">
                    <div 
                      className="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0"
                      style={{ backgroundColor: '#012068' }}
                    >
                      <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="font-semibold text-sm mb-1" style={{ color: '#012068' }}>Email</h4>
                      <p className="text-xs" style={{ color: '#333' }}>
                        traumasurg@cmcvellore.ac.in
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Right side - Contact form */}
            <div className="bg-white rounded-lg border border-gray-300 p-6 lg:p-8">
              <div className="mb-6">
                <h3 className="text-xl font-bold mb-3" style={{ color: '#012068' }}>
                  Send us a message
                </h3>
                <div className="w-12 h-1 rounded-lg" style={{ backgroundColor: '#e64838' }}></div>
              </div>
              
              <div className="space-y-4">
                {/* Name and Phone row */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <input
                      type="text"
                      name="name"
                      placeholder="Your Name"
                      value={formData.name}
                      onChange={handleChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 text-base"
                      style={{ '--tw-ring-color': '#012068', color:'#333' } as React.CSSProperties}
                      required
                    />
                  </div>
                  <div>
                    <input
                      type="tel"
                      name="phone"
                      placeholder="Your Phone"
                      value={formData.phone}
                      onChange={handleChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 text-base"
                      style={{ '--tw-ring-color': '#012068', color:'#333' } as React.CSSProperties}
                    />
                  </div>
                </div>

                {/* Service field */}
                <div>
                  <input
                    type="text"
                    name="service"
                    placeholder="Service and Product of Interest"
                    value={formData.service}
                    onChange={handleChange}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 text-base"
                    style={{ '--tw-ring-color': '#012068', color:'#333' } as React.CSSProperties}
                  />
                </div>

                {/* Email and Organization row */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <input
                      type="email"
                      name="email"
                      placeholder="Your Email"
                      value={formData.email}
                      onChange={handleChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 text-base"
                      style={{ '--tw-ring-color': '#012068', color:'#333' } as React.CSSProperties}
                      required
                    />
                  </div>
                  <div>
                    <input
                      type="text"
                      name="organization"
                      placeholder="Organization"
                      value={formData.organization}
                      onChange={handleChange}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 text-base"
                      style={{ '--tw-ring-color': '#012068', color:'#333' } as React.CSSProperties}
                    />
                  </div>
                </div>

                {/* Project description */}
                <div>
                  <textarea
                    name="description"
                    placeholder="Project description"
                    value={formData.description}
                    onChange={handleChange}
                    rows={5}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 text-base resize-none"
                    style={{ '--tw-ring-color': '#012068', color:'#333' } as React.CSSProperties}
                    required
                  />
                </div>

                {/* Submit button */}
                <div className="pt-4">
                  <button
                    type="button"
                    onClick={handleSubmit}
                    disabled={isSubmitting}
                    className={`w-full font-semibold py-3 px-6 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 text-base ${
                      isSubmitting 
                        ? 'cursor-not-allowed opacity-60' 
                        : 'hover:opacity-90'
                    }`}
                    style={{ 
                      backgroundColor: isSubmitting ? '#6b7280' : '#012068',
                      color: '#f4f4f4',
                      '--tw-ring-color': '#012068'
                    } as React.CSSProperties}
                  >
                    {isSubmitting ? (
                      <div className="flex items-center justify-center space-x-2">
                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        <span>Sending...</span>
                      </div>
                    ) : (
                      <div className="flex items-center justify-center space-x-2">
                        <span>Send Message</span>
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                      </div>
                    )}
                  </button>
                </div>
              </div>

              {/* Contact info */}
              <div className="mt-6 pt-6 border-t border-gray-300">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div className="flex items-center space-x-2">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: '#e64838' }}>
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    <span style={{ color: '#012068' }}>Quick response guaranteed</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" style={{ color: '#e64838' }}>
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                    <span style={{ color: '#012068' }}>Your data is secure</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          {/* Map Section */}
          <div className="mt-12">
            <div className="bg-white rounded-lg border border-gray-300 overflow-hidden">
              <div className="h-96 relative">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.1234567890123!2d79.2376943!3d12.9384508!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bad374304ae1249:0x77617f161cfad670!2sChristian+Medical+College+and+Hospital,+Ranipet+Campus+-+Vellore!5e0!3m2!1sen!2sin!4v1724612345678!5m2!1sen!2sin"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  title="Location Map"
                ></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactForm;