import React, { useState } from 'react';

const Contact: React.FC = () => {
  const [status, setStatus] = useState<'idle' | 'sending' | 'success'>('idle');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('sending');
    setTimeout(() => setStatus('success'), 1500);
  };

  return (
    <section id="contact" className="py-24 bg-white">
      <div className="container mx-auto px-6">
        <div className="max-w-6xl mx-auto bg-slate-900 rounded-[2rem] md:rounded-[3rem] overflow-hidden shadow-2xl flex flex-col lg:flex-row">
          {/* Information Section */}
          <div className="lg:w-5/12 p-8 md:p-16 bg-blue-600 text-white flex flex-col justify-between">
            <div>
              <h3 className="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h3>
              <p className="text-blue-100 mb-12 text-lg">
                Ready to optimize your industrial infrastructure? Our engineering team is standing by to assist with your technical inquiries.
              </p>

              <div className="space-y-8">
                <div className="flex gap-5 items-start">
                  <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                    <i className="fas fa-map-marker-alt"></i>
                  </div>
                  <div>
                    <h4 className="font-bold">Headquarters</h4>
                    <p className="text-blue-100 text-sm">Industrial Hub B123, Gangnam District<br />Seoul, South Korea</p>
                  </div>
                </div>
                <div className="flex gap-5 items-start">
                  <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                    <i className="fas fa-phone-alt"></i>
                  </div>
                  <div>
                    <h4 className="font-bold">Phone</h4>
                    <p className="text-blue-100 text-sm">+82 2-1234-5678</p>
                  </div>
                </div>
                <div className="flex gap-5 items-start">
                  <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
                    <i className="fas fa-envelope"></i>
                  </div>
                  <div>
                    <h4 className="font-bold">Email</h4>
                    <p className="text-blue-100 text-sm">solutions@hanmocontrol.com</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="mt-16 flex gap-4">
              <a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
                <i className="fab fa-linkedin-in text-xl"></i>
              </a>
              <a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
                <i className="fab fa-twitter text-xl"></i>
              </a>
            </div>
          </div>

          {/* Form Section */}
          <div className="lg:w-7/12 p-8 md:p-16 bg-white">
            {status === 'success' ? (
              <div className="h-full flex flex-col items-center justify-center text-center space-y-6">
                <div className="w-24 h-24 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl">
                  <i className="fas fa-check"></i>
                </div>
                <h4 className="text-3xl font-extrabold text-slate-900">Inquiry Received</h4>
                <p className="text-slate-500 text-lg">Thank you for reaching out. An automation consultant will review your request and contact you within 24 hours.</p>
                <button 
                  onClick={() => setStatus('idle')}
                  className="text-blue-600 font-bold hover:underline"
                >
                  Send another request
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid sm:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Full Name</label>
                    <input required type="text" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="John Doe" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Work Email</label>
                    <input required type="email" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="j.doe@company.com" />
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Requirement Type</label>
                  <select className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all">
                    <option>DCS Architecture Design</option>
                    <option>SCADA System Integration</option>
                    <option>Database & Historian Setup</option>
                    <option>Field Instrumentation Supply</option>
                    <option>Technical Support</option>
                  </select>
                </div>
                <div className="space-y-2">
                  <label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Project Details</label>
                  <textarea required rows={5} className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="Tell us about your technical requirements..."></textarea>
                </div>
                <button 
                  disabled={status === 'sending'}
                  className="w-full bg-slate-900 hover:bg-blue-600 text-white font-bold py-5 rounded-xl shadow-lg transition-all active:scale-[0.98] disabled:opacity-50"
                >
                  {status === 'sending' ? 'Processing...' : 'Submit Inquiry'}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;