// Import ========================================================================================================================
import { textareaHeightControl } from '/data/www/aia-official-en-main/web/src/js/components/input.js';
import { carousel } from '/data/www/aia-official-en-main/web/src/js/patterns/carousel.js';
import App from '@/layouts/aia/app-layout';
import { checkboxButtonDisableToggle, formErrorMessage, formReset, formValidation } from '/data/www/aia-official-en-main/web/src/js/patterns/form.js';
import Button from '@/components/button';
import Input from '@/components/input';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import ParterLanding from '@/components/aia/parter-landing';
import HeroContent from '@/components/aia/hero-content';
import PartnerCard from '@/components/aia/partner-card';
import PartnerVoice from '@/components/aia/partner-voice';
import { useEffect, useRef } from 'react';

export default function PartnerWithUs() {
  const carouselRef = useRef(null);
  useEffect(() => {
    if (carouselRef.current) {
      carousel(carouselRef.current);
    }
  }, []);

  const partnerDashboardNums = {
    numberOfSponsors: 6,
    numberOfAcademicPartners: 86,
    numberOfIndustryPartners: 2100,
  }

  const PartnerCards = [
    {
      partnerTitle: "Annual Conference Sponsorship",
      partnerDescription: "Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.",
      PartnerImgSrc: "images/img-partnerCard.png",
      PartnerImgAlt: "",
    },
    {
      partnerTitle: "AI Research Partnership",
      partnerDescription: "Join us in advancing AI research with cutting-edge projects and collaborations.",
      PartnerImgSrc: "images/img-partnerCard.png",
      PartnerImgAlt: "AI Research Partnership Image",
    }
    ,
    {
      partnerTitle: "AI Research Partnership",
      partnerDescription: "Join us in advancing AI research with cutting-edge projects and collaborations.",
      PartnerImgSrc: "images/img-partnerCard.png",
      PartnerImgAlt: "AI Research Partnership Image",
    }
    ,
    {
      partnerTitle: "AI Research Partnership",
      partnerDescription: "Join us in advancing AI research with cutting-edge projects and collaborations.",
      PartnerImgSrc: "images/img-partnerCard.png",
      PartnerImgAlt: "AI Research Partnership Image",
    },
    {
      partnerTitle: "AI Research Partnership",
      partnerDescription: "Join us in advancing AI research with cutting-edge projects and collaborations.",
      PartnerImgSrc: "images/img-partnerCard.png",
      PartnerImgAlt: "AI Research Partnership Image",
    }

  ]

  const partnerVoices = [
    {
      partnerVoiceContent: "AUO didn’t just invest in AI—they invested in the future. By partnering with Taiwan AI Academy (AIA), AUO pioneered an AI revolution, deploying 2,000+ AI models, boosting productivity by 40%, and cutting energy consumption by 20%—all within five years. This is the power of strategic AI adoption. AIA isn’t just training talent; it’s shaping the future of industries. Partner with AIA, and lead the next wave of AI-driven success.",
      partnerVoiceAuthorName: "Shuang-Lang (Paul) Peng",
      partnerVoiceAuthorTitle: "Chairman and Group Chief Strategy Officer",
      partnerVoiceAuthorCompanySrc: "images/logo-company.png",
      partnerVoiceAuthorCompanyAlt: "AUO Logo"
    },
    {
      partnerVoiceContent: "AUO didn’t just invest in AI—they invested in the future. By partnering with Taiwan AI Academy (AIA), AUO pioneered an AI revolution, deploying 2,000+ AI models, boosting productivity by 40%, and cutting energy consumption by 20%—all within five years. This is the power of strategic AI adoption. AIA isn’t just training talent; it’s shaping the future of industries. Partner with AIA, and lead the next wave of AI-driven success.",
      partnerVoiceAuthorName: "Shuang-Lang (Paul) Peng",
      partnerVoiceAuthorTitle: "Chairman and Group Chief Strategy Officer",
      partnerVoiceAuthorCompanySrc: "images/logo-company.png",
      partnerVoiceAuthorCompanyAlt: "AUO Logo"
    },
    {
      partnerVoiceContent: "AUO didn’t just invest in AI—they invested in the future. By partnering with Taiwan AI Academy (AIA), AUO pioneered an AI revolution, deploying 2,000+ AI models, boosting productivity by 40%, and cutting energy consumption by 20%—all within five years. This is the power of strategic AI adoption. AIA isn’t just training talent; it’s shaping the future of industries. Partner with AIA, and lead the next wave of AI-driven success.",
      partnerVoiceAuthorName: "Shuang-Lang (Paul) Peng",
      partnerVoiceAuthorTitle: "Chairman and Group Chief Strategy Officer",
      partnerVoiceAuthorCompanySrc: "images/logo-company.png",
      partnerVoiceAuthorCompanyAlt: "AUO Logo"
    },
    {
      partnerVoiceContent: "AUO didn’t just invest in AI—they invested in the future. By partnering with Taiwan AI Academy (AIA), AUO pioneered an AI revolution, deploying 2,000+ AI models, boosting productivity by 40%, and cutting energy consumption by 20%—all within five years. This is the power of strategic AI adoption. AIA isn’t just training talent; it’s shaping the future of industries. Partner with AIA, and lead the next wave of AI-driven success.",
      partnerVoiceAuthorName: "Shuang-Lang (Paul) Peng",
      partnerVoiceAuthorTitle: "Chairman and Group Chief Strategy Officer",
      partnerVoiceAuthorCompanySrc: "images/logo-company.png",
      partnerVoiceAuthorCompanyAlt: "AUO Logo"
    },
  ]

  return (
    <App
      subNav={
        <SectionNavigation
          links={
            [{ name: 'About AIA', href: route('about') },
            { name: 'People', href: route('people') },
            { name: 'Partner with us', href: route('partner'), default: true }
            ]
          }
        />
      }
      pageMeta={
        <PageMeta
          title="Partner with Us"

        />
      }

    >
      <ParterLanding />
      <HeroContent />
      <section className="pageSection">
        <div className="container">
          <div className="partnerSection">
            <h2 className="partnerSection-heading text-h2-bold">How would you like to partner with us?</h2>

            <div className="partnerSection-list">
              <div className="partnerCard">
              </div>
              {PartnerCards.map((card, index) => (
                <PartnerCard
                  key={index}
                  partnerTitle={card.partnerTitle}
                  partnerDescription={card.partnerDescription}
                  PartnerImgSrc={card.PartnerImgSrc}
                  PartnerImgAlt={card.PartnerImgAlt}
                />
              ))}
            </div>
          </div>

        </div>
      </section>
      <section className="pageSection">
        <div ref={carouselRef} className="carousel carousel--init">
          <div className="container carousel-container">
            <div className="carousel-scrollContainer">
              <div className="carousel-list">
                {partnerVoices.map((voice, index) => (
                  <PartnerVoice
                    key={index}
                    partnerVoiceContent={voice.partnerVoiceContent}
                    partnerVoiceAuthorName={voice.partnerVoiceAuthorName}
                    partnerVoiceAuthorTitle={voice.partnerVoiceAuthorTitle}
                    partnerVoiceAuthorCompanySrc={voice.partnerVoiceAuthorCompanySrc}
                    partnerVoiceAuthorCompanyAlt={voice.partnerVoiceAuthorCompanyAlt}
                  />
                ))}

              </div>
            </div>
          </div>
          <nav className="carousel-controlContainer">
            <button
              type="button"
              className="button button--icon carousel-control carousel-control--prev"
              disabled
            >
              <i className="icon-arrowLeft"></i>
            </button>
            <button
              type="button"
              className="button button--icon carousel-control carousel-control--next"
              disabled
            >
              <i className="icon-arrowRight"></i>
            </button>
          </nav>
        </div>
      </section>
    </App>
  );
}
