"use client";

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

const AboutOneSection = () => {
    const imagesRef = useRef<HTMLDivElement>(null);
    const wrapperRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const el = entry.target as HTMLElement;
                        const elements = el.querySelectorAll(".wow");
                        elements.forEach((child) => {
                            const childEl = child as HTMLElement;
                            const delay = childEl.dataset.wowDelay || "0ms";
                            setTimeout(() => {
                                childEl.classList.add("animated", "fadeInUp");
                                childEl.style.visibility = "visible";
                            }, parseInt(delay));
                        });
                        observer.unobserve(el);
                    }
                });
            },
            { threshold: 0.1 }
        );

        if (imagesRef.current) observer.observe(imagesRef.current);
        if (wrapperRef.current) observer.observe(wrapperRef.current);

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

    return (
        <section className="about-one section-space">
            <div className="about-one__bg"></div>
            <div className="about-one__shapes">
                <div className="body-shape-one"></div>
                <div className="body-shape-two"></div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col-lg-7">
                        <div
                            ref={imagesRef}
                            className="about-one__images"
                        >
                            <div className="about-one__img__one wow fadeInLeft" data-wow-delay="500ms" style={{ visibility: "hidden" }}>
                                <Image
                                    src="/assets/img-app/about/about-img5.png"
                                    alt="About Careers"
                                    width={440}
                                    height={695}
                                />
                            </div>
                            <div className="about-one__img__two wow fadeInRight" data-wow-delay="700ms" style={{ visibility: "hidden" }}>
                                <Image
                                    src="/assets/img-app/about/about-img4.png"
                                    alt="Careers Team"
                                    width={490}
                                    height={471}
                                />
                            </div>
                            <div className="about-one__logo__icon">
                                <Image
                                    src="/assets/img-app/logo.webp"
                                    alt="Logo"
                                    width={104}
                                    height={50}
                                />
                            </div>
                            {/* <div className="about-one__orange-bar"></div> */}
                        </div>
                    </div>
                    <div className="col-lg-5 position-relative">
                        <div
                            ref={wrapperRef}
                            className="about-one__wrapper"
                        >
                            <div className="about-one__wrapper__bg__overlay"></div>
                            <div className="about-one__content">
                                <div className="sec-title wow" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
                                    <h6 className="sec-title__tagline">
                                        <span className="ao-diamond">◆</span>
                                        About us
                                    </h6>
                                    <h2 className="sec-title__title">
                                        Discover the World Marketing Agency
                                    </h2>
                                </div>
                                <div className="about-one__content__desc wow" data-wow-delay="400ms" style={{ visibility: "hidden" }}>
                                    There are many variations of passages of Lorem Ipsum avalab but the majority have
                                    suffered alteration in some form, by injected humour, or randomised words which
                                    don&apos;t
                                </div>
                                <div className="about-one__content__eliment wow" data-wow-delay="600ms" style={{ visibility: "hidden" }}>
                                    <div className="about-one__content__eliment__img-wrapper">
                                        <Image
                                            src="/assets/img-app/about/about-img2.png"
                                            alt="Free Consultation"
                                            width={132}
                                            height={132}
                                            className="about-one__content__eliment__img"
                                        />
                                    </div>
                                    <div className="about-one__content__eliment__content">
                                        <h3 className="about-one__content__eliment__title">
                                            Free Consultation
                                        </h3>
                                        <p className="about-one__content__eliment__desc">
                                            There are many variations of passages of Lorem Ipsum avalab but
                                        </p>
                                    </div>
                                </div>
                                <ul className="about-one__content__list wow" data-wow-delay="800ms" style={{ visibility: "hidden" }}>
                                    <li>
                                        <i className="fa-solid fa-circle-check"></i>
                                        Many variations of passages of lorem
                                    </li>
                                    <li>
                                        <i className="fa-solid fa-circle-check"></i>
                                        Many variations of passages of lorem
                                    </li>
                                    <li>
                                        <i className="fa-solid fa-circle-check"></i>
                                        Expert many variations teacher
                                    </li>
                                </ul>
                                <div className="wow" data-wow-delay="1000ms" style={{ visibility: "hidden" }}>
                                    <Link href="/about-us" className="getizy-btn btn-hover-cropping">
                                        Discover More
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default AboutOneSection;
