import React from "react";
import SteveMiller from "../assets/SteveMiller.jpg";
import useDocumentTitle from "../hooks/useDocumentTitle";
const ChurchStaff = () => {
  useDocumentTitle('NSBC | Church Staff');

  return (
    <div className="max-w-2xl mx-auto">
      <h1 className="text-4xl flex justify-center">Church Staff</h1>
      <div className="flex flex-col items-start ">
        <section className="grid grid-cols-2 gap-3 items-center p-4 bg-slate-100 w-full h-fit">
          <span>
            <h2 className="text-2xl">Pastor</h2>
            <p>Rev. Cecil Marr</p>
          </span>
          <div>
            <img src="https://placehold.co/600x400" />
          </div>
        </section>
        <section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
          <span>
            <img src={SteveMiller} />
          </span>
          <div className="flex w-full justify-end">
            <span className="flex flex-col">
              <h2 className="text-2xl">Worship Leader</h2>
              <p>Steve Miller</p>
            </span>
          </div>
        </section>
        <section className="grid grid-cols-2 gap-3 bg-slate-100 items-center w-full h-fit p-4">
          <div className="flex w-full justify-start">
            <span className="flex flex-col">
              <h2 className="text-2xl">Youth Director</h2>
              <p>Jennifer Carter - husband - Don </p>
              <p>
                <a href="mailto:jennifer@jubileezoo.com">
                  Email: jennifer@jubileezoo.com
                </a>
              </p>
            </span>
          </div>
          <span>
            <img src="https://placehold.co/600x400" />
          </span>
        </section>
        <section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
          <span>
            <img src="https://placehold.co/600x400" />
          </span>
          <div className="flex w-full justify-end">
            <span className="flex flex-col">
              <h2 className="text-2xl">Ministry Assistant - Office Secretary</h2>
              <p>Linda Conner - husband - David</p>
              <p>
                <a href="mailto:linda@northshrevebaptist.org">
                Email: linda@northshrevebaptist.org
                </a>
              </p>
            </span>
          </div>
        </section>
        <div className="block w-full h-40"></div>
      </div>
    </div>
  );
};

export default ChurchStaff;
