// Import ========================================================================================================================
import { textareaHeightControl } from '@/js/components/input.js';
import { carousel } from '@/js/patterns/carousel.js';
import App from '@/layouts/aia/app-layout';
import { checkboxButtonDisableToggle, formErrorMessage, formReset, formValidation } from '@/js/patterns/form.js';
import Button from '@/components/aia/button';
import Input from '@/components/input.tsx';
import SectionNavigation from '@/components/aia/section-navigation';
import PageMeta from '@/components/aia/page-meta';
import HeroContent from '@/components/aia/hero-content';
import Discover from '@/components/aia/discover';
import Impact from '@/components/aia/our-impact';
import AIAForAll from '@/components/aia/aia-for-all';
import ReportCard from '@/components/report-card';

export default function Report() {


  const reportCards = [
    {
      reportImage: 'images/img-report.png',
      reportTitle: 'Title Elit ipsum Lorem irure incididunt elit aliquip duis. Dolor exercitation sunt consectetur non proident eu do irure magna aliqua fugiat.',
      reportDate: '26 Mar 2025',
      downloadLink: '/images/img-report.png'
    },
    {
      reportImage: 'images/img-report.png',
      reportTitle: 'Title Elit ipsum Lorem irure incididunt elit aliquip duis. Dolor exercitation sunt consectetur non proident eu do irure magna aliqua fugiat.',
      reportDate: '26 Mar 2025',
      downloadLink: '/images/img-report.png'
    },
    {
      reportImage: 'images/img-report.png',
      reportTitle: 'Title Elit ipsum Lorem irure incididunt elit aliquip duis. Dolor exercitation sunt consectetur non proident eu do irure magna aliqua fugiat.',
      reportDate: '26 Mar 2025',
      downloadLink: '/images/img-report.png'
    },
    {
      reportImage: 'images/img-report.png',
      reportTitle: 'Title Elit ipsum Lorem irure incididunt elit aliquip duis. Dolor exercitation sunt consectetur non proident eu do irure magna aliqua fugiat.',
      reportDate: '26 Mar 2025',
      downloadLink: '/images/img-report.png'
    },
    {
      reportImage: 'images/img-report.png',
      reportTitle: 'Title Elit ipsum Lorem irure incididunt elit aliquip duis. Dolor exercitation sunt consectetur non proident eu do irure magna aliqua fugiat.',
      reportDate: '26 Mar 2025',
      downloadLink: '/images/img-report.png'
    },
    {
      reportImage: 'images/img-report.png',
      reportTitle: 'Title Elit ipsum Lorem irure incididunt elit aliquip duis. Dolor exercitation sunt consectetur non proident eu do irure magna aliqua fugiat.',
      reportDate: '26 Mar 2025',
      downloadLink: '/images/img-report.png'
    },
  ]

  return (
    <App
      subNav={
        <SectionNavigation
          links={
            [{ name: 'AI in Taiwan', href: route('ai-in-taiwan') },
            { name: 'Voice of Impact', href: route('voice-of-impact') },
            { name: 'Certification', href: route('certification') },
            { name: 'Report', href: route('report') }
            ]
          }
        />
      }
      pageMeta={
        < PageMeta
          title="AI in Taiwan"

        />
      }

      mainClass="pageContent"

    >

      <HeroContent
        heroContentHeading="Deep Dives into AI's Cutting Edge
"
        heroContentDescription="Stay ahead in AI innovation with Taiwan AI Academy’s exclusive reports. Our in-depth analyses provide valuable insights into AI trends, industry applications, and research breakthroughs, empowering businesses and professionals to navigate the future of AI with confidence."
      />
      <div className="container pageSection">
        <div className="w-[237px] mb-32">
          <Input
            className="inputText-input inputText-input--page"
            type="select"
            required={false}
            id="input-select-year"
            placeholder="Select a year"
            description=""
            error={false}
            value=""
            options={[
              { value: "", label: "Select a year" },
              { value: "2020", label: "2020" },
              { value: "2021", label: "2021" },
              { value: "2022", label: "2022" },
            ]}
            onChange={() => {
              alert('Year selected'); // Placeholder for year selection logic
            }}
          />
        </div>
      </div>
      <div className="container pageSection">
        <div className="grid grid-cols gap-24 md:grid-cols-2 md:gap-x-20 lg:grid-cols-4">

          {reportCards.map((card, index) => (
            <ReportCard
              key={index}
              reportImage={card.reportImage}
              reportTitle={card.reportTitle}
              reportDate={card.reportDate}
              downloadLink={card.downloadLink}
            />
          ))}



        </div>
      </div>

    </App >
  );
}