const ClinicalPhilosophy = () => {
  return (
    <section className="text-primary-500" id="philosophy">
      <div className="min-h-screen w-full bg-primary-100 flex items-center relative z-[-2] overflow-hidden">
        <div className="w-11/12 lg:w-5/6 mt-32 mb-16 md:my-12 lg:mb-16 mx-auto flex flex-col gap-12 items-center">
          <div className="relative">
            <div className="before:absolute lg:before:content-textAccent3 before:z-[-1] before:-left-16 before:-top-8">
              <h2 className="font-cormorant text-6xl mb-4 text-center">
                A <span className="text-secondary-500">unique</span> approach to
                medicine, since 1981.
              </h2>
            </div>
          </div>
          <div className="flex items-center flex-col gap-12 md:gap-4 md:flex-row md:justify-around">
            <div className="basis-4/12">
              <img
                className="shadow-lg shadow-tertiary-400 rounded-3xl max-w-sm w-full"
                src="/dr_feely_brick_wall.webp"
                alt="Picture of Dr. Feely"
              />
            </div>
            <div className="basis-6/12 flex flex-col gap-5 md:gap-10 text-lg">
              <div className="relative">
                <div className="before:absolute before:-right-48 before:-top-32 before:z-[-1] before:content-textAccent2">
                  <p className="">
                    Dr. Richard Feely has served the Chicago area with high
                    quality medical care marked by a holistic approach. As a
                    specialist in osteopathic medicine, Dr. Feely views your
                    health in the context of your lifestyle and environment,
                    providing you with comprehensive care that has lasting
                    results.
                  </p>
                </div>
              </div>

              <p className="">
                After an evaluation, Dr. Feely will give you access to every
                health resource you need, enabling you to not only feel better
                in the short term, but live a healthier lifestyle and acheive
                optimal health.
              </p>

              <div className="relative">
                <div className="before:absolute before:content-quote before:z-[2] before:-left-2 before:top-2">
                  <div className="bg-gray-200 rounded-sm drop-shadow-md mx-4 bg-opacity-75">
                    <p className="p-5 font-cormorant text-xl">
                      As an osteopathic physician, my education and philosophy
                      of care centers around treating the whole person. I don’t
                      look at or treat only the symptoms you may present with. I
                      consider everything about you and your life.
                    </p>
                    <p className="px-5 pb-5 text-right italic">
                      &mdash;Dr. Richard Feely
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ClinicalPhilosophy;