"use client";

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

const CareersWorkProcess = () => {
    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";
                            }, parseFloat(delay.replace("s", "")) * 1000);
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

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

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

    /* ── Icons and hover backgrounds use static images ── */
    const processSteps = [
        {
            id: 1,
            stepText: "Step 01",
            title: "Comprehensive digital development",
            desc: "Expert web, app development and e-commerce solutions.",
            delay: ".3s",
            icon: "/assets/images/services/workprocess/icon/comprehensive.webp",
            hoverBg: "/assets/images/services/workprocess/comprehensive.webp",
        },
        {
            id: 2,
            stepText: "Step 02",
            title: "Strategic online growth solutions",
            desc: "Strategic SEO and digital marketing for growth.",
            delay: ".5s",
            icon: "/assets/images/services/workprocess/icon/strategic.webp",
            hoverBg: "/assets/images/services/workprocess/strategic.webp",
        },
        {
            id: 3,
            stepText: "Step 03",
            title: "Creative design and branding excellence",
            desc: "Creative graphic design and branding strategy services.",
            delay: ".7s",
            icon: "/assets/images/services/workprocess/icon/branding.webp",
            hoverBg: "/assets/images/services/workprocess/branding.webp",
        },
    ];

    return (
        <section
            ref={sectionRef}
            className="work-process-section-3 section-padding"
            suppressHydrationWarning
        >
            <div className="left-shape">
                <img
                    src="/assets/images/services/workprocess/left-img.webp"
                    alt="shape"
                />
            </div>

            <div className="container">
                {/* Heading */}
                <div className="sec-title-wrapper text-center wow fadeInUp" data-wow-delay=".3s">
                    <div className="sec-title">
                        <div className="sec-title__shape"></div>
                        <h6 className="sec-title__tagline">Strategic Digital Services</h6>
                        <h3 className="sec-title__title">Innovation &amp; Growth</h3>
                    </div>
                </div>

                <div className="row">
                    {processSteps.map((step) => (
                        <div
                            key={step.id}
                            className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
                            data-wow-delay={step.delay}
                            style={{ visibility: "hidden" }}
                        >
                            <div
                                className="work-process-box-3"
                                style={{ "--hover-bg": `url(${step.hoverBg})` } as React.CSSProperties}
                            >
                                <div className="content">
                                    <h3>{step.title}</h3>
                                    <p>{step.desc}</p>
                                    <div className="icon">
                                        <img src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default CareersWorkProcess;