import { useState } from 'react'

export default function Contact({ selectedSeed }) {
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    village: '',
    district: '',
    state: '',
    seed: selectedSeed?.name || '',
    message: ''
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    alert('धन्यवाद! हमारी टीम जल्द ही आपसे संपर्क करेगी।\n\nThank you! Our team will contact you soon.')
    setFormData({
      name: '',
      phone: '',
      village: '',
      district: '',
      state: '',
      seed: '',
      message: ''
    })
  }

  return (
    <section id="contact" className="py-20 bg-gradient-to-b from-gray-50 to-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold text-kisan-soil mb-4">
            ज़रूरत बताएं, बीज पाएं
          </h2>
          <p className="text-gray-600 text-lg">
            अपनी ज़रूरत बताएं और हम आपके खेत के लिए सही बीजेजें
 भ          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-12">
          <div>
            <div className="bg-kisan-green rounded-2xl p-8 text-white">
              <h3 className="text-2xl font-bold mb-6">📞 हेल्पलाइन</h3>
              
              <div className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                    <span>📱</span>
                  </div>
                  <div>
                    <p className="text-sm text-kisan-light">Call for Orders</p>
                    <p className="text-xl font-semibold">1800-XXX-XXXX</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                    <span>💬</span>
                  </div>
                  <div>
                    <p className="text-sm text-kisan-light">WhatsApp</p>
                    <p className="text-xl font-semibold">+91 XXXXX XXXXX</p>
                  </div>
                </div>
                
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                    <span>✉️</span>
                  </div>
                  <div>
                    <p className="text-sm text-kisan-light">Email</p>
                    <p className="text-xl font-semibold">info@kisanbeejseva.com</p>
                  </div>
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-white/20">
                <p className="font-semibold mb-3">कार्य समय:</p>
                <p className="text-kisan-light">सोमवार - शनिवार: सुबह 8 बजे - रात 8 बजे</p>
              </div>
            </div>

            <div className="mt-6 bg-kisan-gold/10 rounded-2xl p-6 border-2 border-kisan-gold">
              <h4 className="font-bold text-kisan-soil mb-2">🎁 आज का ऑफर</h4>
              <p className="text-gray-700">
                पहले ऑर्डर पर 10% छूट + मुफ्त कृषि सलाह!
              </p>
            </div>
          </div>

          <form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow-xl p-8">
            <h3 className="text-2xl font-bold text-kisan-soil mb-6">ऑर्डर फॉर्म</h3>
            
            <div className="grid sm:grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block text-gray-700 font-medium mb-2">नाम / Name</label>
                <input
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({...formData, name: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
                  placeholder="आपका नाम"
                />
              </div>
              <div>
                <label className="block text-gray-700 font-medium mb-2">मोबाइल / Mobile</label>
                <input
                  type="tel"
                  required
                  value={formData.phone}
                  onChange={(e) => setFormData({...formData, phone: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
                  placeholder="10 अंकों का मोबाइल"
                />
              </div>
            </div>

            <div className="grid sm:grid-cols-2 gap-4 mb-4">
              <div>
                <label className="block text-gray-700 font-medium mb-2">गांव / Village</label>
                <input
                  type="text"
                  required
                  value={formData.village}
                  onChange={(e) => setFormData({...formData, village: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
                  placeholder="आपका गांव"
                />
              </div>
              <div>
                <label className="block text-gray-700 font-medium mb-2">जिला / District</label>
                <input
                  type="text"
                  required
                  value={formData.district}
                  onChange={(e) => setFormData({...formData, district: e.target.value})}
                  className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
                  placeholder="आपका जिला"
                />
              </div>
            </div>

            <div className="mb-4">
              <label className="block text-gray-700 font-medium mb-2">राज्य / State</label>
              <select
                required
                value={formData.state}
                onChange={(e) => setFormData({...formData, state: e.target.value})}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
              >
                <option value="">राज्य चुनें</option>
                <option value="UP">उत्तर प्रदेश</option>
                <option value="MP">मध्य प्रदेश</option>
                <option value="RJ">राजस्थान</option>
                <option value="HR">हरियाणा</option>
                <option value="PB">पंजाब</option>
                <option value="BR">बिहार</option>
                <option value="MH">महाराष्ट्र</option>
                <option value="KA">कर्नाटक</option>
                <option value="TN">तमिलनाडु</option>
                <option value="AP">आंध्र प्रदेश</option>
                <option value="OTHER">अन्य</option>
              </select>
            </div>

            <div className="mb-4">
              <label className="block text-gray-700 font-medium mb-2">बीज का नाम / Seed Required</label>
              <select
                value={formData.seed}
                onChange={(e) => setFormData({...formData, seed: e.target.value})}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition"
              >
                <option value="">बीज चुनें</option>
                <option value="धान">धान / Rice</option>
                <option value="गेहूं">गेहूं / Wheat</option>
                <option value="मक्का">मक्का / Maize</option>
                <option value="मूंग">मूंग / Moong</option>
                <option value="अरहर">अरहर / Arhar</option>
                <option value="सरसों">सरसों / Mustard</option>
                <option value="सोयाबीन">सोयाबीन / Soybean</option>
                <option value="मूंगफली">मूंगफली / Groundnut</option>
                <option value="कपास">कपास / Cotton</option>
                <option value="सब्जी">सब्जी के बीज / Vegetables</option>
                <option value="अन्य">अन्य / Other</option>
              </select>
            </div>

            <div className="mb-6">
              <label className="block text-gray-700 font-medium mb-2">संदेश / Message</label>
              <textarea
                value={formData.message}
                onChange={(e) => setFormData({...formData, message: e.target.value})}
                rows={3}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-kisan-green focus:ring-2 focus:ring-kisan-green/20 outline-none transition resize-none"
                placeholder="आपका संदेश या कोई विशेष आवश्यकता..."
              />
            </div>

            <button
              type="submit"
              className="w-full bg-kisan-green text-white py-4 rounded-xl font-bold text-lg hover:bg-kisan-dark transition transform hover:scale-[1.02]"
            >
              📩 भेजें / Submit
            </button>
          </form>
        </div>
      </div>
    </section>
  )
}