import React, { useEffect } from "react";
import { services3 } from "@/utils/data";

const ServiceSection = () => {
    useEffect(() => {
        if (typeof window !== "undefined" && (window as any).Swiper) {
            new (window as any).Swiper('.service-active-2', {
                slidesPerView: 4,
                spaceBetween: 30,
                loop: true,
                autoplay: {
                    delay: 3000,
                },
                pagination: {
                    el: ".bd-swiper-dot",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".service-active-2-button-next",
                    prevEl: ".service-active-2-button-prev",
                },
                breakpoints: {
                    '1200': { slidesPerView: 4 },
                    '992': { slidesPerView: 3 },
                    '768': { slidesPerView: 2 },
                    '576': { slidesPerView: 1 },
                    '0': { slidesPerView: 1 },
                },
            });
        }
    }, []);

    return (
        <section className="service-section-three p-relative section-space-bottom bg-color-1 fix">
            <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-46.png)" }}></div>
            <div className="shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-47.png)" }}></div>
            <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-48.png)" }}></div>
            <div className="small-container">
                <div className="service-3-title-box mb-50">
                    <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                        <span className="section-sub-title no-border">SERVICES WE’RE OFFERING</span>
                        <h3 className="section-title mt-10 text-white">Exclusive IT Services</h3>
                    </div>
                    <div className="service_1_navigation__wrapprer position-relative z-1">
                        <div className="common-slider-navigation">
                            <button className="service-active-2-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
                            <button className="service-active-2-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
                <div className="swiper service-active-2">
                    <div className="swiper-wrapper">
                        {services3.map((service, index) => (
                            <div key={service.id} className="swiper-slide">
                                <div className="service-3-box-area p-relative">
                                    <a className="image w-img" href="#">
                                        <img src={service.image} alt="" />
                                    </a>
                                    <div className="inner text-center">
                                        <div className="content-box">
                                            <div className="icon-box">
                                                <img src={service.icon} alt="img" />
                                            </div>
                                            <h4><a href="#">{service.title}</a></h4>
                                            <p className="mb-25">{service.description}</p>
                                        </div>
                                        <div className="btn-area">
                                            <a href="#">services details <i className="fa-solid fa-angles-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ServiceSection;
