import { useState } from 'react'
import { contactFormInfo } from '../../data/siteData'

export default function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: '',
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Form submitted:', formData)
    alert('Message sent successfully!')
    setFormData({ name: '', email: '', subject: '', message: '' })
  }

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

  return (
    <section className="py-20 bg-white" id="contact">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12">
          {/* Contact Info */}
          <div className="contact-left">
            <h4 className="text-2xl font-bold text-title mb-4 font-sans">
              {contactFormInfo.title}
            </h4>
            <h6 className="text-text mb-6">
              {contactFormInfo.subtitle}
            </h6>
            <div className="hours space-y-4">
              <div>
                <h6 className="font-semibold text-title mt-3">Email:</h6>
                <p>
                  <a href={`mailto:${contactFormInfo.email}`} className="text-text hover:text-primary transition-colors">
                    {contactFormInfo.email}
                  </a>
                </p>
              </div>
              <div>
                <h6 className="font-semibold text-title mt-3">Address:</h6>
                <p className="text-text">{contactFormInfo.address}</p>
              </div>
              <div>
                <h6 className="font-semibold text-title mt-3">Contact:</h6>
                <p>
                  <a href={`tel:${contactFormInfo.phone}`} className="text-text hover:text-primary transition-colors">
                    {contactFormInfo.phone}
                  </a>
                </p>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="contact-right">
            <form onSubmit={handleSubmit} className="signin-form">
              <div className="input-grids space-y-4">
                <input
                  type="text"
                  name="name"
                  id="w3lName"
                  value={formData.name}
                  onChange={handleChange}
                  placeholder="Your Name*"
                  required
                  className="contact-input"
                />
                <input
                  type="email"
                  name="email"
                  id="w3lSender"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="Your Email*"
                  required
                  className="contact-input"
                />
                <input
                  type="text"
                  name="subject"
                  id="w3lSubect"
                  value={formData.subject}
                  onChange={handleChange}
                  placeholder="Subject*"
                  className="contact-input"
                />
              </div>
              <div className="form-input mt-4">
                <textarea
                  name="message"
                  id="w3lMessage"
                  value={formData.message}
                  onChange={handleChange}
                  placeholder="Type your message here*"
                  rows={5}
                  required
                  className="contact-input resize-none"
                />
              </div>
              <button
                type="submit"
                className="mt-6 px-8 py-3 bg-secondary hover:bg-secondary/80 text-white font-semibold rounded transition-colors"
              >
                Send Message
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}
