"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { countersData, type Counter } from "@/data/home/about";

export default function About() {
  const [isVisible, setIsVisible] = useState(false);
  const countersRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    const currentRef = countersRef.current;
    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, []);

  useEffect(() => {
    if (!isVisible) return;

    const counterElements = document.querySelectorAll(
      ".about-sec .counter"
    ) as NodeListOf<HTMLElement>;
    const duration = 2000;

    counterElements.forEach((counter) => {
      const targetValue = Number(counter.getAttribute("data-target") ?? 0);
      let currentValue = 0;
      const increment = targetValue / (duration / 16);

      const animate = () => {
        currentValue += increment;
        if (currentValue < targetValue) {
          counter.innerText = Math.floor(currentValue).toString();
          requestAnimationFrame(animate);
        } else {
          counter.innerText = targetValue.toString();
        }
      };

      animate();
    });
  }, [isVisible]);

  return (
    <section className="about-sec">
      <div className="carousel-container">
        <div className="about-info">
          <div className="row">
            <div className="col-lg-6">
              <div
                className="about-content space"
                data-aos="fade-right"
                data-aos-duration="900"
                data-aos-delay="300"
              >
                <div className="sec-title mb-0">
                  <span className="sub-title">About Us</span>
                  <h2 className="title">
                    Building Smarter, Big Solutions Together
                  </h2>
                  <p>
                    We specialize in delivering innovative, full-cycle software
                    development and AI-powered solutions that help businesses
                    operate smarter and scale faster.
                  </p>
                </div>

                <div className="row" ref={countersRef}>
                  {countersData.map((counter: Counter, index) => (
                    <div key={index} className="col-lg-4 col-md-4 col-sm-4">
                      <div
                        className="counter-box"
                        data-aos="fade-up"
                        data-aos-delay={counter.delay}
                      >
                        <h2 className="title">
                          <span
                            className="counter"
                            data-target={counter.target}
                          >
                            0
                          </span>
                          {counter.suffix}
                        </h2>
                        <p>{counter.label}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <Link href="#" className="btn-style1">
                  Get Started
                  <span>
                    <Image
                      src="/assets/images/icon/arrow.svg"
                      alt="Arrow Icon"
                      width={16}
                      height={16}
                    />
                  </span>
                </Link>
              </div>
            </div>

            <div className="col-lg-6">
              <div
                className="about-img space"
                data-aos="fade-left"
                data-aos-duration="900"
                data-aos-delay="300"
              >
                <Image
                  src="/assets/images/event/about1-1.png"
                  alt="Team Working Illustration"
                  width={500}
                  height={400}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}