"use client";

import React, { useEffect, useRef } from "react";

const WorkProcessSection2 = () => {
    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");
                                htmlEl.classList.add("fadeInUp");
                                htmlEl.style.visibility = "visible";
                            }, parseInt(delay.replace('s', '')) * 1000);
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

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

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

    const processCards = [
        { id: 1, text: "Brainstorming \n Ideas", icon: "tolak-icons-two-lamp" },
        { id: 2, text: "Product \n Design", icon: "tolak-icons-two-settings-2" },
        { id: 3, text: "Back-End \n Development", icon: "tolak-icons-two-optimization" },
        { id: 4, text: "SEO \n Optimization", icon: "tolak-icons-two-business-analysis" },
        { id: 6, text: "Digital SEO \n Marketing", icon: "tolak-icons-two-support" },
        { id: 7, text: "Mobile \n Development", icon: "tolak-icons-two-smart-solution" },
    ];

    return (
        <div ref={sectionRef} className="work-process-container-wrapper style2">
            <div className="shape">
                <a href="#">
                    <img
                        className="rotate360"
                        src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_3.png"
                        alt="shape"
                    />
                </a>
            </div>
            <div className="container">
                <div className="work-process-wrapper style2">
                    <div className="shape1 d-none d-xxl-block">
                        <img src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_1.png" alt="shape" />
                    </div>
                    <div className="shape2 d-none d-xxl-block">
                        <img src="https://tolaklaravel.bracketweb.com/assets/images/shapes/workProcessShape2_2.png" alt="shape" />
                    </div>

                    <div className="row gy-5 gx-70 align-items-center">
                        <div className="col-xl-5">
                            <div className="work-process-content">
                                <div className="section-title">
                                    <div className="subtitle text-white wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
                                        <img src="https://tolaklaravel.bracketweb.com/assets/images/icon/arrowLeftWhite.svg" alt="icon" />
                                        <span className="text-white">How we do</span>
                                        <img src="https://tolaklaravel.bracketweb.com/assets/images/icon/arrowRightWhite.svg" alt="icon" />
                                    </div>
                                    <h2 className="title text-white wow" data-wow-delay="0.6s" style={{ visibility: "hidden" }}>
                                        Amazing Solutions <br /> For business
                                    </h2>
                                    <p className="text-white wow" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
                                        We don&apos;t believe in a one-size-fit-all approach. Our services are carefully
                                        customized to suit your specific need, ensuring you to achieve your goals.
                                    </p>
                                    <div className="btn-wrapper mt-4">
                                        <a className="gt-btn style5" href="#">
                                            <b>HOW IT WORKS</b>
                                            <i className="fa-sharp fa-regular fa-arrow-right-long"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="col-xl-7">
                            <div className="work-process-thumb wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
                                <div className="thumb2_1">
                                    <img
                                        src="https://tolaklaravel.bracketweb.com/assets/images/resources/workProcessThumb1_1.png"
                                        style={{ filter: "none", maxWidth: "100%" }}
                                        alt="thumb"
                                    />
                                </div>

                                {processCards.map((card) => (
                                    <div key={card.id} className={`process-card card-${card.id}`}>
                                        <div className="number">{card.id}</div>
                                        <div className="icon">
                                            <span className={card.icon}></span>
                                        </div>
                                        <div className="text">
                                            {card.text.split('\n').map((line, i) => (
                                                <React.Fragment key={i}>
                                                    {line}
                                                    {i === 0 && <br />}
                                                </React.Fragment>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default WorkProcessSection2;
