"use client"
import { useState } from 'react';
import { Building2, Mail, PhoneCall, Send } from 'lucide-react';
import BannerHeader from '@/components/bannerHeader';
import contactImg from '../../../../public/assets/contacts/contact-email4.jpg'

export default function page() {
  const [formData, setFormData] = useState({
    name: '',
    lastName: '',
    email: '',
    phone: '',
    message: ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

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

  return (
    <div className="">
      <BannerHeader bannerTitle='Contact' image={contactImg.src}></BannerHeader>
      {/* <div className="relative bg-orange-50">
        <div className="max-w-7xl mx-auto px-8 pb-20 pt-15">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="relative z-10">
              <div className="mb-8">
                <Send className="w-8 h-8 text-orange-600 transform rotate-15" />
              </div>
              
              <h1 className="text-5xl font-bold text-orange-600 mb-4">
                Talk to us
              </h1>
              
              <p className="text-xl text-gray-700 mb-2">
                We are just a click away!!
              </p>
              
              <p className="text-gray-600 text-sm leading-relaxed max-w-md">
                Whether you're here to supercharge your business, explore partnership opportunities, or we're ready to help or simply say hello, we're ready to help.
              </p>

              <div className="absolute left-42 -top-10">
                <Send className="w-22 h-22 text-orange-600/20 transform rotate-20" />
              </div>
            </div>

            <div className="relative">
              <div className="absolute -left-52 top-1/2 hidden lg:block">
                <svg width="200" height="100" className="overflow-visible">
                  <path 
                    d="M 0 50 Q 100 20, 200 50" 
                    stroke="#ff5722" 
                    strokeWidth="4" 
                    strokeDasharray="5,5" 
                    fill="none"
                    opacity="0.5"
                  />
                </svg>
                <div className="absolute right-0 top-5">
                  <Send className="w-12 h-12 text-orange-600 transform rotate-60" />
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-2xl p-8 relative z-10">
                <h2 className="text-2xl font-bold text-orange-600 mb-6">
                  Contact Form
                </h2>
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="name" className="block text-xs text-gray-500 mb-1">
                        Name
                      </label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        className="w-full px-3 py-2 border-b border-gray-300 focus:border-orange-600 focus:outline-none transition-colors"
                        placeholder=""
                      />
                    </div>
                    <div>
                      <label htmlFor="lastName" className="block text-xs text-gray-500 mb-1">
                        Last Name
                      </label>
                      <input
                        type="text"
                        id="lastName"
                        name="lastName"
                        value={formData.lastName}
                        onChange={handleChange}
                        className="w-full px-3 py-2 border-b border-gray-300 focus:border-orange-600 focus:outline-none transition-colors"
                        placeholder=""
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="email" className="block text-xs text-gray-500 mb-1">
                      Email Address
                    </label>
                    <input
                      type="text"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border-b border-gray-300 focus:border-orange-600 focus:outline-none transition-colors"
                      placeholder=""
                    />
                  </div>

                  <div>
                    <label htmlFor="phone" className="block text-xs text-gray-500 mb-1">
                      Phone
                    </label>
                    <input
                      type="tel"
                      id="phone"
                      name="phone"
                      value={formData.phone}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border-b border-gray-300 focus:border-orange-600 focus:outline-none transition-colors"
                      placeholder=""
                    />
                  </div>

                  <div>
                    <label htmlFor="message" className="block text-xs text-gray-500 mb-1">
                      Description
                    </label>
                    <input
                      type="text"
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border-b border-gray-300 focus:border-orange-600 focus:outline-none transition-colors"
                    />
                  </div>

                  <div className="pt-4 flex justify-end">
                    <button
                      type="submit"
                      className="bg-orange-600 text-white px-8 py-2 rounded hover:bg-[#f4511e] transition-colors font-medium"
                    >
                      Submit
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div> */}

      <div className="py-10 lg:py-16 relative bg-green-50">
        <div className="max-w-7xl mx-auto px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
                <h2 className="lg:text-5xl text-3xl font-bold text-green-700 mb-12">
                  Office Locations
                </h2>   
               <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full  flex items-center justify-center flex-shrink-0">
                  <div className="w-10 h-10 rounded-full">
                   <Building2 className='text-green-700'></Building2>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-bold text-black mb-2">Head Office</h3>
                  <p className="text-gray-700 text-sm leading-relaxed">
                    Suvastu Suraiya Trade Center, Plot-57, Road-21,<br /> Kemal Ataturk Avenue,  Banani, Dhaka 1212.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full  flex items-center justify-center flex-shrink-0">
                  <div className="w-10 h-10 rounded-full">
                    <Mail className='text-green-700'></Mail>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-bold text-black mb-2">Email</h3>
                  <p className="text-gray-700 text-sm leading-relaxed">
                    Email: info@sqgroup.com
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-xl overflow-hidden shadow-2xl border-2 border-orange-600/30 h-80 lg:h-96">
              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14602.756495418076!2d90.38753628730775!3d23.794082140116412!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c70dde86a1eb%3A0x60aed00249630def!2sSQ%20Group!5e0!3m2!1sen!2sbd!4v1782645430242!5m2!1sen!2sbd" width="600" height="450" loading="lazy"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}