components/Contact.tsx

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

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Form submitted:', formData)
    alert('Thank you for your message. We will get back to you soon!')
    setFormData({ name: '', email: '', phone: '', message: '' })
  }

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

  return (
    <section id="contact" className="py-24 md:py-32 bg-margins-dark">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16">
          {/* Contact Info */}
          <div>
            <span className="text-margins-gray uppercase tracking-widest text-sm mb-4 block">Contact Us</span>
            <h2 className="text-4xl md:text-5xl font-light mb-8">Let's Build Something Great Together</h2>
            <p className="text-margins-gray leading-relaxed mb-12 max-w-lg">
              Whether you're looking to develop a new property, invest in real estate, or explore partnership 
              opportunities, we'd love to hear from you.
            </p>

            <div className="space-y-6">
              <div className="flex items-start space-x-4">
                <MapPin className="w-6 h-6 text-margins-gray mt-1" />
                <div>
                  <h4 className="font-light uppercase tracking-wider text-sm mb-1">Address</h4>
                  <p className="text-margins-gray">123 Development Avenue<br />Suite 500, Metropolis, NY 10001</p>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <Phone className="w-6 h-6 text-margins-gray mt-1" />
                <div>
                  <h4 className="font-light uppercase tracking-wider text-sm mb-1">Phone</h4>
                  <p className="text-margins-gray">+1 (555) 123-4567</p>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <Mail className="w-6 h-6 text-margins-gray mt-1" />
                <div>
                  <h4 className="font-light uppercase tracking-wider text-sm mb-1">Email</h4>
                  <p className="text-margins-gray">hello@marginsdevelopments.com</p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="bg-margins-black p-8 md:p-12 border border-margins-dark">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label htmlFor="name" className="block text-xs uppercase tracking-widest text-margins-gray mb-2">
                  Full Name
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formData.name}
                  onChange={handleChange}
                  required
                  className="w-full bg-transparent border-b border-margins-gray py-3 text-white focus:outline-none focus:border-white transition-colors"
                  placeholder="John Doe"
                />
              </div>

              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <label htmlFor="email" className="block text-xs uppercase tracking-widest text-margins-gray mb-2">
                    Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    className="w-full bg-transparent border-b border-margins-gray py-3 text-white focus:outline-none focus:border-white transition-colors"
                    placeholder="john@example.com"
                  />
                </div>
                <div>
                  <label htmlFor="phone" className="block text-xs uppercase tracking-widest text-margins-gray mb-2">
                    Phone
                  </label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    className="w-full bg-transparent border-b border-margins-gray py-3 text-white focus:outline-none focus:border-white transition-colors"
                    placeholder="+1 (555) 000-0000"
                  />
                </div>
              </div>

              <div>
                <label htmlFor="message" className="block text-xs uppercase tracking-widest text-margins-gray mb-2">
                  Message
                </label>
                <textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  required
                  rows={4}
                  className="w-full bg-transparent border-b border-margins-gray py-3 text-white focus:outline-none focus:border-white transition-colors resize-none"
                  placeholder="Tell us about your project..."
                />
              </div>

              <button
                type="submit"
                className="w-full mt-8 py-4 bg-white text-margins-black uppercase tracking-widest text-sm hover:bg-margins-gray hover:text-white transition-all duration-300 flex items-center justify-center gap-2"
              >
                Send Message
                <Send className="w-4 h-4" />
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Contact