// Import ========================================================================================================================
import { textareaHeightControl } from '/data/www/aia-official-en-main/web/src/js/components/input.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 { useForm } from '@inertiajs/react';
import PeopleExecutiveCard from '@/components/aia/people-excutive-card';
import PeopleMemberCard from '@/components/aia/people-member-card';


export default function People() {
  const peopleExecutive = [

    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',

      positions: ['Duis nisi consectetur irure dolore laboris eiusmod qui Lorem in deserunt et adipisicing.'],
      readMoreButton: true
    },

  ];



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

      <div className="container pageIndent">
        <div className="grid grid-cols-1 gap-16 md:gap-40 lg:grid-cols-2 lg:gap-x-20">
          {peopleExecutive.map((executive, index) => (
            <PeopleExecutiveCard
              key={index} // 添加唯一的 key prop
              portrait={executive.portrait}
              name={executive.name}
              title={executive.title}
              positions={executive.positions}
              readMoreButton={executive.readMoreButton}
            />
          ))}
        </div>
      </div>


    </App>
  );
}