import View from "@/components/View";
import Image from "next/image";
import drStill from "@/public/content/dr_still.jpeg";
import Card from "@/components/Card";
import LearnMoreLink from "@/components/LearnMoreLink";

const OsteoBasics = () => {
  return (
    <View
      bg_color="bg-primary-100"
      txt_color="text-primary-500"
      id="osteobasics"
    >
      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
        <div className="basis-2/5">
          <Image
            src={drStill}
            alt="Dr. A.T. Still"
            className="mx-auto block w-11/12 rounded-lg drop-shadow-2xl"
          />
          <div className="mt-2 text-center text-base italic">
            Dr. A.T. Still
          </div>
        </div>
        <div className="basis-2/5">
          <h1>Osteopathy</h1>
          <div className="my-10">
            Osteopathic Medicine finds its roots in the pioneering work of{" "}
            <strong>Dr. Andrew Taylor Still</strong>, who challenged the medical
            practices of his time. In 1874, Dr. Still developed a groundbreaking
            philosophy that viewed the{" "}
            <strong>body as an interconnected unit,</strong> where all its
            systems work harmoniously to maintain health. This idea was
            revolutionary, as it diverged from the prevailing notion of treating
            diseases in isolation. Dr. Still emphasized the significance of the
            musculoskeletal system, recognizing that structural imbalances could
            lead to dysfunction and illness. His philosophy{" "}
            <strong>
              laid the groundwork for the modern practice of Osteopathic
              Medicine,
            </strong>{" "}
            which continues to evolve and adapt to contemporary medical
            knowledge.
          </div>
          <LearnMoreLink href="/articles/intro-to-osteopathy">
            Explore the basics of osteopathy
          </LearnMoreLink>
        </div>
      </div>

      <div className="mt-16">
        <h2>Fundamental Osteopathic Principles</h2>
        <div className="grid grid-rows-4 gap-4 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-4 lg:grid-rows-1">
          <Card>
            <h2>The Body as a Unit</h2>
            <div>
              Unlike traditional medicine, which often focuses on isolated
              symptoms, Osteopathic Medicine views the body as a unified entity.
              Each system influences and interacts with the others, emphasizing
              the importance of considering the whole person.
            </div>
          </Card>
          <Card>
            <h2>Reciprocal Relationship of Structure and Function</h2>
            <div>
              Osteopathy recognizes that structural abnormalities can affect
              bodily functions, and vice versa. This understanding guides
              Osteopathic Physicians in diagnosing and treating not just
              symptoms, but underlying causes.
            </div>
          </Card>
          <Card>
            <h2>Self-Regulating Mechanisms</h2>
            <div>
              The body possesses its own mechanisms for maintaining health and
              balance. Osteopathic Physicians trust in the body's innate ability
              to heal and regulate itself, and they work to support and enhance
              these mechanisms.
            </div>
          </Card>
          <Card>
            <h2>Rational Therapy</h2>
            <div>
              Osteopathic Physicians base their treatments on a profound
              understanding of anatomy, physiology, and pathology. This
              knowledge allows them to provide targeted and effective care.
            </div>
          </Card>
        </div>
      </div>

      <div className="mx-auto mt-20 md:w-2/5">
        <div className="my-10 text-center font-bold">
          Osteopathic Medicine isn't limited to addressing physical ailments. It
          also takes into account environmental, emotional, and psychological
          factors that contribute to a patient's well-being.
        </div>
        <div className="flex w-full justify-center">
          <LearnMoreLink href="/articles/osteopathic-manipulative-treatment">
            Learn more about osteopathic treatment
          </LearnMoreLink>
        </div>
      </div>
    </View>
  );
};

export default OsteoBasics;