'use client';

import React, { useRef, useState, useEffect } from 'react';
import Link from 'next/link';
import { Container, Row, Col, Button } from 'react-bootstrap';
import { motion, useInView } from 'framer-motion';
import { Swiper as SwiperType } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';

// const services = [
//   { label: "AI Services", href: "/services/ai-services", img: "https://media.vensysco.com/ai-services-e1.webp", title: "Transforming Public Infrastructure with AI", content: "Vensysco Technologies provides advanced AI-based surveillance, crowd analysis, biometric authentication, and automation solutions. From intelligent city surveillance to large-scale reviews, our AI solutions provide real-time decision-making, security enhancement, and efficiency in operations—relied upon by the top government organizations such as MEITY, UPSSSC, and event organizers like Magh Mela and Kumbh Mela." },
//   { label: "Data Center", href: "/services/data-center", img: "https://media.vensysco.com/data-center-e3.webp", title: "Powering Secure, Scalable, 24x7 Data Environments", content: "Vensysco delivers secure, scalable data centres with 24x7 support, one of them is the on-premise Data Centre commissioned for the Supreme Court of India. In the near future, the company plans to bring data centres in every major city of India for seamless access of data." },
//   { label: "Cloud Solutions", href: "/services/cloud-solutions", img: "https://media.vensysco.com/cloud-solutions-e2.webp", title: "Cloud Solutions with Google Cloud and AWS", content: "Vensysco specialize in crafting bespoke cloud solutions that cater to the unique needs of each client. Our strategic partnerships with industry giants like Google Cloud and Amazon Web Services (AWS) enable us to deliver robust, scalable, and secure cloud services. From cloud migration and infrastructure management to cost optimization and advanced analytics, we provide end-to-end cloud solutions that drive efficiency and growth." },
//   { label: "System Integration", href: "/services/system-integration", img: "https://media.vensysco.com/system-integration-e2.webp", title: "Seamless System Integration for Mission-Critical Projects", content: "Vensysco is a master in end-to-end system integration, bringing hardware, software, and networks together into integrated solutions. From Prayagraj Smart City to CGSDC 2.0 to the Supreme Court, our integrations guarantee performance, security, and scalability for critical government missions." },
//   { label: "Streaming Solutions", href: "/services/streaming-solutions", img: "https://media.vensysco.com/streaming-solutions-e2.webp", title: "Scalable, Secure Streaming for Next-Gen Media Platforms", content: "Vensysco offers state-of-the-art streaming solutions with scalable architecture and high-definition, multi-channel delivery support. Implemented successfully in projects such as Prasar Bharati Waves, our platform streamlines content streaming securely and in real time across devices with intelligent functions akin to Netflix and YouTube." },
//   { label: "AI Surveillance", href: "/services/ai-surveillance", img: "https://media.vensysco.com/ai-surveillance-e1.webp", title: "Intelligent AI Surveillance for Safer Environments", content: "Vensysco's AI-based Surveillance solutions provide real-time monitoring, facial recognition, crowd analytics, and threat detection. Implemented in events such as  the biggest gathering of humans on Earth, the Kumbh Mela, our systems augment public safety, enable smooth crowd management, and assist authorities with instantaneous, actionable insights." },
//   { label: "Examination", href: "/services/examination", img: "https://media.vensysco.com/examination-e1.webp", title: "Securing the Future, One Exam at a Time", content: "Vensysco delivers robust, end-to-end examination solutions tailored for scale and integrity. From biometric verification and AI surveillance to OMR and CBT management, we’ve flawlessly executed high-volume government exams for UPSSSC, KPSC, and NTA. Ensuring transparency, security, and zero compromise on quality." },
// ];
const services = [
  { label: "AI Services", href: "/services/ai-services", img: "https://media.vensysco.com/ai-services-e1.webp", title: "Enterprise AI Cloud Services for Scalable Innovation", content: "At VTL (Vensysco Technologies Limited), we are an India AI Empanelled Partner under the esteemed meity Initiative. We build high-performance GPU infrastructure that meets the cutting-edge needs of AI, ML, and generative AI applications for governments and enterprises. Our pay-as-you-go economics for GPU services are not just cost-effective but come with 24x7 support to ensure you get maximum performance from our solutions. Our high-end GPU infrastructure is built keeping in mind compliance with Digital India and Startup India standards. Similarly, our infrastructure runs on data sovereignty and complies with all national cyber security standards." },
  { label: "Data Center", href: "/services/data-center", img: "https://media.vensysco.com/data-center-e3.webp", title: "Data Center Solutions for Efficient Tech Management", content: "VTL delivers secure, scalable data center services with 24x7 support, including an enterprise data center commissioned on-premise for the Judicial Institution of India. Built on advanced data center technology, our managed data center and data center solutions enable secure data center operations and support enterprise ai solutions, with plans to expand data centers across every major city in India for seamless data access." },
  { label: "Cloud Solutions", href: "/services/cloud-solutions", img: "https://media.vensysco.com/cloud-solutions-e2.webp", title: "Cloud Solutions Powering Smart Business Operations", content: "VTL specializes in crafting bespoke cloud data storage and cloud storage services tailored to unique client needs. Through strategic partnerships with Google Cloud and Amazon Web Services (AWS), we deliver secure, scalable cloud and cloud-based storage solutions addressing questions like what is cloud storage, cloud storage types, data storage in cloud computing, and storage as a service. Book a free demo to explore our capabilities firsthand. Our offerings include cloud migration, infrastructure management, cost optimization, and analytics, helping organizations compare best cloud storage options, evaluate pricing, free models, and leading cloud storage solutions in India for growth and operational efficiency." },
  { label: "System Integration", href: "/services/system-integration", img: "https://media.vensysco.com/system-integration-e2.webp", title: "System Integration for Cognitive City Infrastructure", content: "VTL excels in end-to-end system integration, unifying hardware, software, and networks into robust data center solutions and cloud solutions. From Prayagraj Smart City to CGSDC 2.0 and the Judicial Institution, our enterprise data center and managed data center integrations, backed by resilient data center infrastructure and cloud services India deployments, ensure performance, security, and scalability for critical government missions." },
  { label: "Streaming Solutions", href: "/services/streaming-solutions", img: "https://media.vensysco.com/streaming-solutions-e2.webp", title: "OTT Streaming Platform for Next-Gen Media Delivery", content: "VTL delivers a robust live streaming platform and video streaming platform with scalable architecture and high-definition, multi-channel delivery. Designed as a secure video hosting platform, our solutions implemented successfully in projects such as Prasar Bharati Waves, support real-time, multi-device streaming and form a core part of our digital transformation services, offering intelligent capabilities comparable to Netflix and YouTube." },
  { label: "AI Surveillance", href: "/services/ai-surveillance", img: "https://media.vensysco.com/ai-surveillance-e1.webp", title: "AI Surveillance Services for Automated Security Intelligence", content: "VTL delivers advanced ai surveillance solutions, including smart surveillance systems, facial recognition systems, biometric authentication, and crowd management powered by ai based cctv camera deployments. From intelligent city surveillance to large-scale reviews, our platforms integrate generative ai services to enable real-time decision-making, enhanced security, and operational efficiency, trusted by leading government organizations such as MEITY, UPSSSC, and major event organizers like Magh Mela and Kumbh Mela." },
  { label: "Examination", href: "/services/examination", img: "https://media.vensysco.com/examination-e1.webp", title: "Online And Offline Exam Solutions for Secure Assessments", content: "VTL is a leading exam company delivering comprehensive exam services across both offline and online examination models through a secure online exam platform and online assessment platform. Our capabilities span end-to-end exam infrastructure services, including exam center setup, secure hardware and network deployment, biometric verification, AI surveillance, OMR processing, CBT management, centralized command and control, and integrated exam security with live event streaming. We have successfully conducted high-volume government examinations for UPSSSC, KPSC, and NTA, ensuring reliability, transparency, and uncompromised exam integrity at scale." },
];
export default function HomeFive() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef<SwiperType | null>(null);
  const solutionRef = useRef(null);
  const inView = useInView(solutionRef, { amount: 0.5 });
  useEffect(() => {
    if (swiperRef.current && swiperRef.current.autoplay) {
      if (inView) {
        swiperRef.current.autoplay.start();
      } else {
        swiperRef.current.autoplay.stop();
      }
    }
  }, [inView]);
  const handleRestart = (num: number) => {
    if (swiperRef.current) {
      swiperRef.current.slideTo(num);
      if (num === 0) {
        swiperRef.current.autoplay.start();
      }
    }
  };
  return (
    <section className="section-solutions text-bg-danger" ref={solutionRef}>
      <Container className="py-3 py-md-5 position-relative">
        <motion.div className="d-flex flex-wrap align-items-center justify-content-between w-100 z-2" whileInView={{y:[50,0]}} transition={{duration:1.7}} viewport={{once:true,amount:0.5}}>
          {services.map((service, i) => (
            <motion.div key={i} style={{opacity:currentIndex === i ? 1 : 0.5,borderWidth:currentIndex === i ? 3 : 1}}
            whileInView={currentIndex === i ? {scale:[1,1.2,1] } : {}} transition={{duration:0.7,repeat:Infinity,repeatDelay:2}}>
            <Button className='text-white text-decoration-none' variant="link" onClick={() => handleRestart(i)} aria-label={`${service.label} Tab`}>
              {service.label}
            </Button>
          </motion.div>
          ))}
        </motion.div>
        <Swiper slidesPerView={1} loop={false} modules={[Autoplay]}
          onSwiper={(swiper) => (swiperRef.current = swiper)}
          onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
          autoplay={{ delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true, }}
          className="w-100 my-auto z-1">
          {services.map((service, i) => (
          <SwiperSlide key={i}>
            <Row className="my-auto align-items-center justify-content-center g-3 g-md-4 g-lg-5 text-center text-sm-start">
              <Col xs={12} md={4}>
                <motion.img className='img-fluid bg-secondary rounded-5' src={service.img} alt={service.label} width={1066} height={814} whileInView={currentIndex === i ? {scale:[0.8,1]} : {scale:0}} transition={{duration:2}} />
              </Col>
              <Col xs={12} md={8}>
                <motion.h4 className="fs-3">
                  {service.title}
                </motion.h4>
                <motion.p className="mb-4">
                  {service.content}
                </motion.p>
                <motion.div whileInView={currentIndex === i ? {x:[200,0]} : {x:0}} transition={{duration:1.6}} viewport={{once:true,amount:0.5}}>
                  <Link href={service.href} aria-label={`View details of ${service.label}`}>View Details <i className="bi bi-arrow-right"></i></Link>
                </motion.div>
              </Col>
            </Row>
          </SwiperSlide>
        ))}
        </Swiper>
        <Row xs={1} sm={2} md={2} className="g-3 mt-3">
          <Col className='d-flex align-items-center justify-content-center justify-content-sm-start'>
          {services.map((_, i) => (
            <motion.div key={i} className="d-flex align-items-center justify-content-center me-2" whileInView={{x:[20,0]}} transition={{duration:1.7}}>
              {/* <motion.div className={`rounded-circle d-flex align-items-center justify-content-center`}
                style={{ width: 40, height: 40, opacity: currentIndex === i ? 1 : 0.5}}
                whileInView={currentIndex === i ? { scale: [1, 1.2, 1] } : {}}
                transition={{duration:0.5, repeat: Infinity, repeatDelay: 2 }}
              >
                <Button variant="outline-light" className="rounded-circle border-4 border-white p-0 w-100 h-100 d-flex align-items-center justify-content-center" onClick={() => handleRestart(i)} aria-label={`Go to Slide ${i}`}>
                  {`0${i + 1}`}
                </Button>
              </motion.div> */}
            </motion.div>
          ))}
          </Col>
          <Col>
            <motion.div className='hstack gap-2 justify-content-center justify-content-md-end' whileInView={{x:[-100,0]}} transition={{duration:1.4}}>
              <Button variant="outline-light" onClick={() => handleRestart(currentIndex - 1)} className="rounded-circle p-0 border-4 d-flex align-items-center justify-content-center" style={{width: 40,height: 40}} aria-label="Go to Previous Slide">
                <i className="bi bi-arrow-left-short fs-4"></i>
              </Button>
              <Button variant="outline-light" onClick={() => handleRestart(currentIndex + 1)} className="rounded-circle p-0 border-4 d-flex align-items-center justify-content-center" style={{ width: 40, height: 40 }} aria-label="Go to Next Slide">
                <i className="bi bi-arrow-right-short fs-4"></i>
              </Button>
            </motion.div>
          </Col>
        </Row>
      </Container>
    </section>
  );
}