// Import ========================================================================================================================
import { textareaHeightControl } from '@/js/components/input.js';
import App from '@/layouts/aia/app-layout';
import { checkboxButtonDisableToggle, formErrorMessage, formReset, formValidation } from '@/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';

type PeopleProps = {
  people: Array<{
    portrait: string;
    name: string;
    title: string;
    text: string;
    positions: string[];
    readMoreButton: boolean;
  }>;
};

export default function People({ people }: PeopleProps) {

  const peopleExecutive = [
    ...people,
    {
      portrait: 'images/img-portrait.png',
      name: 'Name',
      title: 'Esse velit pariatur dolore veniam velit.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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.',
      text: `Velit sit voluptate minim sit. In aute tempor pariatur sint sit excepteur velit enim cillum minim
          exercitation non.Dolore occaecat pariatur veniam nulla excepteur magna mollit ullamco ullamco enim.
          Reprehenderit ipsum cillum cillum ad cillum occaecat qui pariatur velit aliquip ipsum.Officia id ea
          ullamco est amet est.Cillum anim fugiat Lorem laboris voluptate enim mollit magna ex exercitation.`,
      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}
              text={executive.text}
              readMoreButton={executive.readMoreButton}
            />
          ))}
        </div>
      </div>


    </App>
  );
}