"use client";

import React from "react";
import { motion } from "framer-motion";
import { Container, Row, Col, Card, Form, Stack, Spinner, Ratio, Button } 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";
import Link from 'next/link';

type FormData = {
  fname: string;
  lname: string;
  email: string;
  mobile: string;
  company: string;
  clientType: string;
  subject: string;
  message: string;
  iscloud: number;
};

export default function BookDemoForm() {
  const { showToast } = useToast();
  const { getToken } = useRecaptcha();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>({
    defaultValues: {
      iscloud: 0
    }
  });
  const onSubmit = async (data: FormData) => {
    const recaptchaToken = await getToken("book_demo_save_form");
    const res = await fetch("/api/book-demo", {
      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");
    }
  };
  const serviceItems = [
    { label: "AI Services", href: "/services/ai-services", content: "Intelligence that Drives Innovation AI & ML development, automation, NLP, computer vision & analytics." },    
    { label: "Data Center", href: "/services/data-center", content: "Secure, Scalable, and Future-Ready Edge, Captive, Colocation & Hyperscalers Data Centers." },
    { label: "Cloud Solutions", href: "/services/cloud-solutions", content: "Cloud-Powered Agility with Google, AWS, Azure, Oracle Cloud strategy, migration, and optimization built on leading platforms." },
    { label: "System Integration", href: "/services/system-integration", content: "Smart Infrastructure for Smarter Operations WiFi, Smart City, IT Infra, ICCC, Conferencing & STEM Labs." },    
    { label: "Streaming Solutions", href: "/services/streaming-solutions", content: "Streamlined Video Experiences Live Streaming, OTT, VOD, including secure exam streaming." },
    { label: "AI Surveillance", href: "/services/ai-surveillance", content: "Real-Time, AI-Powered Safety Solutions Facial recognition, anomaly detection & 24/7 smart monitoring." },
    // { label: "Aviation security & Safety", href: "/services/aviation-security-safety", content: "Solutions for scanning underside of vehicles, baggage, cargo and explosives detect threat objects in no time." },
    { label: "Examination", href: "/services/examination", content: "we specialize in delivering end-to-end examination services designed to meet the evolving needs of academic institutions, certification bodies, recruitment agencies, and government organizations." },
  ];
  const partnerLogos = [
    {name:'Trend Micro',src:'https://media.vensysco.com/partners-e3.webp'},
    {name:'Paloalto Networks',src:'https://media.vensysco.com/partners-e4.webp'},
    {name:'Juniper Networks',src:'https://media.vensysco.com/partners-e5.webp'},
    {name:'CISCO',src:'https://media.vensysco.com/partners-e6.webp'},
    {name:'Open Text',src:'https://media.vensysco.com/partners-e8.webp'},
    {name:'ORACLE',src:'https://media.vensysco.com/partners-e9.webp'},
    {name:'HYUNDAI',src:'https://media.vensysco.com/partners-e10.webp'},
    {name:'Microsoft',src:'https://media.vensysco.com/partners-e11.webp'},
    {name:'NetApp',src:'https://media.vensysco.com/partners-e12.webp'},
    {name:'Motadata',src:'https://media.vensysco.com/partners-e13.webp'},
  ];
  const alliancesLogos = [
      {name:'LG',src:'https://media.vensysco.com/partners-e14.webp'},
      {name:'Sonic Wall',src:'https://media.vensysco.com/partners-e15.webp'},
      {name:'Tenable',src:'https://media.vensysco.com/partners-e16.webp'},
      {name:'Veritas',src:'https://media.vensysco.com/partners-e17.webp'},
      {name:'Fortinet',src:'https://media.vensysco.com/partners-e18.webp'},
      {name:'Hawlett Packard',src:'https://media.vensysco.com/partners-e19.webp'},
      {name:'Google',src:'https://media.vensysco.com/partners-e20.webp'},
      {name:'Radware',src:'https://media.vensysco.com/partners-e7.webp'},
      {name:'AWS',src:'https://media.vensysco.com/partners-e21.webp'},    
  ];
  return (
    <React.Fragment>
    <section className="section-contact-form">
      <Container className="py-3 py-md-5">
        <Row className="g-3 g-md-5 justify-content-center">
          <Col md={8}>
            <motion.h2 className="fs-1 fw-bold text-danger">
              We Are Vensysco!
            </motion.h2>
            <motion.p className="my-3">
              Vensysco Technologies Limited is a technology behemoth recognized for its innovative technological solutions and proficiency in performing secure and massive examinations. We have a robust base in innovation and excellence and offer premium IT services, facilitating smooth digital transformations for organizations. Our expertise includes secure exam solutions, utilizing the latest technology to automate systems, crowd surveillance etc. with reliability and efficiency. Driven by integrity, customer satisfaction, and unceasing progress, Vensysco strives to pioneer future technologies (Artificial Intelligence, Machine Learning, Internet of Things) in India. Our focus on quality, security, and accuracy renders us a reliable ally for companies globally.
            </motion.p>
            <motion.h3 className='fs-1 fw-bold text-danger'>Explore Our Solutions</motion.h3>
            <motion.p className="fw-bold">Empowering Tomorrow with Smarter Solutions</motion.p>            
            <Row xs={1} sm={2} className="g-3">
              {serviceItems.map((item, index) => (
                <motion.div key={index} className="col" whileInView={{y:[50,0]}} transition={{duration:1.8}}>
                  <Card className="h-100 text-bg-danger rounded-4">
                    <Card.Body className="px-4 py-3">
                        <div className="d-flex align-items-center justify-content-between">
                            <Button variant="danger" className="rounded-pill" style={{background:"#fff3"}}>{item.label}</Button>                            
                        </div>
                        <Card.Text>{item.content}</Card.Text>                        
                    </Card.Body>
                  </Card>
                </motion.div>
              ))}
              <motion.div className="col d-flex flex-column align-items-center justify-content-center text-center p-4" whileInView={{y:[50,0]}} transition={{duration:1.8}}>      
                <motion.h3 className='fw-bold'>Find a service that fits your need.</motion.h3>
                <motion.a href="#book-demo-form" onClick={(e) => {
                    e.preventDefault();
                    document.getElementById("book-demo-form")?.scrollIntoView({
                      behavior: "smooth",
                      block: "start",
                    });
                  }}>
                  <motion.button className="btn btn-lg btn-outline-danger rounded-pill px-5" whileInView={{scale:[0.2,1]}} transition={{duration:1.8}}>
                    Talk to an Expert
                  </motion.button>
                </motion.a>
              </motion.div>
            </Row>
          </Col>
          <Col md={4} id="book-demo-form">
            <h4 className="text-center mb-3">Book Free Demo</h4>              
            <Card className="rounded-4 shadow mb-3">              
              <Card.Body>
                <Form noValidate onSubmit={handleSubmit(onSubmit)}>
                  <Row className="g-2">
                    <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:1.8}}>
                        <Form.Label>Client Type</Form.Label>
                        <Form.Select {...register("clientType", {required: "Please select client type"})} isInvalid={!!errors.clientType}>
                          <option value="">-Please Select-</option>
                          <option value="Govt">Govt</option>
                          <option value="Enterprise">Enterprise</option>
                          <option value="Events">Events</option>
                          <option value="Other">Other</option>
                        </Form.Select>
                        <Form.Control.Feedback type="invalid">{errors.clientType?.message}</Form.Control.Feedback>
                      </motion.div>                      
                    </Col>
                    <Col md={12}>
                      <motion.div whileInView={{y:[30,0]}} transition={{duration:1.8}}>
                        <Form.Label>Subject</Form.Label>
                        <Form.Select {...register("subject", {required: "Please select subject"})} isInvalid={!!errors.subject}>
                          <option value="">-Please Select-</option>
                          <optgroup label="DigiTech">
                            <option value="AI Services">AI Services</option>
                            <option value="Data Center">Data Center</option>
                            <option value="Cloud Solutions">Cloud Solutions</option>
                            <option value="System Integration">System Integration</option>
                            <option value="Streaming Solution">Streaming Solution</option>
                            <option value="AI Surveillance">AI Surveillance</option>
                          </optgroup>
                            <optgroup label="DigiExam">
                            <option value="Exam Infra">Exam Infra</option>
                            <option value="Security Solutions">Security Solutions</option>
                            <option value="Stationery & Logistic">Stationery & Logistic</option>
                            <option value="Biometric">Biometric</option>
                            <option value="Support Management">Support Management</option>
                            <option value="Frisking">Frisking</option>
                          </optgroup>
                          <optgroup label="Others">
                            <option value="Other">Other</option>
                          </optgroup>
                        </Form.Select>
                        <Form.Control.Feedback type="invalid">{errors.subject?.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>
            <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>
        </Row>               
      </Container>
    </section>
    <section className="bg-light">
        <Container fluid className="py-3 py-md-5 position-relative overflow-hidden">          
            <Row className='align-items-start justify-content-between g-3 g-md-5'>
                <Col md={12}>
                    <motion.h3 className="fw-bold display-4 text-danger text-center">
                        Our Partners and Alliances
                    </motion.h3>                        
                </Col>
                <Col md={12}>
                    <Swiper modules={[Autoplay]} loop={true} autoplay={{delay:2000,disableOnInteraction:false}} breakpoints={{320:{slidesPerView:2,spaceBetween:10},640:{slidesPerView:3,spaceBetween:10}, 768: { slidesPerView: 4, spaceBetween: 15 }, 1024: { slidesPerView: 6, spaceBetween: 20 },}}>
                        {partnerLogos.map((logo, index) => (
                        <SwiperSlide key={index} className="d-flex justify-content-center align-items-center">
                            <motion.img src={logo.src} alt={logo.name} className="img-fluid object-fit-contain" whileInView={{scale:[0.8,1]}} transition={{duration:2}} />
                        </SwiperSlide>
                        ))}
                    </Swiper>
                </Col>
                <Col md={12}>
                    <Swiper modules={[Autoplay]} loop={true} autoplay={{delay:2000,disableOnInteraction:false}} breakpoints={{320:{slidesPerView:2,spaceBetween:10},640:{slidesPerView:3,spaceBetween:10},768: { slidesPerView: 4, spaceBetween: 15 },1024: { slidesPerView: 6, spaceBetween: 20 },}}>
                        {alliancesLogos.map((logo, index) => (
                        <SwiperSlide key={index} className="d-flex justify-content-center align-items-center">
                            <motion.img src={logo.src} alt={logo.name} className="img-fluid object-fit-contain" whileInView={{scale:[0.8,1]}} transition={{duration:2}} />
                        </SwiperSlide>
                        ))}
                    </Swiper>
                </Col>                 
            </Row>
        </Container>
    </section>
    </React.Fragment>
  );
}