import Image from 'next/image'

interface CommitteeMember {
  name: string
  portfolio: string
  imagePath: string
}

const committeeMembers: CommitteeMember[] = [
  {
    name: 'MOSES MOLEKOA',
    portfolio: 'INFRASTRUCTURE & TECHNICAL SERVICES',
    imagePath: '/committee/moses-molekoa.png'
  },
  {
    name: 'CLLR ALEX TEBOGO - MATLOU',
    portfolio: 'BUDGET AND TREASURY OFFICE',
    imagePath: '/committee/alex-tebogo-matlou.png'
  },
  {
    name: 'CLLR LINDIWE MHLAMBI',
    portfolio: 'COMMUNITY SERVICES',
    imagePath: '/committee/lindiwe-mhlambi.png'
  },
  {
    name: 'MOTLADI MODIPANE',
    portfolio: 'ECONOMIC DEVELOPMENT, TOURISM AND AGRICULTURE',
    imagePath: '/committee/motladi-modipane.png'
  },
  {
    name: 'ESTHER BOPAPE',
    portfolio: 'MMC CORPORATE SUPPORT SERVICES',
    imagePath: '/committee/esther-bopape.png'
  },
  {
    name: 'CLLR PETER LEGONG',
    portfolio: 'PUBLIC SAFETY, FLEET AND FACILITY MANAGEMENT',
    imagePath: '/committee/peter-legong.png'
  },
  {
    name: 'CLLR KHUMO MORARE',
    portfolio: 'HUMAN SETTLEMENTS AND PLANNING',
    imagePath: '/committee/khumo-morare.png'
  },
  {
    name: 'Cllr Magdonia Masuku',
    portfolio: 'ROADS AND TRANSPORT',
    imagePath: '/committee/magdonia-masuku.png'
  },
  {
    name: 'CAROL MONTSHO',
    portfolio: 'IDP, PMS AND LEGAL SERVICES',
    imagePath: '/committee/carol-montsho.png'
  },
  {
    name: 'Cllr Bongani Bhebe',
    portfolio: 'INTER-GOVERNMENTAL RELATIONS AND SPECIAL PROGRAMMES',
    imagePath: '/committee/bongani-bhebe.png'
  }
]

export default function MembersMayoralCommitteePage() {
  return (
    <div className="min-h-screen py-12 px-4">
      <div className="max-w-[1200px] mx-auto">
        <div className="glass-page rounded-2xl p-8 md:p-12 shadow-2xl">
          {/* Header Section */}
          <div className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <span className="text-primary text-xl">★</span>
              <span className="text-primary text-lg font-semibold uppercase">COUNCIL</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-2">
              Members of the Mayoral Committee
              <span className="block w-24 h-1 bg-primary mt-2"></span>
            </h1>
          </div>

          {/* Introductory Section */}
          <div className="mb-12 space-y-4 text-white/90 leading-relaxed">
            <p>
              The members of the Mayoral committee are appointed by the Executive Mayor from among the members of the council. The Executive Deputy Mayor is elected by the Municipal Council and is an <em>ex officio</em> member of the Mayoral committee. The power to dismiss a member of the Mayoral committee also vests in the Executive Mayor.
            </p>
            <p>
              The Mayoral committee consists of the Executive Mayor, and eight (8) members.
            </p>
          </div>

          {/* THE ROLE */}
          <div className="mb-12">
            <h2 className="text-2xl font-bold text-white mb-4 uppercase">THE ROLE</h2>
            <p className="text-white/90 leading-relaxed">
              The role of the Mayoral Committee is to assist the Executive Mayor.
            </p>
          </div>

          {/* THE AREA OF RESPONSIBILITY */}
          <div className="mb-12">
            <h2 className="text-2xl font-bold text-white mb-4 uppercase">THE AREA OF RESPONSIBILITY</h2>
            <p className="text-white/90 leading-relaxed">
              The area of responsibility of the Mayoral Committee mirrors that of the Executive Mayor.
            </p>
          </div>

          {/* POWERS AND FUNCTIONS */}
          <div className="mb-12">
            <h2 className="text-2xl font-bold text-white mb-4 uppercase">POWERS AND FUNCTIONS</h2>
            <div className="space-y-4 text-white/90 leading-relaxed">
              <p>
                The Mayoral committee does not fall within the meaning of the definition of a political structure and the Municipal Council may therefore not delegate any powers or duties to it in terms of section 59 of the Systems Act.
              </p>
              <p>
                The Mayoral Committee is also not a committee of the council and this means that its composition need not reflect the party political representation in council; (see <em>DA v Amos Masondo 2002 JOL 10476 (CC)</em>).
              </p>
              <p>
                According to the Constitutional Court it is the Mayoral committee's primary task to assist the Executive Mayor in the exercise of his/her powers; it is in essence an extension of the Office of the Executive Mayor.
              </p>
            </div>
          </div>

          {/* Mayoral Committee Powers */}
          <div className="mb-12">
            <div className="space-y-4 text-white/90 leading-relaxed">
              <p>
                The Mayoral Committee has no power on its own; it is an instrument to assist the Executive Mayor, to offer him/her advice and to take decisions together with the Executive Mayor with regard to designated powers. Decisions are nevertheless that of the Executive Mayor.
              </p>
              <p>
                Individual members of the Mayoral committee may however be granted delegated powers. The Executive Mayor may:
              </p>
              <ul className="list-disc list-inside space-y-2 ml-4">
                <li>Delegate specific responsibilities to each member of the committee;</li>
                <li>Delegate any of the Executive Mayor's powers to the respective members.</li>
              </ul>
            </div>
          </div>

          {/* Committee Members Grid */}
          <div className="mt-16">
            <h2 className="text-3xl font-bold text-white mb-8 text-center">Mayoral Committee Members</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
              {committeeMembers.map((member, index) => (
                <div key={index} className="flex flex-col items-center">
                  <div className="relative w-full aspect-[3/4] rounded-lg overflow-hidden border-2 border-white/30 shadow-lg bg-white/5 mb-4">
                    <Image
                      src={member.imagePath}
                      alt={`${member.name} - ${member.portfolio}`}
                      fill
                      className="object-cover"
                      sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
                    />
                  </div>
                  <div className="text-center">
                    <h3 className="text-white font-semibold text-sm mb-1">{member.name}</h3>
                    <p className="text-white/80 text-xs">{member.portfolio}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}