"use client";

import React from "react";
import Link from "next/link";
import { ourServices } from "@/utils/data";
import { ServiceType } from "@/types";

const ServiceThreeSlider = () => {
    const services: ServiceType[] = ourServices;

    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-10 col-xl-12">
                        <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
                            <div className="sec-title sec-title--light">
                                <div className="sec-title__shape"></div>
                                <h6 className="sec-title__tagline">OUR SERVICEs</h6>
                                <h3 className="sec-title__title text-white">We Shape the Perfect Solution.</h3>
                                <p className="text-white mt-4">At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.</p>
                            </div>
                            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                        </div>
                    </div>
                    {/* <div className="col-xxl-2 col-xl-6">
                        <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
                            <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.slice(0, 6).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={`/services-digital-solutions/${service.slug}`}>{service.title}</Link>
                                        </h3>
                                        <p className="service-three__item__text text-white">{service.description}</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>
        </section>
    );
};

export default ServiceThreeSlider;
