"use client";

import React from "react";
import Link from "next/link";

const ServiceThreeSlider = () => {
    const services = [
        {
            title: "Network Infrastructure",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-network-wired",
            image: "/assets/img/about/about-img14.png",
            link: "/services"
        },
        {
            title: "Data Management",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-database",
            image: "/assets/img/about/about-img15.png",
            link: "/services"
        },
        {
            title: "Technology Solution",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-microchip",
            image: "/assets/img/about/about-img13.png",
            link: "/services"
        },
        {
            title: "Cloud Computing",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-cloud",
            image: "/assets/img/about/about-img14.png",
            link: "/services"
        },
        {
            title: "Cyber Security",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-shield-halved",
            image: "/assets/img/about/about-img15.png",
            link: "/services"
        },
        {
            title: "IT Consultancy",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-user-tie",
            image: "/assets/img/about/about-img13.png",
            link: "/services"
        }
    ];

    return (
        <section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
            <div className="shape-1 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-10.png)" }}></div>
            <div className="shape-2 float-bob-y" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-9.png)" }}></div>
            <div className="shape-3" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-11.png)" }}></div>

            <div className="small-container">
                <div className="row align-items-end">
                    <div className="col-xxl-6 col-xl-6">
                        <div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
                            <span className="section-sub-title no-border text-white">OUR BEST SERVICE</span>
                            <h3 className="section-title mt-10 text-white">We Are Service Your Business</h3>
                        </div>
                    </div>
                    <div className="col-xxl-6 col-xl-6">
                        <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30 mb-50">
                            <div className="common-slider-navigation">
                                <button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>
                                <button className="service-1-button-next slider-nav-btn"><i className="fa-solid fa-chevron-right"></i></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="swiper service-active-1">
                    <div className="swiper-wrapper">
                        {services.map((service, index) => (
                            <div key={index} className="swiper-slide">
                                <div className="service-three__item text-center">
                                    <div className="service-three__item__content">
                                        <div className="service-three__item__icon">
                                            <span className={service.icon}></span>
                                        </div>
                                        <h3 className="service-three__item__title">
                                            <Link href={service.link}>{service.title}</Link>
                                        </h3>
                                        <p className="service-three__item__text text-black">{service.text}</p>
                                    </div>
                                    <div className="service-three__item__image">
                                        <img src={service.image} alt={service.title} className="service-img-fixed" />
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            <style jsx>{`
                .dark-bg {
                    background: #07172b !important;
                }
                .text-white {
                    color: #ffffff !important;
                }
                .section-sub-title.text-white::before {
                    background-color: #ffffff;
                }
                .service-three__item {
                    margin-top: 40px;
                    // background: #fff;
                    border-radius: 20px;
                    overflow: hidden;
                    transition: all 500ms ease;
                }
                .service-three__item__content {
                    padding: 0 28px 30px;
                }
                .service-three__item__icon {
                    position: relative;
                    top: -40px;
                    width: 84px;
                    height: 84px;
                    background-color: #f1f5f9;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto -20px;
                    color: #3779b9;
                    font-size: 36px;
                    transition: all 500ms ease;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                }
                .service-three__item:hover .service-three__item__icon {
                    background-color: #3779b9;
                    color: #fff;
                }
                .service-three__item__title {
                    font-size: 22px;
                    font-weight: 700;
                    margin-bottom: 12px;
                }
                .service-three__item__title a {
                    color: #1a1f2b !important;
                }
                .service-three__item__text {
                    font-size: 15px;
                    color: #64748b;
                    line-height: 1.6;
                    margin-bottom: 0;
                }
                .service-three__item__image {
                    position: relative;
                    overflow: hidden;
                    line-height: 0;
                }
                .service-img-fixed {
                    width: 100%;
                    height: 250px !important;
                    object-fit: cover;
                    clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%);
                    transition: all 500ms ease;
                }
                .service-three__item:hover .service-img-fixed {
                    transform: scale(1.05);
                }
                .slider-nav-btn {
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    background: transparent;
                    color: #fff;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    transition: all 0.3s ease;
                }
                .slider-nav-btn:hover {
                    background: #3779b9;
                    border-color: #3779b9;
                }
            `}</style>
        </section>
    );
};

export default ServiceThreeSlider;
