import Image from "next/image";
import Link from "next/link";
import { FadeIn, SlideInLeft, SlideInRight, ScaleIn, StaggerContainer, StaggerItem, HoverScale, PageTransition } from "@/components/Motion";

export default function Contact() {
  // Contact information from info.txt
  const contactInfo = {
    address: "Al Hashmi Street, Irbid City, 21110",
    email: "contact@yznapps.com",
    phone: "+962 (781) 881-280"
  };

  return (
    <PageTransition>
      <div className="flex flex-col w-full">
        {/* Hero Section */}
        <FadeIn>
          <section className="relative bg-gray-900 text-white py-16 md:py-24">
            <div className="absolute inset-0 z-0 opacity-30">
              <Image 
                src="/images/forex2.jpg" 
                alt="Contact Us Background" 
                fill 
                style={{objectFit: 'cover'}} 
                priority 
              />
            </div>
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
              <div className="max-w-3xl">
                <SlideInLeft delay={0.2}>
                  <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">Contact Us</h1>
                </SlideInLeft>
                <SlideInLeft delay={0.4}>
                  <p className="text-lg md:text-xl mb-8">Get in touch with our team to discuss your IT needs</p>
                </SlideInLeft>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* Contact Section */}
        <FadeIn delay={0.3}>
          <section className="py-16 bg-white dark:bg-gray-900">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
                {/* Contact Form */}
                <SlideInLeft delay={0.4}>
                  <div className="bg-gray-50 dark:bg-gray-800 p-8 rounded-lg shadow-md">
                    <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">Send Us a Message</h2>
                    <form className="space-y-6">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                          <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
                          <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
                            placeholder="John Doe" 
                            required 
                          />
                        </div>
                        <div>
                          <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Email</label>
                          <input 
                            type="email" 
                            id="email" 
                            name="email" 
                            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
                            placeholder="john@example.com" 
                            required 
                          />
                        </div>
                      </div>
                      <div>
                        <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
                        <input 
                          type="text" 
                          id="subject" 
                          name="subject" 
                          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
                          placeholder="How can we help you?" 
                          required 
                        />
                      </div>
                      <div>
                        <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
                        <textarea 
                          id="message" 
                          name="message" 
                          rows="5" 
                          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white" 
                          placeholder="Tell us about your project..." 
                          required
                        ></textarea>
                      </div>
                      <div>
                        <HoverScale>
                          <button 
                            type="submit" 
                            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-md transition duration-300"
                          >
                            Send Message
                          </button>
                        </HoverScale>
                      </div>
                    </form>
                  </div>
                </SlideInLeft>
                
                {/* Contact Information */}
                <SlideInRight delay={0.4}>
                  <div className="flex flex-col justify-between">
                    <div>
                      <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">Contact Information</h2>
                      <p className="text-gray-600 dark:text-gray-300 mb-8">
                        Have questions or need assistance? Our team is here to help. Reach out to us using any of the methods below.
                      </p>
                      
                      <StaggerContainer className="space-y-6">
                        <StaggerItem>
                          <div className="flex items-start">
                            <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                              <svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                              </svg>
                            </div>
                            <div className="ml-4">
                              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Address</h3>
                              <p className="mt-1 text-gray-600 dark:text-gray-300">{contactInfo.address}</p>
                            </div>
                          </div>
                        </StaggerItem>
                        
                        <StaggerItem>
                          <div className="flex items-start">
                            <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                              <svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                              </svg>
                            </div>
                            <div className="ml-4">
                              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Email</h3>
                              <p className="mt-1 text-gray-600 dark:text-gray-300">
                                <a href={`mailto:${contactInfo.email}`} className="hover:text-blue-600 dark:hover:text-blue-400">
                                  {contactInfo.email}
                                </a>
                              </p>
                            </div>
                          </div>
                        </StaggerItem>
                        
                        <StaggerItem>
                          <div className="flex items-start">
                            <div className="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                              <svg className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                              </svg>
                            </div>
                            <div className="ml-4">
                              <h3 className="text-lg font-medium text-gray-900 dark:text-white">Phone</h3>
                              <p className="mt-1 text-gray-600 dark:text-gray-300">
                                <a href={`tel:${contactInfo.phone}`} className="hover:text-blue-600 dark:hover:text-blue-400">
                                  {contactInfo.phone}
                                </a>
                              </p>
                            </div>
                          </div>
                        </StaggerItem>
                      </StaggerContainer>
                    </div>
                    
                    {/* Map or Image */}
                    <ScaleIn delay={0.6}>
                      <div className="mt-12 h-64 relative rounded-lg overflow-hidden shadow-lg">
                        <Image 
                          src="/images/website.jpg" 
                          alt="Office Location" 
                          fill 
                          style={{objectFit: 'cover'}} 
                        />
                        <div className="absolute inset-0 bg-blue-600 bg-opacity-20 flex items-center justify-center">
                          <span className="text-white text-lg font-semibold px-4 py-2 bg-black bg-opacity-50 rounded-md">Our Office Location</span>
                        </div>
                      </div>
                    </ScaleIn>
                  </div>
                </SlideInRight>
              </div>
            </div>
          </section>
        </FadeIn>

        {/* FAQ Section */}
        <FadeIn delay={0.5}>
          <section className="py-16 bg-gray-50 dark:bg-gray-800">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
              <div className="text-center mb-12">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Frequently Asked Questions</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Find quick answers to common questions</p>
              </div>
              
              <div className="max-w-3xl mx-auto space-y-6">
                <StaggerContainer className="space-y-6">
                  <StaggerItem>
                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">What services do you offer?</h3>
                      <p className="text-gray-600 dark:text-gray-300">We offer a comprehensive range of IT services including web development, mobile app development, web hosting, CMS solutions, and managed VPS services.</p>
                    </div>
                  </StaggerItem>
                  <StaggerItem>
                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">How much does a typical project cost?</h3>
                      <p className="text-gray-600 dark:text-gray-300">Project costs vary depending on requirements, complexity, and timeline. We provide detailed quotes after an initial consultation to understand your specific needs.</p>
                    </div>
                  </StaggerItem>
                  <StaggerItem>
                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">How long does it take to complete a project?</h3>
                      <p className="text-gray-600 dark:text-gray-300">Project timelines depend on scope and complexity. A simple website might take 2-4 weeks, while complex web applications or mobile apps can take several months. We'll provide a timeline estimate during our initial discussions.</p>
                    </div>
                  </StaggerItem>
                  <StaggerItem>
                    <div className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow-md">
                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Do you provide ongoing support after project completion?</h3>
                      <p className="text-gray-600 dark:text-gray-300">Yes, we offer ongoing support and maintenance packages after project completion. Our support includes bug fixes, security updates, performance optimization, and technical assistance to ensure your solution continues to run smoothly.</p>
                    </div>
                  </StaggerItem>
                </StaggerContainer>
              </div>
            </div>
          </section>
        </FadeIn>
      </div>
    </PageTransition>
  );
}