const Footer = () => {
  return (
    <footer className="w-full  bg-neutral-800 text-neutral-300">
      <div className="w-11/12 lg:w-5/6 mx-auto py-12">
        <div className="grid md:grid-cols-5 gap-12 ml-8 md:m-0 md:flex-row">
          <div className="">
            <h3 className="text-xl font-bold">Home</h3>
            <ul className="text-sm">
              <li>
                <a href="/#introduction">Introduction</a>
              </li>
              <li>
                <a href="/#philosophy">Clinical Philosophy</a>
              </li>
              <li>
                <a href="/#accomplishments">Biography & Accomplishments</a>
              </li>
            </ul>
          </div>
          <div className="">
            <h3 className="text-xl font-bold">Osteopathy</h3>
            <ul className="text-sm">
              <li>
                <a href="/osteopathy/#">a</a>
              </li>
              <li>
                <a href="/osteopathy/#">b</a>
              </li>
              <li>
                <a href="/osteopathy/#">c</a>
              </li>
            </ul>
          </div>
          <div className="">
            <h3 className="text-xl font-bold">Acupuncture</h3>
            <ul className="text-sm">
              <li>
                <a href="/acupuncture/#">a</a>
              </li>
              <li>
                <a href="/acupuncture/#">b</a>
              </li>
              <li>
                <a href="/acupuncture/#">c</a>
              </li>
            </ul>
          </div>
          <div className="">
            <h3 className="text-xl font-bold">Articles</h3>
            <ul className="text-sm">
              <li>
                <a href="/articles/#">a</a>
              </li>
              <li>
                <a href="/articles/#">b</a>
              </li>
              <li>
                <a href="/articles/#">c</a>
              </li>
            </ul>
          </div>
          <div className="">
            <h3 className="text-xl font-bold">NOR</h3>
            <ul className="text-sm">
              <li>
                <a href="/nor/#">a</a>
              </li>
              <li>
                <a href="/nor/#">b</a>
              </li>
              <li>
                <a href="/nor/#">c</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="flex justify-center mt-8">
          <p>Copyright (C) {new Date().getFullYear()} Richard A. Feely, DO</p>
        </div>
        <div className="flex justify-center">
          <a href="/licenses">Licenses & Credits</a>
        </div>
      </div>
    </footer>
  );
};

export default Footer;