"use client";

import React, { useState, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperClass } from 'swiper';
import { Autoplay } from 'swiper/modules';
import { motion } from "framer-motion";
import { Container, Row, Col, Card, Image, Button, Modal, Stack} from "react-bootstrap";
const teamMembers = [
  {
    id: 1,
    name: "Mr. Neeraj Kumar",
    role: "Director & CEO",
    about: "<p>Shri Neeraj Kumar (M.A.-D.U. and UGC NET Scholar) - CEO & Director of the Company, is a career bureaucrat (ex-IRPS officer) with 25 years of experience in various Govt. and private business domains at leadership level. Among his various attributes, he brings significant experience in recruitment operations. He has spearheaded many massive scale recruitment drives for Indian Railways.  Before joining VTL, he was Head of HR at RailTel Corporation(Navratna PSU in ITES business). There, among other responsibilities, he was also handling their Data Center and CNOC manpowering responsibilities. He has significant exposure to next-generation software and ITES technologies. In addition, he has successfully delivered several projects with remarkable accuracy and speed. As Director & CEO of Vensysco, he is leading all business operations and strategizing new initiatives inside the company.  He has undergone Training at INSEAD Singapore, IMTC-Malaysia, Chengdu University-China, XLRI -Jamshedpur, IRICEN Pune, IRIEEN -Nashik and NAIR-Baroda.",
    icon: "https://media.vensysco.com/our-team-icon-e1.webp",
    image: "https://media.vensysco.com/our-team-e1.webp",
    email: "neeraj.kumar@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/neeraj-kumar-5ba3259/'},]
  },
  {
    id: 2,
    name: "Dr. Aditi Tiwari",
    role: "Co-Founder & Director",
    about: "<p>Dr. Aditi Tiwari, Co-Founder and Director at Vensysco, is a distinguished academician and entrepreneur with a strong foundation in environmental sciences and biotechnology. A Gold Medalist and a UGC NET JRF Scholar, she has conducted pioneering research in Ecology of the  River Ganga contributing valuable insights to the field of environmental health.</p><p>With deep expertise in bioremediation, water quality monitoring, and Environmental Impact Assessments (EIA), Dr. Tiwari bridges the gap between science and business. Her work exemplifies a commitment to applying advanced scientific principles to real-world environmental challenges.</p><p>At Vensysco, she plays a pivotal leadership role—steering strategic accounts and driving senior-level talent acquisition to support the company’s growth and innovation. Her stewardship also extends to overseeing the company’s Environmental, Social, and Governance (ESG) initiatives. By embedding responsible and sustainable practices into operations and reporting, she ensures that Vensysco not only meets regulatory expectations but also upholds its commitment to long-term environmental and social responsibility.</p>",
    icon: "https://media.vensysco.com/our-team-icon-e2.webp",
    image: "https://media.vensysco.com/our-team-e2.webp",
    email: "admin@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/aditi-tiwari-82bbb9211/'},]
  },
  {
    id: 3,
    name: "Mr. Ashish Dubey",
    role: "Director & Chief Marketing Officer",
    about: "<p>With over 17 years of experience in Brand strategy, marketing, consulting, and entrepreneurship, Ashish Dubey brings a rare combination of vision, innovation, and execution excellence to his role as Director and Chief Marketing Officer.</p><p>An alumnus of MIT (Mechanical Engineering) and IMT Ghaziabad & Dubai (MBA in Marketing & Strategy), Ashish has worked across multiple countries, gaining extensive international market exposure and a deep understanding of diverse business environments. His early career included leadership roles with some of the world’s largest banks and Big 4 consulting firms, where he developed expertise in business transformation, investment strategy, and financial advisory.</p><p>Over the past eight years, Ashish has founded and scaled multiple ventures across Tech Consulting, Media & Aviation, steering several toward unicorn valuations and successful exits.</p><p>Ashish has had a very remarkable 5-year innings with the BCCI, where he led brand marketing and strategic initiatives for the Indian Premier League (IPL) — one of the world’s biggest sporting events. His innovative campaigns and partnership strategies played a key role in enhancing brand visibility, fan engagement, and global reach.</p><p>His core strengths lie in investment strategy, brand marketing, strategic alliances, and business networking, helping organizations achieve sustainable global growth.</p><p>At the forefront of the company’s strategic and marketing vision, Ashish combines analytical precision with creative storytelling—building brands that inspire trust, partnerships that create value, and strategies that drive long-term success.</p>",
    icon: "https://media.vensysco.com/our-team-icon-e7.webp",
    image: "https://media.vensysco.com/our-team-e7.webp",
    email: "ashish.dubey@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/ashishdubey27/'},]
  },
  {
    id: 4,
    name: "Mr. Yadwinder Mittal",
    role: "Chief Business Officer",
    about: "<p>Yadwinder Mittal is a dynamic business leader with over 15 years of experience in strategic business development and Pan-India sales operations. As the Chief Business Officer of Vensysco, he plays a pivotal role in driving growth, forging strategic partnerships, and expanding the company’s market presence. With expertise in fintech, ed-tech, SaaS, and government solutions, he has successfully led high-impact initiatives, managed large-scale client portfolios, and spearheaded innovative business strategies. An IIM Lucknow alumnus, Yadwinder’s visionary leadership and result-driven approach continue to propel Vensysco towards sustained success in the Surveillance & Security industry.</p>",
    icon: "https://media.vensysco.com/our-team-icon-e3.webp",
    image: "https://media.vensysco.com/our-team-e3.webp",
    email: "sales@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/yadwinder-mittal-35699233/'},]
  },
  {
    id: 5,
    name: "Mr. Kuldeep Raina",
    role: "Director - Sales & Marketing",
    about: "<p>Kuldeep Raina is a seasoned business professional with more than 18 years of experience in sales growth, strategic marketing, and developing large businesses in government and public sector verticals. As Director – Sales & Marketing at Vensysco Technologies, he heads national sales strategy, client onboarding, and go-to-market strategies, with particular emphasis on digital transformation, smart cities, e-Governance, and new-age technologies such as AI and Cloud.</p><p>Before joining Vensysco, he was a leader at Ericsson, Airtel, and NIIT Technologies, where he has been instrumental in path-breaking projects like E-Gram (India's first large-scale VSAT network) and several Smart City deployments. His experience includes enterprise sales, stakeholder management, public-private partnerships, and solution-based marketing.</p><p>With keen insight into the government procurement cycle and a robust network in the public sector ecosystem, Kuldeep drives Vensysco's growth pace and fixes its place as a go-to innovation-driven infrastructure partnership player.</p>",
    icon: "https://media.vensysco.com/our-team-icon-e4.webp",
    image: "https://media.vensysco.com/our-team-e4.webp",
    email: "kuldeep@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/kuldeep-raina-54b2931b/'},]
  },
  {
    id: 6,
    name: "Mr. Anuj Mishra",
    role: "Director Operations - Education",
    about: "<p>Anuj Mishra is one of the founding members of the organization and holds a Master’s degree in Computer Science. With over 10 years of experience, he has played a pivotal role in shaping the company’s operations and growth.</p><p>He has been instrumental in managing end-to-end business operations, including customer engagement, supply chain management, procurement, and ensuring flawless deliveries. His innovative approach and deep expertise in digital solutions have been key in driving operational efficiency and enhancing customer satisfaction. His combination of experience, strategic insight, and leadership makes him a key asset to Vensysco.</p>",
    icon: "https://media.vensysco.com/our-team-icon-e5.webp",
    image: "https://media.vensysco.com/our-team-e5.webp",
    email: "anuj@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/anuj-mishra-856163215/'},]
  },
  {
    id: 7,
    name: "Mr. Akhilesh Verma",
    role: "Director  & CIO",
    about: "<p>Akhilesh Verma is an accomplished Chief Information Officer (CIO) with over 20 years of experience in leading large-scale digital transformation initiatives across government and public sector domains. At Vensysco, he spearheads the company’s strategic technology vision, driving innovation, digital modernization, and operational excellence across various diversified projects in IT, Telecom, Cyber Security etc.</p><p>He brings extensive expertise in planning and executing end-to-end digital solutions, managing complex contracts, building strategic partnerships, and aligning technology initiatives with national development goals. His deep understanding of public sector challenges and regulatory frameworks enables him to deliver scalable, secure, and citizen-centric solutions that transform service delivery.</p><p>Before joining Vensysco, Akhilesh held key leadership positions in various Multi-National OEMs , where he successfully led multiple mission-critical projects for central and state government agencies. His ability to integrate emerging technologies with practical governance needs has earned him recognition as a trusted advisor in the digital transformation space.</p><p>Akhilesh Verma holds Masters in Business Administration and Engineering degree (with Honours) along with other OEM certifications in sales and Architect level . His academic background, combined with hands-on experience, equips him with a balanced perspective to bridge technology with policy and public service outcomes.</p>",
    icon: "https://media.vensysco.com/our-team-icon-e6.webp",
    image: "https://media.vensysco.com/our-team-e6.webp",
    email: "akhilesh@vensysco.in",
    social: [{icon:'bi-linkedin',link:'https://www.linkedin.com/in/akhilesh-verma-0841692b/'},]
  },
  
];
export default function AboutFive() {
  const [activeIndex, setActiveIndex] = useState(0);
  const swiperRef = useRef<SwiperClass | null>(null);

  // Sync Left Click with Swiper Slide
  const handleMemberClick = (index: number) => {
    setActiveIndex(index);
    if (swiperRef.current) {
      swiperRef.current.slideTo(index);
    }
  };

  const [showModal, setShowModal] = useState(false);
  const [selectedMember, setSelectedMember] = useState<typeof teamMembers[0] | null>(null);

  const handleReadMore = (member: typeof teamMembers[0]) => {
    const index = teamMembers.findIndex((m) => m.id === member.id);
    setActiveIndex(index);
    setSelectedMember(member);
    setShowModal(true);
  };

  const handlePrev = () => {
    const newIndex = (activeIndex - 1 + teamMembers.length) % teamMembers.length;
    setActiveIndex(newIndex);
    setSelectedMember(teamMembers[newIndex]);
  };

  const handleNext = () => {
    const newIndex = (activeIndex + 1) % teamMembers.length;
    setActiveIndex(newIndex);
    setSelectedMember(teamMembers[newIndex]);
  };

  function stripHtml(html: string) {
    return html.replace(/<[^>]+>/g, "");
  }

  function getPreview(html: string, limit = 260) {
    const text = stripHtml(html);
    return text.length > limit ? text.slice(0, limit) + "..." : text;
  }

  const showTeams = false;
  return (
    <section className="section-our-team">
      <Container className="py-3 py-md-5 position-relative">
        <Row className="align-items-center g-3 g-md-5">
          <Col md={12}>
            <motion.h2 className="text-danger text-center fw-bold display-4">
              Our Team
            </motion.h2>
            <motion.p className="text-center fs-3 mb-4">
              Meet the Visionaries Driving Vensysco
            </motion.p>
          </Col>
          <Col md={12}>
            <Card className="rounded-5 border-0 shadow">          
              <Card.Body className="p-md-5">
                <Row className="g-4">
                  <Col md={4}>
                    <motion.img className="img-fluid rounded-4 shadow-sm" src="https://media.vensysco.com/vikash-kumar-dubey.webp" alt="Mr. Vikash Kumar Dubey Managing Director of Vensysco" width={1200} height={1600} whileInView={{scale:[1.2,1]}} transition={{duration:1.8}} />
                  </Col>
                  <Col md={8}>                    
                    <motion.p className="card-text" whileInView={{x:[50,0]}} transition={{duration: 1.8 }}>
                      <i className="bi bi-quote text-danger fs-3" />
                    </motion.p>
                    <motion.p className="card-text">
                      Mr. Vikash Kumar Dubey is a visionary technocrat and dynamic entrepreneur who founded Vensysco Technologies Limited in 2016. Under his astute leadership, the company has evolved from a niche player in secure examination and assessment services to a nationally recognized System Integration powerhouse, delivering transformative solutions across OTT, Artificial Intelligence, Cloud Computing, and Datacenter technologies.
                    </motion.p>
                    <motion.p className="card-text">
                      A trailblazer in digital innovation, Mr. Dubey redefined the integrity of examination processes by introducing advanced, secure, and technology-driven protocols—building Vensysco’s reputation as a trusted partner among government bodies, academic institutions, and corporate stakeholders.
                    </motion.p>
                    <motion.p className="card-text">
                      Recognizing the rising demands of the digital economy, he successfully pivoted Vensysco into next-generation IT domains, spearheading strategic expansions and product innovations. His forward-thinking approach recently led to Vensysco’s empanelment with India AI, an initiative by MeitY (Ministry of Electronics and Information Technology)—positioning the company at the forefront of affordable AI compute infrastructure in India. This pivotal move aims to empower the nation’s R&D ecosystem and educational institutions, enabling them to scale AI adoption and bolster India’s technological leadership on a global stage.
                    </motion.p>
                  </Col>
                </Row>
              </Card.Body>
              <Card.Footer className="px-md-5 bg-light border-0" style={{borderRadius:'0 0 var(--bs-border-radius-xxl) var(--bs-border-radius-xxl)'}}>
                <Row>
                  <Col md={7} className="text-start">
                    <motion.h4 className="card-title fs-1 text-danger fw-bold">
                      Mr. Vikash Kumar Dubey
                    </motion.h4>
                    <motion.h5 className="text-secondary mb-2">
                      Managing Director
                    </motion.h5>
                  </Col>
                  <Col md={5} className="text-start text-md-end">
                    <motion.a href="mailto:vikash@vensysco.in" className="fw-bold link-dark">
                      vikash@vensysco.in
                    </motion.a>
                    <Stack gap={2} direction="horizontal" className="justify-content-start justify-content-md-end mt-2">
                      <motion.a href="https://www.linkedin.com/in/vikash-kumar-dubey/" target="_blank" rel="noopener noreferrer" style={{width:"40px",height:"40px"}} className="btn btn-outline-danger bg-danger-subtle rounded-circle d-flex align-items-center justify-content-center p-0 " whileInView={{x:[-50,0]}} transition={{duration:1.6}}>
                        <i className="bi bi-linkedin"></i>
                      </motion.a>
                    </Stack>
                  </Col>
                </Row>
              </Card.Footer>
            </Card>
          </Col>
          {showTeams && (
            <React.Fragment>
              <Col md={5}>
                <div className="spiral-container position-relative">
                  <svg viewBox="0 0 100 100">
                    <motion.circle cx="50" cy="50" r="40" fill="none" stroke="#ff3528" strokeWidth="1" whileInView={{pathLength:[0,1]}} transition={{duration:2}} />
                  </svg>
                  {teamMembers.map((member, index) => {
                    const total = teamMembers.length;
                    const angle = (360 / total) * index;
                    const radius = 40;
                    const center = 50;

                    const rad = (angle * Math.PI) / 180;
                    const x = center + radius * Math.cos(rad);
                    const y = center + radius * Math.sin(rad);

                    return (
                      <div key={index}>
                        <motion.div                      
                          className={`spiral-member ${index === activeIndex ? "active" : ""}`}
                          onClick={() => handleMemberClick(index)}
                          initial={{top: "50%",left: "50%",transform: "translate(-50%, -50%)"}}
                          whileInView={{top: `${y}%`,left: `${x}%`,transform: "translate(-50%, -50%)"}}
                          transition={{delay: 0.3 + index * 0.2, duration:1.5,ease: "easeOut"}}
                        >
                          <motion.div whileInView={{scale:[0.8,1]}} whileHover={{scale:[1.2]}} transition={{duration:3}}>
                            <Image fluid src={member.icon} alt={member.name} className="rounded-circle img-fluid" style={{maxWidth:"84px"}} />
                          </motion.div>                      
                        </motion.div>
                        {index === activeIndex && (
                          <motion.div className="speech-bubble position-absolute top-50 start-50 translate-middle" whileInView={{scale:[0.2,1]}} transition={{duration:1.8}}>
                            <div className="fw-bold">{member.name}</div>
                            <div>{member.role}</div>
                          </motion.div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </Col>
              <Col md={7}>
                <Swiper slidesPerView={1} loop={true} modules={[Autoplay]} onSlideChange={(swiper) => setActiveIndex(swiper.realIndex)} onSwiper={(swiperInstance) => (swiperRef.current = swiperInstance)} >
                  {teamMembers.map((member, index) => (
                    <SwiperSlide key={index} className="p-3 p-md-5">
                      <motion.img src={member.icon} alt={member.name} className="rounded-circle mb-3" width={100} height={100} whileInView={{scale:[0.3,1]}} transition={{duration:1.7}} />
                      <motion.h3 className="fw-bold">{member.name}</motion.h3>
                      <motion.p>{member.role}</motion.p>
                      <motion.p>
                        {getPreview(member.about)}                      
                      </motion.p>
                      <Row xs={1} sm={2} md={2} className="g-3">
                        <Col className='text-md-start'>
                          <motion.button className="btn btn-outline-danger rounded-pill" onClick={() => handleReadMore(member)} whileInView={{x:[100,0]}} transition={{duration:1.8}}>
                            Read More
                          </motion.button>
                        </Col>
                        <Col>
                          <motion.div className='hstack gap-2 justify-content-start justify-content-md-end' whileInView={{x:[-40,0]}} transition={{duration:1.4}}>
                            <Button
                              variant="outline-danger" onClick={() => handleMemberClick(index - 1)} className="rounded-circle p-0 d-flex align-items-center justify-content-center" style={{width: 40,height: 40}}>
                              <i className="bi bi-arrow-left-short fs-4"></i>
                            </Button>
                            <Button variant="outline-danger" onClick={() => handleMemberClick(index + 1)} className="rounded-circle p-0 d-flex align-items-center justify-content-center" style={{ width: 40, height: 40 }}>
                              <i className="bi bi-arrow-right-short fs-4"></i>
                            </Button>
                          </motion.div>
                        </Col>
                      </Row>                  
                    </SwiperSlide>
                  ))}
                </Swiper>
              </Col>
            </React.Fragment>
          )}          
        </Row>
      </Container>
      {showTeams && (
      <Modal show={showModal} fullscreen={true} onHide={() => setShowModal(false)} className="team-modal">
        <div className="position-absolute top-50 start-05 translate-middle">
          <Button onClick={handlePrev} variant="outline-light" className="rounded-circle p-0 d-flex align-items-center justify-content-center" style={{width: 40,height: 40}}>
            <i className="bi bi-arrow-left-short fs-4"></i>
          </Button>
        </div>
        <div className="position-absolute top-50 start-105 translate-middle">
          <Button onClick={handleNext} variant="outline-light" className="rounded-circle p-0 d-flex align-items-center justify-content-center" style={{ width: 40, height: 40 }}>
            <i className="bi bi-arrow-right-short fs-4"></i>
          </Button>
        </div>
        <Modal.Header className="border-0" closeButton></Modal.Header>
        <Modal.Body className="px-md-5">
          <Row>
            <Col md={3}>
              <motion.img src={selectedMember?.image} alt={selectedMember?.name} className="img-fluid rounded-3" whileInView={{scale:[0.5,1]}} transition={{duration:2}} />
            </Col>
            <Col md={9}>
              <motion.div whileInView={{x:[40,0]}} transition={{duration:1.8}}><i className="bi bi-quote text-danger fs-3" /></motion.div>
              <motion.div dangerouslySetInnerHTML={{ __html: selectedMember?.about || "" }} />
            </Col>
          </Row>
        </Modal.Body>
        <Modal.Footer className="px-md-5 justify-content-between bg-light border-0">
          <div>
            <motion.h3 className="text-danger fw-bold">
              {selectedMember?.name}
            </motion.h3>
            <motion.div className="text-secondary fw-bold">
              {selectedMember?.role}
            </motion.div>
          </div>
          <div>
            <motion.a href={`mailto:${selectedMember?.email}`} className="fw-bold link-dark">
              {selectedMember?.email}
            </motion.a>
            {selectedMember?.social && 
            <Stack gap={2} direction="horizontal" className="justify-content-start justify-content-md-end mt-2">
              {selectedMember?.social.map((socials, index) => (
              <motion.a href={socials.link} key={index} target="_blank" rel="noopener noreferrer" style={{width:"40px",height:"40px"}} className="btn btn-outline-danger bg-danger-subtle rounded-circle d-flex align-items-center justify-content-center p-0 "  whileInView={{x:[-40,0]}} transition={{duration:1.6}}>
                <i className={`bi ${socials.icon}`}></i>
              </motion.a>
              ))}
            </Stack>
            }
          </div>
        </Modal.Footer>
      </Modal>
      )}
    </section>
  );
}