"use client";

import React, { useEffect, useRef } from "react";
import Image from "next/image";

const ProcessSection = () => {
    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";
                            const duration = htmlEl.dataset.wowDuration || "1500ms";

                            setTimeout(() => {
                                htmlEl.classList.add("animated", "fadeInUp");
                                htmlEl.style.visibility = "visible";
                                htmlEl.style.animationDuration = duration;
                            }, parseInt(delay));
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

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

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

    const processItems = [
        {
            num: "01",
            title: "Share Your Concept",
            desc: "that a reader will be distracted by the readable content of a page when He is looking",
            delay: "0ms",
            left: false,
        },
        {
            num: "02",
            title: "Analyze Your Concept",
            desc: "that a reader will be distracted by the readable content of a page when He is looking",
            delay: "200ms",
            left: true,
        },
        {
            num: "03",
            title: "Let’s Start Development",
            desc: "that a reader will be distracted by the readable content of a page when He is looking",
            delay: "300ms",
            left: false,
        },
        {
            num: "04",
            title: "Read to Launch",
            desc: "that a reader will be distracted by the readable content of a page when He is looking",
            delay: "400ms",
            left: true,
        },
    ];

    return (
        <section ref={sectionRef} className="process-one-h-four section-space">
            <div
                className="process-one-h-four__bg"
                style={{ backgroundImage: "url(/assets/imgs/bg/process-bg.png)" }}
            ></div>
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        <div
                            className="sec-title wow"
                            data-wow-duration="1500ms"
                            style={{ visibility: "hidden" }}
                        >
                            <h6 className="sec-title__tagline text-center">
                                <span className="icon-sec-icon"></span>
                                Step Process
                            </h6>
                            <h3 className="sec-title__title text-center">Our works Process</h3>
                        </div>
                    </div>
                </div>
                <div className="process-one-h-four__wrapper">
                    <div className="process-one-h-four__line-shape">
                        <Image
                            src="/assets/image.png"
                            alt="Process Line"
                            width={1170}
                            height={500}
                        />
                    </div>
                    <div className="process-one-h-four__content">
                        {processItems.map((item, index) => (
                            <div
                                key={index}
                                className={`process-one-h-four__item wow ${item.left ? "process-one-h-four__item-left" : ""}`}
                                data-wow-duration="1500ms"
                                data-wow-delay={item.delay}
                                style={{ visibility: "hidden" }}
                            >
                                <span className="process-one-h-four__num">{item.num}</span>
                                <h3 className="process-one-h-four__title">{item.title}</h3>
                                <p className="process-one-h-four__desc">{item.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ProcessSection;
