// Import ========================================================================================================================
import { carousel } from '@vendor-web/js/patterns/carousel.js';
import App from '@/layouts/aia/app-layout';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import PartnerLanding from '@/components/aia/partner-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';
import type { VoiceItem } from '@/types';

type PartnerWithUsProps = {
  partnerVoices: VoiceItem[];
};

export default function PartnerWithUs({ partnerVoices = [] }: PartnerWithUsProps) {
  const carouselRef = useRef(null);
  useEffect(() => {
    // Only initialize carousel if we have voices
    if (carouselRef.current && partnerVoices.length > 0) {
      carousel(carouselRef.current);
    }
  }, [partnerVoices.length]);

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

  const PartnerCards = [
    {
      partnerTitle: "Industry–Academia–Research Collaboration",
      partnerDescription: "Co-create AI solutions by connecting enterprise needs with academic expertise and research capacity. We build strategic alliances that turn real-world challenges into joint projects, talent pipelines, and measurable impact across the ecosystem.",
      PartnerImgSrc: "images/img-partnerCard.jpg",
      PartnerImgAlt: "Industry–Academia–Research Collaboration Image",
    },
  ]

  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"

        />
      }

    >
      <PartnerLanding />
      <HeroContent />
      <section className="pageSection">
        <div className="container">
          <div className="partnerSection">
            <h2 className="partnerSection-heading text-h2-bold">Let’s work together</h2>

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

        </div>
      </section>
      {partnerVoices.length > 0 && (
        <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={voice.id}
                      partnerVoiceImage={voice.image_url ?? undefined}
                      partnerVoiceContentHtml={voice.content_html}
                      partnerVoiceAuthorName={voice.author_name}
                      partnerVoiceAuthorTitle={voice.author_title ?? undefined}
                      partnerVoiceAuthorCompanySrc={voice.company_logo_url ?? undefined}
                      partnerVoiceAuthorCompanyAlt={voice.company_name ?? ''}
                    />
                  ))}

                </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>
  );
}