import { default as Image } from "next-image-export-optimizer";
import LearnMoreLinkLight from "@/components/LearnMoreLinkLight";
import View from "@/components/View";
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
import ArtLink from "@/components/ArtLink";
import toshikatsu from "@/public/content/toshikatsu.jpg";

const AcuForDocs = () => {
  return (
    <View
      bg_color="bg-primary-500"
      txt_color="text-primary-100"
      id="fordocs"
      className="!min-h-0"
    >
      <div className="flex h-full flex-col items-center justify-around md:flex-row">
        <div className="basis-2/5 md:text-right">
          <h1>For Doctors:</h1>
          <div className="mb-10">
            <h2>View Dr. Feely's acupuncture resources</h2>
            <ArtLink
              href="/content/doctor-resources/point-categories.pdf"
              target="_blank"
              className="hover:drop-shadow-light"
            >
              Point Categories [PDF]
              <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
            </ArtLink>
          </div>
          <div>
            <h2>Or, learn more by reading his articles</h2>
            <LearnMoreLinkLight href="/articles#artsfordocs">
              View all articles for doctors
            </LearnMoreLinkLight>
          </div>
        </div>
        <div className="basis-2/5">
          <Image
            src={toshikatsu}
            alt="Image of Dr. Toshikatsu Yamamoto"
            className="mx-auto block w-11/12 rounded-lg drop-shadow-2xl"
          />
          <div className="mt-2 text-center text-base italic">
            Dr. Toshikatsu Yamamoto
          </div>
        </div>
      </div>
    </View>
  );
};

export default AcuForDocs;