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 = [
    'Danita Cole',
    'Roxanne Cherico',
    'Lucretia Copeland',
    'Julie Fischer'
  ];

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

      <main className="bg-gradient-to-b from-white to-[#f1eef9] px-16 py-12">
        {/* Hero Section with Contact */}
        <section className="bg-gradient-to-r from-[#664fa3] to-[#48286e] py-8 rounded-2xl mb-12">
          <div className="max-w-5xl mx-auto text-center px-8">
            <h1 className="text-4xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
              LOAF Board of Directors 2025
            </h1>
            <p className="text-white text-lg mb-4" style={{ fontFamily: "'Nunito Sans', 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>

        {/* Officers Grid */}
        <section className="py-12">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
              Officers
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {officers.map((officer, index) => (
                <Card key={index} className="bg-[#eeebf4] p-6 text-center rounded-xl shadow-md hover:shadow-lg transition-shadow">
                  <h3 className="text-xl font-bold text-[#48286e] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                    {officer.name}
                  </h3>
                  <p className="text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    {officer.title}
                  </p>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Board Members Grid */}
        <section className="py-12 bg-gray-50 rounded-2xl">
          <div className="max-w-6xl mx-auto px-8">
            <h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
              Board of Directors
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {boardMembers.map((member, index) => (
                <Card key={index} className="bg-[#eeebf4] p-6 text-center rounded-xl shadow-md hover:shadow-lg transition-shadow">
                  <h3 className="text-xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
                    {member}
                  </h3>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Join the Board Section */}
        <section className="py-12">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Inter', sans-serif" }}>
              Join the Board of Directors
            </h2>
            <p className="text-xl 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 className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg">
              <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 and current with their dues.</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 1-2 hours per week.</li>
                <li>The tasks that directors perform depend on individual interests, skills, and time available.</li>
                <li>Directors must attend Board meetings which are held 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;