import React from 'react';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import { Card } from '../components/ui/card';

const BoardOfDirectors = () => {
  const officers = [
    { name: 'Lorraine Schroeder', title: 'President' },
    { name: 'Lavita Marks', title: 'Vice President' },
    { name: 'Janis Smith', title: 'Secretary' },
    { name: 'Dawn Harrell', title: 'Treasurer' }
  ];

  const boardMembers = [
    { name: 'Danita Cole' },
    { name: 'Roxanne Cherico' },
    { name: 'Lucretia Copeland' },
    { name: 'Julie Fischer' }
  ];


  const DirectorCards = ({ title, members }) => {
    return (
      <section className=" w-full">
        <div className="mx-auto bg-white rounded-3xl p-10 shadow-lg h-full">
          {title && (
            <h2
              className="text-2xl sm:text-4xl font-bold text-[#48286e] text-center mb-8"
              style={{ fontFamily: "'Poppins', sans-serif" }}
            >
              {title}
            </h2>
          )}

          <div className="grid grid-col-span-1 lg:grid-cols-2  gap-5 w-full">
            {members.map((member, index) => {
              const { name, title } =
                typeof member === "string"
                  ? { name: member, title: "" }
                  : member;

              return (
                <Card
                  key={`${name}-${index}`}
                  style={{ fontFamily: "'Poppins', sans-serif" }}
                  className="bg-[#eeebf4] text-[#48286e] text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
                >
                  <div className="min-h-16">
                    <p className="text-xl font-bold text-[#48286e]">
                      {name}
                    </p>

                    {title && (
                      <p className="text-xl mt-2 font-semibold">
                        {title}
                      </p>
                    )}
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
      </section>
    );
  };

  return (
    <div className="min-h-screen bg-white">
      <PublicNavbar />

      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb]  pt-8 sm:pt-10 md:pt-12">
        {/* Hero Section  */}
        <section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
          <div className="max-w-5xl mx-auto text-center px-8">
            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-[#48286e] font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              LOAF Board of Directors 2025
            </h1>

          </div>
        </section>
        {/* Contact Info */}
        <section className="flex justify-center mt-4 mb-8">
          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-[#664fa3] to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">

            <p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
              For any questions or inquiries please email us at{' '}
              <a href="mailto:info@loaftx.org" className="text-[#c5b4e3] underline font-bold hover:text-white transition-colors">
                info@loaftx.org
              </a>
            </p>
          </div>
        </section>
        {/* Board Members Section */}
        <section className='  flex lg:flex-row flex-col gap-10 items-stretch mt-8 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 pb-12'>
          {/* Officers Grid */}
          <DirectorCards title="Officers" members={officers} />

          {/* Board Members Grid */}
          <DirectorCards title="Board Of Directors" members={boardMembers} />

        </section>

        {/* Join the Board Section */}
        <section className="py-12 bg-white mt-12 ">
          {/* content containter */}
          <div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
              Join the Board of Directors
            </h2>
            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Our elections take place at our December holiday social. Here are some things to know if you are thinking about serving on the Board of Directors.
            </p>
            {/* card */}
              <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
                <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  <li>
                    Nominations are due by November 1. Nomination Form:{' '}
                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
                      className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
                      Click Here
                    </a>
                  </li>
                  <li>Nominees must have been a member for at least 1 year, however it is possible to be elected prior to 1 year, but start the term on the 1 year anniversary.</li>
                  <li>Officer positions are only available to current directors.</li>

                  <li>Each director shall serve a 2-year term.</li>

                  <li>The time commitment is approximately 1–2 hours per week.</li>

                  <li>
                    The tasks that directors perform depend on individual interests. Recent
                    tasks include researching how to obtain an extra PO Box key, ordering
                    Welcome Team name tags, taking pictures at events, researching new venues
                    for holiday socials, and monitoring Facebook posts. For more information
                    about director duties, see Article 2 of the bylaws in the Members Only
                    section of the website:&nbsp;
                    <a
                      href="https://loaftx.org/bylaws/"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-[#48286e] underline"
                    >
                      https://loaftx.org/bylaws/
                    </a>
                  </li>

                  <li>
                    Directors must attend Board meetings held on the second Thursday of each
                    month at 6:30pm via Zoom.
                  </li>

                  <li>
                    We are a fun group, and we would love for you to join us in providing this
                    service for our community.
                  </li>
                </ol>
              </Card>
          </div>
        </section>
      </main>

      <PublicFooter />
    </div>
  );
};

export default BoardOfDirectors;