/**
 * AI For All - React wrapper for vendor JS
 *
 * @vendor-dependency @vendor-web/js/components/aiForAll.js
 * @cleanup-status ⚠️ Pending vendor cleanup support
 */

import React, { useEffect, useRef } from 'react';
import { aiForAll } from '@vendor-web/js/components/aiForAll.js';

const AIAForAll: React.FC = () => {
  const aiaForAllRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!aiaForAllRef.current) return;

    const cleanup = aiForAll(aiaForAllRef.current);

    return () => {
      if (typeof cleanup === 'function') {
        cleanup();
      }
    };
  }, []);

  return (
    <section ref={aiaForAllRef} className="aiForAll">
      <hgroup className="aiForAll-opening">
        <h2 className="text-sp text-white aiForAll-openingHeading">AI For All</h2>
        <p className="text-h4-medium text-neutral-400">
          AI Blossoming Across All Sectors
        </p>
      </hgroup>
      <div className="container aiForAll-content aiForAll-content--transition">
        <h2 className="text-h1-bold aiForAll-heading">
          AI For
          <span
            className="aiForAll-heading--transition aiForAll-heading--transitionReady"
          >
            All,
          </span>
          <span
            className="aiForAll-heading--transition aiForAll-heading--transitionReady"
          >
            All in AI
          </span>
        </h2>
        <ul className="aiForAll-container">
          <li className="aiForAll-list aiForAll-list--active">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">A</span>
              utomobile
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Automobile Driver Fatigue Detection System
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">B</span>
              iotechnology
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Biotechnology-Aided Acoustic Biodiversity Field Survey Tool
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">C</span>
              onsumer
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Consumer Smart Wearables for Seniors
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">E</span>
              ducation
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Education and Training System Platform
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">F</span>
              inance
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Financial Report Flow Automation
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">H</span>
              ealthcare
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Healthcare AI System for Early Detection of Autism
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">L</span>
              egal
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Legal Labor Standards Q&A
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">M</span>
              edical
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Medical AI Prognosis: Immune Aging, Chronic Diseases, Severe COVID-19
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">R</span>
              etail
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Retail O2O Consumer Behavior Analysis and Application
            </span>
          </li>
          <li className="aiForAll-list">
            <span className="text-h2-bold">
              <span className="aiForAll-prefix">S</span>
              emiconductor
            </span>
            <br />
            <span className="text-t5-medium aiForAll-description">
              Semiconductor Defect Sorter
            </span>
          </li>
        </ul>
      </div>
    </section>
  );
};

export default AIAForAll;