"use client";

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

const HomeServiceOne: React.FC = () => {
    return (
        <section
            className="service-one-home"
            style={{ backgroundImage: 'url("/assets/images/home/5/bg-service.webp")' }}
        >
            <div className="container">
                <div className="row align-items-center justify-content-between">
                    <div className="col-lg-6">
                        <div className="service-one-home__title">
                            <div className="sec-title">
                                <div className="sec-title__shape">
                                </div>
                                <h6 className="sec-title__tagline text-white">OUR SERVICES</h6>
                                <h3 className="sec-title__title text-white">We Shape the Perfect
                                    Solution.</h3>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <div className="service-one-home__text">
                            <p className="text-white">
                                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>
                    </div>
                </div>

                <div className="swiper service-one-home__carousel mt-50">
                    <div className="swiper-wrapper">
                        {ourServices.slice(0, 7).map((service, index) => {
                            return (
                                <div key={index} className="swiper-slide">
                                    <div className="item">
                                        <div className="home-services__card">
                                            <div className="home-services__card__shape--one"></div>
                                            <div className="home-services__card__shape--two"></div>
                                            <div className="home-services__card__content">
                                                <div className="home-services__card__icon">
                                                    <img loading="lazy" src={service.icon} alt="icon" width="42" height="42" />
                                                </div>
                                                <h4 className="home-services__card__count">--</h4>
                                                <h2 className="home-services__card__title">
                                                    <Link href={`/service/${service.slug}`}>{service.title}</Link>
                                                </h2>
                                                <p className="home-services__card__text">
                                                    {service.description.substring(0, 100)}...
                                                </p>
                                            </div>
                                            <div className="home-services__card__image">
                                                <img loading="lazy" src={service.image} alt={service.title} />
                                                <div className="home-services__card__hover">
                                                    <Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
                                                        <i className="fa-solid fa-arrow-right"></i>
                                                    </Link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default HomeServiceOne;