"use client";

import React, { useEffect, useRef } from "react";
import Link from "next/link";

const ServiceSection2 = () => {
    const sectionRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        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");

                                if (htmlEl.classList.contains("fadeInLeft")) {
                                    htmlEl.classList.add("fadeInLeft");
                                } else if (htmlEl.classList.contains("fadeInRight")) {
                                    htmlEl.classList.add("fadeInRight");
                                } else {
                                    htmlEl.classList.add("fadeInUp");
                                }

                                htmlEl.style.visibility = "visible";
                            }, parseInt(delay));
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

        if (sectionRef.current) {
            observer.observe(sectionRef.current);
        }

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

    const services = [
        {
            title: "Network Infrastructure",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-network-wired",
            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg",
            link: "/business-growth"
        },
        {
            title: "Data Management",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-database",
            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg",
            link: "/business-support"
        },
        {
            title: "Technology Solution",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-microchip",
            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg",
            link: "/technology-services"
        },
        {
            title: "Technology Solution",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-microchip",
            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-3.jpg",
            link: "/technology-services"
        },
             {
            title: "Data Management",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-database",
            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-2.jpg",
            link: "/business-support"
        },
        {
            title: "Network Infrastructure",
            text: "Solution the connection, we create platforms business Solution",
            icon: "fa-solid fa-network-wired",
            image: "https://tolaklaravel.bracketweb.com/assets/images/resources/service-3-1.jpg",
            link: "/business-growth"
        },
    ];

    return (
        <section ref={sectionRef} className="service-three">
            <div
                className="service-three__bg"
                style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/service-bg-3.jpg)" }}
            ></div>
            <div
                className="service-three__shape"
                style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/service-shape-3.png)" }}
            ></div>
            <div className="container">
                <div className="sec-title-three">
                    <h6 className="sec-title-three__tagline">
                        <span className="sec-title-three__tagline__left-border"></span>
                        OUR BEST SERVICE
                        <span className="sec-title-three__tagline__right-border"></span>
                    </h6>
                    <h3 className="sec-title-three__title">We Are Service Your Business</h3>
                </div>

                <div className="row">
                    {services.map((service, index) => (
                        <div
                            key={index}
                            className="col-lg-4 col-md-6 wow fadeInUp"
                            data-wow-delay={`${index * 100}ms`}
                            style={{ visibility: "hidden" }}
                        >
                            <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">{service.text}</p>
                                </div>
                                <div className="service-three__item__image">
                                    <img src={service.image} alt={service.title} />
                                    {/* <Link className="service-three__item__rm" href={service.link}>
                                        <span className="fa-solid fa-arrow-right-long"></span>
                                    </Link> */}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default ServiceSection2;
