"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { whoWeAreData } from "@/data/about-us/whoWeAreData";

export default function WhoWeAreSection() {
  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) {
      const counterElements = document.querySelectorAll(
        ".counter",
      ) as NodeListOf<HTMLElement>;
      const duration = 2000; // 2 seconds total duration

      counterElements.forEach((counter) => {
        const targetValue = +counter.getAttribute("data-target")!;
        let currentValue = 0;
        const increment = targetValue / (duration / 16); // 60fps animation

        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="who-we-are-sec space">
      <div className="carousel-container">
        <div className="who-we-are-info">
          <div className="row">
            <div className="col-lg-6">
              <div
                className="who-we-are-content"
                data-aos="fade-right"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <div className="sec-title">
                  <span className="sub-title">{whoWeAreData.subTitle}</span>
                  <h2 className="title">{whoWeAreData.title}</h2>
                </div>
              </div>
            </div>
            <div className="col-lg-6">
              <div
                className="who-we-are-tabs"
                data-aos="fade-left"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <ul className="nav nav-tabs" id="myTab" role="tablist">
                  {whoWeAreData.tabs.map((tab, index) => (
                    <li className="nav-item" role="presentation" key={tab.id}>
                      <button
                        className={`nav-link ${index === 0 ? "active" : ""}`}
                        id={`${tab.id}-tab`}
                        data-bs-toggle="tab"
                        data-bs-target={`#${tab.id}`}
                        type="button"
                        role="tab"
                        aria-controls={tab.id}
                        aria-selected={index === 0 ? "true" : "false"}
                      >
                        {tab.title}
                      </button>
                    </li>
                  ))}
                </ul>
                <div className="tab-content" id="myTabContent">
                  {whoWeAreData.tabs.map((tab, index) => (
                    <div
                      className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
                      id={tab.id}
                      role="tabpanel"
                      aria-labelledby={`${tab.id}-tab`}
                      key={tab.id}
                    >
                      <div className="tabs-content">
                        <p>{tab.content}</p>
                        <ul className="faq-list2">
                          {tab.features.map((feature, featureIndex) => (
                            <li key={featureIndex}>
                              <Image
                                src="/assets/images/icon/check1-1.svg"
                                alt="check icon"
                                width={20}
                                height={20}
                              />
                              {feature}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="col-lg-12">
              <div
                className="we-are-img"
                data-aos="zoom-in"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <Image
                  src={whoWeAreData.mainImage.src}
                  alt={whoWeAreData.mainImage.alt}
                  width={1280}
                  height={595}
                />
              </div>
              <div className="row" ref={countersRef}>
                {whoWeAreData.counters.map((counter, index) => (
                  <div className="col-lg-3 col-md-6 col-sm-6" key={index}>
                    <div
                      className="counter-box"
                      data-aos="fade-up"
                      data-aos-delay={200 + index * 100}
                    >
                      <h2 className="title">
                        <span className="counter" data-target={counter.target}>
                          0
                        </span>
                        +
                      </h2>
                      <p>{counter.label}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}