৪.৫: যোগাযোগ পেজ তৈরি করা

mkdir -p app/contact

'use client'

import { useState } from 'react'

export default function ContactPage() {
  // ফর্ম স্টেট
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: ''
  })
  
  // লোডিং স্টেট
  const [isSubmitting, setIsSubmitting] = useState(false)
  
  // সাকসেস স্টেট
  const [isSuccess, setIsSuccess] = useState(false)
  
  // এরর স্টেট
  const [error, setError] = useState('')
  
  // ইনপুট হ্যান্ডলার
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }
  
  // ফর্ম সাবমিট হ্যান্ডলার
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    // ভ্যালিডেশন
    if (!formData.name || !formData.email || !formData.message) {
      setError('অনুগ্রহ করে সব প্রয়োজনীয় ফিল্ড পূরণ করুন।')
      return
    }
    
    setIsSubmitting(true)
    setError('')
    
    // ফর্ম সাবমিট সিমুলেশন
    try {
      // এখানে আসল API কল থাকবে
      await new Promise(resolve => setTimeout(resolve, 1500))
      
      setIsSuccess(true)
      setFormData({
        name: '',
        email: '',
        phone: '',
        subject: '',
        message: ''
      })
    } catch (err) {
      setError('ফর্ম সাবমিট করতে সমস্যা হয়েছে। অনুগ্রহ করে আবার চেষ্টা করুন।')
    } finally {
      setIsSubmitting(false)
    }
  }
  
  return (
    <div>
      {/* হেডার সেকশন */}
      <section className="bg-gray-100 py-16">
        <div className="container-custom">
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-6">যোগাযোগ করুন</h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              আমাদের সাথে যোগাযোগ করতে নিচের ফর্মটি পূরণ করুন। আমরা যত দ্রুত সম্ভব আপনার সাথে যোগাযোগ করব।
            </p>
          </div>
        </div>
      </section>
      
      {/* যোগাযোগ সেকশন */}
      <section className="py-16">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {/* যোগাযোগ ফর্ম */}
            <div className="lg:col-span-2">
              <div className="bg-white rounded-lg shadow-md p-8">
                <h2 className="text-2xl font-bold mb-6">আমাদের মেসেজ পাঠান</h2>
                
                {/* সাকসেস মেসেজ */}
                {isSuccess && (
                  <div className="bg-green-100 text-green-700 p-4 rounded-lg mb-6">
                    আপনার মেসেজ সফলভাবে পাঠানো হয়েছে। আমরা শীঘ্রই আপনার সাথে যোগাযোগ করব।
                  </div>
                )}
                
                {/* এরর মেসেজ */}
                {error && (
                  <div className="bg-red-100 text-red-700 p-4 rounded-lg mb-6">
                    {error}
                  </div>
                )}
                
                <form onSubmit={handleSubmit}>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                      <label htmlFor="name" className="block text-gray-700 mb-2">
                        আপনার নাম <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="আপনার নাম লিখুন"
                      />
                    </div>
                    <div>
                      <label htmlFor="email" className="block text-gray-700 mb-2">
                        ইমেইল <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="আপনার ইমেইল লিখুন"
                      />
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                      <label htmlFor="phone" className="block text-gray-700 mb-2">
                        ফোন নাম্বার
                      </label>
                      <input
                        type="tel"
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="আপনার ফোন নাম্বার লিখুন"
                      />
                    </div>
                    <div>
                      <label htmlFor="subject" className="block text-gray-700 mb-2">
                        বিষয়
                      </label>
                      <select
                        id="subject"
                        name="subject"
                        value={formData.subject}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      >
                        <option value="">বিষয় নির্বাচন করুন</option>
                        <option value="general">সাধারণ প্রশ্ন</option>
                        <option value="support">সাপোর্ট</option>
                        <option value="quote">কোটেশন অনুরোধ</option>
                        <option value="partnership">পার্টনারশিপ</option>
                        <option value="other">অন্যান্য</option>
                      </select>
                    </div>
                  </div>
                  
                  <div className="mb-6">
                    <label htmlFor="message" className="block text-gray-700 mb-2">
                      মেসেজ <span className="text-red-500">*</span>
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      rows={6}
                      className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="আপনার মেসেজ লিখুন"
                    ></textarea>
                  </div>
                  
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className={`btn-primary px-8 py-3 ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
                  >
                    {isSubmitting ? 'পাঠানো হচ্ছে...' : 'মেসেজ পাঠান'}
                  </button>
                </form>
              </div>
            </div>
            
            {/* যোগাযোগ তথ্য */}
            <div>
              <div className="bg-white rounded-lg shadow-md p-8 mb-8">
                <h2 className="text-2xl font-bold mb-6">যোগাযোগ তথ্য</h2>
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="bg-blue-100 text-blue-600 p-2 rounded-full mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                      </svg>
                    </div>
                    <div>
                      <h3 className="font-bold mb-1">ঠিকানা</h3>
                      <p className="text-gray-700">১২৩, আজিমপুর রোড, ঢাকা-১২০৫, বাংলাদেশ</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-blue-100 text-blue-600 p-2 rounded-full mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                      </svg>
                    </div>
                    <div>
                      <h3 className="font-bold mb-1">ফোন</h3>
                      <p className="text-gray-700">+৮৮০ ১৭১২ ৩৪৫৬৭৮</p>
                      <p className="text-gray-700">+৮৮০ ১৮১২ ৩৪৫৬৭৮</p>
                    </div>
                  </li>
                  <li className="flex items-start">
                    <div className="bg-blue-100 text-blue-600 p-2 rounded-full mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                      </svg>
                    </div>
                    <div>
                      <h3 className="font-bold mb-1">ইমেইল</h3>
                      <p className="text-gray-700">info@example.com</p>
                      <p className="text-gray-700">support@example.com</p>
                    </div>
                  </li>
                </ul>
              </div>
              
              <div className="bg-white rounded-lg shadow-md p-8">
                <h2 className="text-2xl font-bold mb-6">অফিস আওয়ার</h2>
                <ul className="space-y-2">
                  <li className="flex justify-between">
                    <span className="text-gray-700">সোমবার - শুক্রবার:</span>
                    <span className="font-medium">সকাল ৯টা - বিকাল ৬টা</span>
                  </li>
                  <li className="flex justify-between">
                    <span className="text-gray-700">শনিবার:</span>
                    <span className="font-medium">সকাল ১০টা - বিকাল ৪টা</span>
                  </li>
                  <li className="flex justify-between">
                    <span className="text-gray-700">রবিবার:</span>
                    <span className="font-medium">বন্ধ</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* ম্যাপ সেকশন */}
      <section className="py-16 bg-gray-100">
        <div className="container-custom">
          <h2 className="text-3xl font-bold mb-8 text-center">আমাদের অবস্থান</h2>
          <div className="h-96 bg-gray-300 rounded-lg shadow-md">
            {/* এখানে Google Map ইম্বেড করা হবে */}
            <div className="w-full h-full flex items-center justify-center">
              <p className="text-gray-600">এখানে Google Map ইম্বেড করা হবে</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}