// === import ===
import { useEffect, useRef } from 'react';
import { OurImpact } from '/data/www/aia-official-en-main/web/src/js/components/ourImpact.js';

type OurImpactProps = {
  dataEnd?: boolean;
}
export default function Impact(
  { dataEnd = false }: OurImpactProps
) {
  const ourImpactRef = useRef(null);
  useEffect(() => {
    if (ourImpactRef.current) {
      OurImpact(ourImpactRef.current);
    }
  }, []);
  console.log('Impact component mounted with dataEnd:', dataEnd);
  return (
    <section ref={ourImpactRef} className="ourImpact" data-end={dataEnd ? 'true' : 'false'}>
      <div className="container h-full">
        <h2 className="ourImpact-heading text-h1-bold">Our Impact</h2>
        <div className="ourImpact-container">
          <i
            className={`ourImpact-logo logo-original ourImpact-logo ${dataEnd ? 'ourImpact-logo--step5' : 'ourImpact-logo--step1'}`}
          ></i>
          <div className={`ourImpact-scrollContainer container ${dataEnd ? 'opacity-0' : ''}`}>
            <ul className="ourImpact-scrollListContainer">
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-1.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">6</span>
                Annual Conferences
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-3.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">129</span>
                Programs
                <span className="text-t4-medium text-neutral-600 block">
                  in Management and Engineering
                </span>
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-5.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">661</span>
                Technical Study Cases
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-7.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">2,157</span>
                Trainee Companies
              </li>
            </ul>
            <ul className="ourImpact-scrollListContainer">
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-8.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">11,496</span>
                Trainee
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-6.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">714</span>
                Industry User Cases
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-4.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">431</span>
                Lectures
              </li>
              <li
                className="ourImpact-scrollList ourImpact-scrollList--ready text-h5-bold text-black"
              >
                <figure className="ourImpact-listVisual">
                  <img
                    className="object-scale-down object-center"
                    src="images/img-ourImpact-2.png"
                    alt=""
                  />
                </figure>
                <span className="text-h1-bold block">15</span>
                Industry Involved
              </li>
            </ul>
          </div>
          <ul className="ourImpact-endingContainer container opacity-0">
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">6</span>
              Annual Conferences
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">15</span>
              Industry Involved
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">129</span>
              Programs
              <span className="text-caption-medium text-neutral-600 block">
                in Management and Engineering
              </span>
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">431</span>
              Lectures
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">661</span>
              Technical Study Cases
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">714</span>
              Industry User Cases
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">2,157</span>
              Trainee Companies
            </li>
            <li className="ourImpact-endingList text-t5-bold text-black">
              <span className="ourImpact-listNumber text-h2-bold">11,496</span>
              Trainee
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}