"use client";

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

const HomeServiceOne: React.FC = () => {
    useEffect(() => {
        // Swiper Initialization
        const initSwiper = () => {
            if (typeof window !== "undefined" && (window as any).Swiper) {
                new (window as any).Swiper('.service-one-home__carousel', {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    loop: true,
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                    },
                    speed: 800,
                    pagination: {
                        el: '.service-one-home__swiper-dot',
                        clickable: true,
                    },
                    breakpoints: {
                        576: { slidesPerView: 1 },
                        768: { slidesPerView: 2 },
                        992: { slidesPerView: 3 },
                        1200: { slidesPerView: 3 },
                    },
                });
            } else if (typeof window !== "undefined") {
                setTimeout(initSwiper, 100);
            }
        };
        initSwiper();

        // Animation Initialization
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const elements = entry.target.querySelectorAll(".wow");
                        elements.forEach((el) => {
                            const htmlEl = el as HTMLElement;
                            const delay = htmlEl.dataset.wowDelay || "0ms";
                            setTimeout(() => {
                                htmlEl.classList.add("animated");
                                htmlEl.style.visibility = "visible";
                            }, parseInt(delay));
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

        const section = document.querySelector(".service-one-home");
        if (section) observer.observe(section);

        return () => observer.disconnect();
    }, []);

    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 wow fadeInUp" data-wow-delay="0ms">OUR SERVICES</h6>
                                <h3 className="sec-title__title text-white wow fadeInUp" data-wow-delay="200ms">We Shape the Perfect Solution.</h3>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <div className="service-one-home__text wow fadeInUp" data-wow-delay="400ms">
                            <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 wow fadeInUp" data-wow-delay={`${index * 100}ms`}>
                                    <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;