'use client';

import React from 'react';
import { usePathname } from "next/navigation";
import { motion } from 'framer-motion';
import { Container, Row, Col } from 'react-bootstrap';
import Link from 'next/link';
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/css/autoplay';
import { Autoplay } from 'swiper/modules';
import { LEAD_PAGES } from "@/lib/leadPages";

// {name:'STQC',src:'https://media.vensysco.com/certificate-e1.webp'},
const certificates = [
  {name:'ISO 10004:2018',src:'https://media.vensysco.com/certificate-e2.webp'},
  {name:'ISO 16363',src:'https://media.vensysco.com/certificate-e3.webp'},
  {name:'ISO 9001:2015',src:'https://media.vensysco.com/certificate-e4.webp'},
  {name:'ISO 27001',src:'https://media.vensysco.com/certificate-e5.webp'},
  {name:'ISO 20000',src:'https://media.vensysco.com/certificate-e6.webp'},
  {name:'ISO 14001:2015',src:'https://media.vensysco.com/certificate-e7.webp'},
  {name:'CMMISVC / 5',src:'https://media.vensysco.com/certificate-e8.webp'},
  {name:'CMMIDEV / 5',src:'https://media.vensysco.com/certificate-e9.webp'},
];

export default function Certifications() {
    const pathname = usePathname();
    const isLeadPage = LEAD_PAGES.includes(pathname);
  return (
    <Container className="py-3 py-md-5 position-relative">
        <Row className='g-3 g-md-5 text-center align-items-center justify-content-center'>
            <Col md={8}>
                <motion.p className='fw-bold fs-4'>
                    Preferred by Governments. Powered by Intelligence.
                </motion.p>
                <motion.h2 className="display-4 fw-bold text-danger mb-3">
                    Certifications that Matter and Assure Quality
                </motion.h2>
                {!isLeadPage && (
                <motion.div whileInView={{y:[80, 0]}} transition={{duration:1.8}}>
                    <Link href="/about" className="btn btn-lg btn-outline-danger rounded-pill" aria-label="Navigate to About Us">
                        Know more...
                    </Link>
                </motion.div>
                )}                
            </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 },}}>
                    {certificates.map((logo, index) => (
                    <SwiperSlide key={index} className="d-flex justify-content-center align-items-center">
                        <motion.img src={logo.src} alt={logo.name} width={176} height={176} className="img-fluid object-fit-contain" whileInView={{scale:[0.8,1]}} transition={{duration:2}} />
                    </SwiperSlide>
                    ))}
                </Swiper>
            </Col>
        </Row>
    </Container>
  );
}