import React from "react";
import Link from "next/link";
import Image from 'next/image'
import CONFIG from "../config.json";
import Router from 'next/router';
import { useState } from "react";
function Contactus({postData}) {
    const [isDisabled, setDisabled] = useState(false);
    const needToParse = JSON.stringify(postData.data);
    const arrData = JSON.parse(JSON.parse(needToParse));
    const contactUs = async event => {
        event.preventDefault()
        if(event.target.firstname.value !="" && event.target.lastname.value !="" && event.target.mobilenumber.value){
            setDisabled(true);
            const res = await fetch(CONFIG.SERVER_URL+'contactus', {
                body: JSON.stringify({
                  firstname: event.target.firstname.value,
                  lastname: event.target.lastname.value,
                  mobilenumber: event.target.mobilenumber.value,
                  email: event.target.email.value,
                  service: event.target.subject.value,
                  message: event.target.message.value,
                }),
                headers: {
                  'Content-Type': 'application/json'
                },
                method: 'POST'
              });
              const result = await res.json();
               if(result.status){
                Router.push('/thankyou');
              }
        }
      }

      const scrollPage = () => {
        window.scrollTo({ top: 900, behavior: 'smooth' })
      };
    return (
      <>
    <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img src="images/contact-us.jpg" alt="" title=""/>
            <h1 className="bg-text heading-employee">Connect</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down" onClick={() => scrollPage()}>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>

    <main className="site-main">
    <section className="home-section-alt">
            <div className="container">
                <div className="heading-section aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                    <h2 className="home-section-title">Get in touch</h2>
                </div>
                <div className="row">
                    <div className="col-md-7 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="contact-form">
                            <form className="contact-us-form form-contact comment_form" onSubmit={contactUs} id="commentForm">
                                <div className="row">

                                    <div className="col-sm-6 mb-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                        <div className="form-group">
                                            <label htmlFor="firstname">First Name<span
                                                    >*</span></label>
                                            <input className="form-control" name="firstname" id="firstname" type="text"
                                                placeholder="First Name" required/>
                                        </div>
                                    </div>

                                    <div className="col-sm-6 mb-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                        <div className="form-group">
                                            <label htmlFor="lastname">Last Name<span >*</span></label>
                                            <input className="form-control" name="lastname" id="lastname" type="text"
                                                placeholder="Last Name" required/>
                                        </div>
                                    </div>

                                    <div className="col-sm-6 mb-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                        <div className="form-group">
                                            <label htmlFor="number">Mobile Number<span
                                                    >*</span></label>
                                            <input className="form-control" name="mobilenumber" id="mobilenumber" type="text"
                                                placeholder="Mobile Number" required/>
                                        </div>
                                    </div>

                                    <div className="col-sm-6 mb-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                        <div className="form-group">
                                            <label htmlFor="email">Email address<span
                                                    >*</span></label>
                                            <input className="form-control" name="email" id="email" type="email"
                                                placeholder="Email address" required/>
                                        </div>
                                    </div>
                                    
                                    <div className="col-sm-12 mb-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                        <div className="form-group">
                                            <label htmlFor="email">Subject<span
                                                    >*</span></label>
                                                   
                                              
                                            <select className="custom-select my-1 mr-sm-2" id="subject" name="subject">
                                              { arrData.map((service,i) =>(    
                                                <option value={service.title} key={service.id}>{service.title}</option>
                                               
                                                ))}
                                                <option value="General Enquiry">General Enquiry</option>
                                              </select>
                                        </div>
                                    </div>

                                    <div className="col-12 mb-2 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                        <div className="form-group">
                                            <label htmlFor="message">Message<span>*</span></label>
                                            <textarea className="form-control w-100" name="message" id="message" cols="30"
                                                rows="9" placeholder="Write message" required></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div className="form-group aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                    <button type="submit" className="button button-contactForm btn_1 boxed-btn" disabled={isDisabled}>Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>

                     <div className="col-md-5 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                        <div className="feature-img">
                        <Image src="/images/formula-map.png" className="img-fluid" alt="Formula India" width={478} height={497}/></div>
                    </div>

                </div>

                <hr className="hr-margin"/>

                <ul className="nav nav-tabs mb-4 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500" role="tablist">
                    <li className="nav-item">
                        <a className="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">New Delhi</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Chennai</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Bengaluru</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-4" role="tab">Ahmedabad</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-5" role="tab">Mumbai</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-6" role="tab">Pune</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-7" role="tab">Hyderabad</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-8" role="tab">Surat</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" data-toggle="tab" href="#tabs-9" role="tab">Gurugram</a>
                    </li>
                </ul>
                <div className="tab-content">
                    <div className="tab-pane active" id="tabs-1" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Corporate Office - New Delhi</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                      <li>
                                        <Link href="https://goo.gl/maps/StmqCt1bMxfywa2b9">
                                            <a>27, Community Centre, East
                                                of Kailash, New Delhi: 110065, India</a>
                                                </Link>
                                                </li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                      
                                        <li><span>Mail: </span>
                                        <Link href="mailto:enquiry@formulaindia.com">
                                        <a>enquiry@formulaindia.com</a>
                                        </Link>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d28036.88309509977!2d77.25682957165525!3d28.55142830567991!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d02ec3ca89953%3A0x1a22cf81401fc857!2sFormula%20Group!5e0!3m2!1sen!2sin!4v1630732381296!5m2!1sen!2sin"
                                    width="100%" height="275" allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div>
                    <div className="tab-pane" id="tabs-2" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Chennai</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li>
                                            
                                            <a href="https://goo.gl/maps/k5XoTuibPZweK8LX9">No:1, 3rd Main Road, R.A.
                                                Puram, Mandaveli, Chennai - 600028, India</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                      
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7774.294703089859!2d80.259545!3d13.026287!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xed78e73cdd2691ec!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630734546962!5m2!1sen!2sus"
                                    width="100%" height="275" allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div> 
                    <div className="tab-pane" id="tabs-3" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Bengaluru</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/9LDb4xQHSo9xNBju5">162, 2nd Floor, 4th Main, 2
                                                A Cross Domlur II Stage, Domlur, Bangalore, Karnataka - 560071,
                                                India</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                      
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7776.254383015976!2d77.638549!3d12.963712!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb863ddf639b98376!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630734699925!5m2!1sen!2sus"
                                    width="100%" height="275"  allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div> 
                    <div className="tab-pane" id="tabs-4" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Ahmedabad</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/ub7gsdg1bW7k4kxr8">A-26, Shreeji Co. Op.
                                                Housing Society, Opp. Old Narol Court, Narolgam, Ahmedabad - 382405,
                                                Gujarat, India</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                        
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7345.001621357281!2d72.508831!3d23.005377!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d732a54379f659e!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630734830166!5m2!1sen!2sus"
                                    width="100%" height="275"  allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div> 
                     <div className="tab-pane" id="tabs-5" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Mumbai</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/7FzBZmvpLeApT5cFA">7th & 8th Floor, Times
                                                Square building, Western Express Highway, Andheri East, Mumbai - 400069,
                                                India</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                     
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7538.51155333569!2d72.833604!3d19.140278!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3c079416afe4777e!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630734938438!5m2!1sen!2sus"
                                    width="100%" height="275" allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div> 
                    <div className="tab-pane" id="tabs-6" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Pune</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/SkicwQLDLv6AY8V5A">G-20, Sacred World Mall,
                                                Wanowrie, Pune - 411040, India</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                   
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7568.033962292839!2d73.901683!3d18.48289!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x47088b17280daef6!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630735023981!5m2!1sen!2sus"
                                    width="100%" height="275" allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div> 
                     <div className="tab-pane" id="tabs-7" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Hyderabad</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/x1yhGHkkDskYJhUd6">60, Banjara Orchid, R.K.
                                                Puram, Secunderabad, Hyderabad- 500056</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                       
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10536.652031769781!2d78.454968054213!3d17.41937331569103!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9e7a29ec99c734e9!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630735127164!5m2!1sen!2sus"
                                    width="100%" height="275" allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div> 

                    <div className="tab-pane" id="tabs-8" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Surat</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/ub7gsdg1bW7k4kxr8">I-401, Blossom , Behind Aagam Shopping World , Vesu Canal Road Surat - 395007</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                       
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7345.001621357281!2d72.508831!3d23.005377!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d732a54379f659e!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630734830166!5m2!1sen!2sus"
                                    width="100%" height="275"  allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div>                             

                    <div className="tab-pane" id="tabs-9" role="tabpanel">
                        <div className="row">
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                                <div>
                                    <h2 className="address-title">Branch Office - Gurugram</h2>
                                    <ul className="list-inline address-links-list footer-links-git">
                                        <li><a href="https://goo.gl/maps/ub7gsdg1bW7k4kxr8">Unit No-701, 7th Floor, Vipul Business Park, Sector 48 Sohna Road, Gurguram, Haryana</a></li>
                                        <li><span>Call: </span><a href="tel:+91-9650003642 ">+91-9650003642</a></li>
                                       
                                        <li><span>Mail: </span><a
                                                href="mailto:enquiry@formulaindia.com ">enquiry@formulaindia.com</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="col-md-6 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7345.001621357281!2d72.508831!3d23.005377!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d732a54379f659e!2sFormula%20Group!5e0!3m2!1sen!2sus!4v1630734830166!5m2!1sen!2sus"
                                    width="100%" height="275"  allowFullScreen=""
                                    loading="lazy"></iframe>
                            </div>
                        </div>
                    </div>                             

                </div>
            </div>
        </section>




          <section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Not sure which solution fits your business needs?</p>
                                        <button className="btn btn-primary contact"><Link href="/contact-us">Connect us</Link></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
    </>
  );
}

export async function getServerSideProps() {
    try{
      const res = await fetch(CONFIG.SERVER_URL+'getrecentchild');
    const postData = await res.json();
    if (!postData) {
      return {
        notFound: true,
      }
    }

    return {
      props: {postData},
    };
  }catch(e){  
    return {
        props: null
      }
  }

  }

  export default Contactus