"use client";

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

const WhyChooseSection = () => {
    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("slideInLeft")) {
                                    htmlEl.classList.add("slideInLeft");
                                } 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 listItems = [
        {
            iconClass: "fa-solid fa-globe",
            title: "Accelerate Innovation Tech Teams",
            link: "/team",
        },
        {
            iconClass: "fa-solid fa-network-wired",
            title: "Network Infrastructure software",
            link: "/about",
        },
        {
            iconClass: "fa-solid fa-gears",
            title: "We Provide This Solution Business",
            link: "/services",
        },
    ];

    return (
        <section ref={sectionRef} className="why-choose-three">
            <div
                className="why-choose-three__bg"
                style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/why-choose-3-bg.png)" }}
            ></div>
            <div className="container">
                <div className="row">
                    <div className="col-xl-6">
                        <div className="why-choose-three__image wow slideInLeft" data-wow-delay="0ms" style={{ visibility: "hidden" }}>
                            <img src="https://tolaklaravel.bracketweb.com/assets/images/resources/why-choose-3-1.jpg" alt="Why Choose Us" />
                        </div>
                    </div>
                    <div className="col-xl-6 d-flex align-items-center">
                        <div className="why-choose-three__content wow fadeInUp" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
                            <div className="sec-title-three text-left">
                                <h6 className="sec-title-three__tagline">
                                    <span className="sec-title-three__tagline__left-border"></span>
                                    Why Choose Us
                                    <span className="sec-title-three__tagline__right-border"></span>
                                </h6>
                                <h3 className="sec-title-three__title">
                                    Choose The Best IT Service For Company Solution
                                </h3>
                            </div>
                            <p className="why-choose-three__content__text">
                                Business tailored design, management &amp; support services Business business agency elit, sed do eiusmod tempor
                                majority have in some we form, by injected humour solution.
                            </p>
                            <ul className="why-choose-three__content__list">
                                {listItems.map((item, index) => (
                                    <li key={index}>
                                        <span className="why-choose-three__content__list__number"></span>
                                        <span className="why-choose-three__content__list__icon">
                                            <i className={item.iconClass}></i>
                                        </span>
                                        {item.title}

                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default WhyChooseSection;
