const Accomplishments = () => {
  const cardClass =
    " overflow-hidden border-style-double border-primary-500 border-2 bg-primary-100 rounded-md drop-shadow-sm flex items-center bg-opacity-75 ";
  return (
    <section className="text-primary-500 overflow-hidden" id="accomplishments">
      <div className="min-h-screen w-full bg-primary-300 flex items-center relative z-[-2]">
        <div className="w-11/12 lg:w-5/6 mx-auto flex flex-col">
          <h2 className="font-cormorant text-5xl my-16 md:mt-32 text-left">
            Not only a caring physician...
          </h2>
          <div className="grid md:grid-rows-2 md:grid-cols-6 md:gap-8 gap-y-3 gap-x-1 w-full">
            <div className={cardClass + "col-span-3"}>
              <div className="relative">
                <div className="before:absolute before:-left-64 before:-top-64 before:z-[-1] before:content-textAccent2">
                  <div className="p-6">
                    <h3 className="font-bold">Professional Experience</h3>
                    <ul className="list-[square] ml-8">
                      <li>
                        <i>President</i> of Feely Center for Optimal Health, his
                        private osteopathic practice.
                      </li>
                      <li>
                        <i>President </i>of{" "}
                        <a
                          href="https://www.ommtests.com"
                          className="underline"
                        >
                          OMMtests.com
                        </a>{" "}
                        and{" "}
                        <a
                          href="https://www.tcmtests.com"
                          className="underline"
                        >
                          TCMtests.com
                        </a>
                        , test-prep sites for osteopathic doctors and
                        accupuncturists, respectively.
                      </li>
                      <li>
                        <i>Registered Investment Adviser</i> at Womack
                        Investment Advisers.
                      </li>
                      <li>
                        <i>National Director of Quality Management</i> at
                        American WholeHealth.
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div className={cardClass + "col-span-3"}>
              <div className="relative">
                <div className="before:absolute before:-right-64 before:-top-64 before:z-[-1] before:content-textAccent2">
                  <div className="p-6">
                    <h3 className="font-bold ">Board Certifications</h3>
                    <ul className="list-[square] ml-8">
                      <li>American Board of Medical Acupuncture</li>

                      <li>
                        American Board of Independent Medical Examiners{" "}
                        {"(CIME)"}
                      </li>

                      <li>
                        American Board of Quality Assurance and Utilization
                        Review Physicians
                      </li>

                      <li>
                        American Osteopathic Board of Special Proficiency in
                        Manipulative Medicine
                      </li>

                      <li>American Board of Osteopathic Family Practice</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div className={cardClass + "col-span-3"}>
              <div className="relative">
                <div className="before:absolute before:-left-64 before:-bottom-64 before:z-[-1] before:content-textAccent2">
                  <div className="p-6">
                    <h3 className="font-bold">Academic Appointments</h3>
                    <ul className="list-[square] ml-8">
                      <li>
                        <i>
                          Clinical Associate Professor of Osteopathic
                          Manipulative Medicine.
                        </i>{" "}
                        at Chicago College of Osteopathic Medicine/Midwestern
                        University Medicine.
                      </li>
                      <li>
                        <i>Adjunct Associate Professor</i> at Touro University,
                        A.T. Still University, and Western University.
                      </li>
                      <li>
                        <i>Consultant</i> to the World Health Organization for
                        integrative medicine.
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div className={cardClass + "h-48 justify-center"}>
              <div className="flex flex-col items-center p-6">
                <div className="text-2xl font-bold">3</div>
                <div className="text-center">books written</div>
              </div>
            </div>
            <div className={cardClass + "h-48 justify-center"}>
              <div className="flex flex-col items-center p-6">
                <div className="text-2xl font-bold">9</div>
                <div className="text-center">articles & abstracts</div>
              </div>
            </div>
            <div className={cardClass + "h-48 justify-center"}>
              <div className="relative">
                <div className="before:absolute before:-right-128 before:-bottom-64 before:z-[-1] before:content-textAccent2">
                  <div className="flex flex-col items-center p-6 ">
                    <div className="text-2xl font-bold">76</div>
                    <div className="text-center">lectures given</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="relative">
            <div className="before:absolute lg:before:content-textAccent4 before:z-[-1] before:-right-12 before:top-8 ">
              <h2 className="font-cormorant text-5xl my-16 text-right">
                ...an{" "}
                <span className="text-primary-100">
                  accomplished professional.
                </span>
              </h2>
            </div>
          </div>
        </div>
      </div>
      <div className="bg-primary-100 items-center my-3 mx-8 flex justify-center md:justify-between flex-wrap">
        <img
          src="/feelycenter.png"
          alt="Feely Center Logo"
          className="m-5 max-h-[80px] rounded-md drop-shadow-sm"
        />
        <img
          src="/midwestern_college.jpg"
          alt="Midwestern College Logo"
          className="m-5 max-h-[80px] rounded-md drop-shadow-sm"
        />
        <img
          src="/omm_logo.png"
          alt="OMM Logo"
          className="m-5 max-h-[80px] rounded-md drop-shadow-sm"
        />
        <img
          src="/tcm_tests.png"
          alt="TCM Logo"
          className="m-5 max-h-[80px] rounded-md drop-shadow-sm"
        />
        <img
          src="/womack.png"
          alt="Womack Logo"
          className="m-5 max-h-[80px] rounded-md drop-shadow-sm"
        />
      </div>
    </section>
  );
};

export default Accomplishments;

// <p className="">
//   Richard is also widely known for his work in osteopathic
//   manipulation, cranial osteopathy, and acupuncture. He is a
//   sought-after lecturer, educator, and author. He has written about
//   integrative medical treatments and has edited several prestigious
//   medical journals, including{" "}
//   <span className="italic">
//     Clinical Cranial Osteopathy: Selected Readings
//   </span>
//   .
// </p>