"use client";

import React from "react";
import { motion } from "framer-motion";
import { Container, Row, Col, Card, Form, Stack, Spinner, Ratio } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/css/autoplay';
import { Autoplay } from 'swiper/modules';
import { useForm } from "react-hook-form";
import { useToast } from '@/context/ToastContext';
import { useRecaptcha } from "@/hooks/useRecaptcha";

type FormData = {
  fname: string;
  lname: string;
  email: string;
  mobile: string;
  company: string;
  message: string;
};

export default function ContactOne() {
  const { showToast } = useToast();
  const { getToken } = useRecaptcha();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>();
  const onSubmit = async (data: FormData) => {
    const recaptchaToken = await getToken("contact_save_form");
    const res = await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ ...data,recaptchaToken }),
    });

    const result = await res.json();

    if (res.ok) {
      reset();
      showToast(result.message, "success");
    } else {
      showToast(result.error || "Something went wrong, Please try again later", "danger");
    }
  };
  return (
    <section className="section-contact-form">
      <Container className="py-3 py-md-5">
        <Row className="g-3 g-md-5 justify-content-center">
          <Col md={6}>
            <motion.h2 className="display-3 fw-bold text-danger">
              Contact Us
            </motion.h2>
            <motion.p className="my-3 my-md-5">
              Get in touch with our experts to know more about the possible implementations of cutting-edge technologies in your business model.
            </motion.p>
            <motion.h3 className="fw-bold text-danger">
              Talk to our team today to
            </motion.h3>
            <motion.div className="d-flex align-items-start mb-3">
              <i className="bi bi-check-circle-fill text-danger"></i>
              <div className="ms-2">Get tailored tech solutions for your business or department</div>
            </motion.div>
            <motion.div className="d-flex align-items-start mb-3">
              <i className="bi bi-check-circle-fill text-danger"></i>
              <div className="ms-2">Learn how Vensysco secures large-scale exams and public events</div>
            </motion.div>
            <motion.div className="d-flex align-items-start mb-3">
              <i className="bi bi-check-circle-fill text-danger"></i>
              <div className="ms-2">Explore AI, cloud, and system integration possibilities for your next project</div>
            </motion.div>
            <motion.h4 className="fw-bold my-3">Trusted by</motion.h4>
            <Swiper modules={[Autoplay]} loop={true} autoplay={{ delay: 2000, disableOnInteraction: false }} breakpoints={{320: { slidesPerView:3, spaceBetween: 10 },640: { slidesPerView:4, spaceBetween: 10 }, 768: { slidesPerView:6, spaceBetween: 15 }, 1024: { slidesPerView:6, spaceBetween: 20 },}}>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e1.webp" alt="Client E1" className="img-fluid object-fit-contain" whileInView={{scale:[0.8,1]}} transition={{duration:2}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e2.webp" alt="Client E2" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.1}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e3.webp" alt="Client E3" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.2}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e4.webp" alt="Client E4" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.3}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e5.webp" alt="Client E5" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.4}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e6.webp" alt="Client E6" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.5}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e7.webp" alt="Client E7" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.6}} />
                </SwiperSlide>
            </Swiper>            
            <Swiper className="mt-3" modules={[Autoplay]} loop={true} autoplay={{ delay: 2000, disableOnInteraction: false }} breakpoints={{320: { slidesPerView:3, spaceBetween: 10 },640: { slidesPerView:4, spaceBetween: 10 }, 768: { slidesPerView:6, spaceBetween: 15 }, 1024: { slidesPerView:6, spaceBetween: 20 },}}>                
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e8.webp" alt="Client E8" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e9.webp" alt="Client E9" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.1}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e10.webp" alt="Client E10" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.2}}/>
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e11.webp" alt="Client E11" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.3}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e12.webp" alt="Client E12" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.4}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e13.webp" alt="Client E13" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.5}} />
                </SwiperSlide>
                <SwiperSlide className="d-flex justify-content-center align-items-center">
                  <motion.img src="https://media.vensysco.com/client-e14.webp" alt="Client E14" className="img-fluid object-fit-contain" whileInView={{scale:[0.2,1]}} transition={{duration:1.6}} />
                </SwiperSlide>
            </Swiper>
          </Col>
          <Col md={6}>
            <Card className="rounded-4 shadow">
              <Card.Body>
                <Form noValidate onSubmit={handleSubmit(onSubmit)}>
                  <Row className="g-3">
                    <Col md={6}>
                      <motion.div whileInView={{x:[30,0]}} transition={{duration:1.6}}>
                        <Form.Label>First name</Form.Label>
                        <Form.Control type="text" {...register("fname", {required: "First name is required",pattern: {value: /^[a-zA-Z]+$/,message: "Enter first name",},})} isInvalid={!!errors.fname} />
                        <Form.Control.Feedback type="invalid">{errors.fname?.message}</Form.Control.Feedback>
                      </motion.div>
                    </Col>
                    <Col md={6}>
                      <motion.div whileInView={{x:[-30,0]}} transition={{duration:1.8}}>
                        <Form.Label>Last name</Form.Label>
                        <Form.Control type="text" {...register("lname", {required: "Last name is required",pattern: {value: /^[a-zA-Z]+$/,message: "Enter last name",},})} isInvalid={!!errors.lname} />
                        <Form.Control.Feedback type="invalid">{errors.lname?.message}</Form.Control.Feedback>
                      </motion.div>
                    </Col>
                    <Col md={12}>
                      <motion.div whileInView={{y:[30,0]}} transition={{duration:1.6}}>
                        <Form.Label>Phone number</Form.Label>
                        <Form.Control type="tel" {...register("mobile", {required: "Mobile number is required",pattern: {value: /^[6-9]\d{9}$/,message: "Enter a valid 10-digit Indian mobile number",},})} isInvalid={!!errors.mobile} />
                        <Form.Control.Feedback type="invalid">{errors.mobile?.message}</Form.Control.Feedback>
                      </motion.div>
                    </Col>
                    <Col md={12}>
                      <motion.div whileInView={{y:[30,0]}} transition={{duration:1.7}}>
                        <Form.Label>Work email address</Form.Label>
                        <Form.Control type="email" placeholder="Email" {...register("email", { required: "Email is required", pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: "Invalid email format",},})} isInvalid={!!errors.email} />
                        <Form.Control.Feedback type="invalid">{errors.email?.message}</Form.Control.Feedback>
                      </motion.div>
                    </Col>
                    <Col md={12}>
                      <motion.div whileInView={{y:[30,0]}} transition={{duration:1.8}}>
                        <Form.Label>Company name</Form.Label>
                        <Form.Control type="text" placeholder="Company Name" {...register("company", { pattern: { value: /^[a-zA-Z0-9&.,'’\- ]{2,50}$/, message: "Enter a valid company name", },})} isInvalid={!!errors.company} />
                        <Form.Control.Feedback type="invalid">{errors.company?.message}</Form.Control.Feedback>
                      </motion.div>                      
                    </Col>
                    <Col md={12}>
                      <motion.div whileInView={{y:[30,0]}} transition={{duration:2}}>
                        <Form.Label>Your Query (Message)</Form.Label>
                        <Form.Control as="textarea" rows={5} placeholder="Enter your message" {...register("message", { required: "Your message is required" })}
                          onPaste={(e) => {
                            e.preventDefault();
                            const text = e.clipboardData.getData("text/plain");
                            const target = e.target as HTMLTextAreaElement;
                            const start = target.selectionStart;
                            const end = target.selectionEnd;
                            const value = target.value;
                            target.value = value.slice(0, start) + text + value.slice(end);
                            target.selectionStart = target.selectionEnd = start + text.length;
                            const event = new Event('input', { bubbles: true });
                            target.dispatchEvent(event);
                          }}
                          isInvalid={!!errors.message}
                        />
                        <Form.Control.Feedback type="invalid">{errors.message?.message}</Form.Control.Feedback>
                      </motion.div>
                    </Col>
                    <Col md={12}>
                      <motion.button className="btn btn-lg btn-outline-danger rounded-pill" type="submit" disabled={isSubmitting} whileInView={{x:[100,0]}} transition={{duration:2.2}}>
                        {isSubmitting ? (
                          <Stack gap={2} direction="horizontal">
                            <Spinner animation="grow" size="sm" variant="danger" />
                            <Spinner animation="grow" size="sm" variant="primary" />
                            <Spinner animation="grow" size="sm" variant="success" />
                            <span>Submitting...</span>
                          </Stack>
                        ) : (
                          "Submit"
                        )}
                      </motion.button>
                    </Col>
                  </Row>
                </Form>
              </Card.Body>
            </Card>
          </Col>
          <Col md={12}>
            <div className="d-md-flex align-items-center justify-content-center text-center text-md-start">
              <motion.img src="https://media.vensysco.com/logo.webp" alt="Logo" className="img-fluid" style={{maxHeight:"50px"}} whileInView={{scale:[0.4,1]}} transition={{duration:2}} />
              <div className="border-2 border-start ps-3 ms-3 mt-3 mt-md-0">
                <motion.div className="fw-bold fs-3">VTL Headquarters</motion.div>
                <motion.div>Bhutani Alphathum, Tower B, 7th Floor, Sector 90, Noida 201305</motion.div>
              </div>
            </div>
          </Col>
          <Col md={12}>
            <motion.div whileInView={{scale:[0.8,1]}} transition={{duration:2.2}}>
              <Ratio aspectRatio="21x9">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3505.8809780318666!2d77.40814227528443!3d28.51322847573022!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399acb96eae9e35d%3A0x6918fd4c17577c72!2sVensysco%20Technologies%20Limited!5e0!3m2!1sen!2sin!4v1743153449604!5m2!1sen!2sin" className="border-0 rounded-4 shadow" allowFullScreen loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
              </Ratio>
            </motion.div>
          </Col>
          <Col md={4}>
            <Card className="card text-center shadow h-100">
              <Card.Body>
                <Card.Title className="text-danger fw-bold">MUMBAI</Card.Title>
                <Card.Subtitle>Vensysco Technologies Ltd.</Card.Subtitle>
                <Card.Text>Off. No. 904, A-21 Soka, Rurnch Bali, Thane, West Mumbai-400615</Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={4}>
            <Card className="card text-center shadow h-100">
              <Card.Body>
                <Card.Title className="text-danger fw-bold">CHENNAI</Card.Title>
                <Card.Subtitle>Vensysco Technologies Ltd.</Card.Subtitle>
                <Card.Text>Unit No. G-199C, Ground Floor, Phase 3, Spencer Plaze 769, Annasalal, Chennai-600002</Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={4}>
            <Card className="card text-center shadow h-100">
              <Card.Body>
                <Card.Title className="text-danger fw-bold">BANGALORE</Card.Title>
                <Card.Subtitle>Vensysco Technologies Ltd.</Card.Subtitle>
                <Card.Text>1056, 5th Main Road, Rajajinagar 2nd Stage, Bangalore - 560010</Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={4}>
            <Card className="card text-center shadow h-100">
              <Card.Body>
                <Card.Title className="text-danger fw-bold">HYDERABAD</Card.Title>
                <Card.Subtitle>Vensysco Technologies Ltd.</Card.Subtitle>
                <Card.Text>5-32 Station Area, Navipet Mandal, Nizamabad, Hyderabad, Telangana -503245</Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={4}>
            <Card className="card text-center shadow h-100">
              <Card.Body>
                <Card.Title className="text-danger fw-bold">PATNA</Card.Title>
                <Card.Subtitle>Vensysco Technologies Ltd.</Card.Subtitle>
                <Card.Text>DDII, Sri Ram Kunj, Dadji Lane, Boring Road, Patna-80000</Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={4}>
            <Card className="card text-center shadow h-100">
              <Card.Body>
                <Card.Title className="text-danger fw-bold">PRAYAGRAJ</Card.Title>
                <Card.Subtitle>Vensysco Technologies Ltd.</Card.Subtitle>
                <Card.Text>353/183, 1st Floor, Tagore Town Prayagraj, Uttar Pradesh-211002</Card.Text>
              </Card.Body>
            </Card>
          </Col>
        </Row>               
      </Container>
    </section>
  );
}