import CenterView from "@/components/CenterView";
import officePic from "@/public/content/private_office.png";
import officeMap from "@/public/content/office_map.png";
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
import { default as Image } from "next-image-export-optimizer";
import Link from "next/link";

const OfficeInfo = () => {
  return (
    <CenterView bg_color="bg-primary-100" txt_color="text-primary-500" id="nor">
      <div className="flex flex-col items-center justify-around gap-6 md:flex-row">
        <div className="basis-2/5">
          <h1>Private Practice</h1>
          <p className="my-2">
            Dr. Feely is in private practice in Carmel, IN, outside of
            Indianapolis. His practice is limited to difficult
            neuromusculoskeletal pain conditions.
          </p>
          <p className="my-2">The office is located at:</p>
          <p className="m-5">
            755 W. Carmel Drive, Suite 211
            <br />
            Carmel, IN 46032
            <br />
            <Link
              target="_blank"
              href="https://maps.google.com/maps?ll=39.966427,-86.144966&z=16&t=m&hl=en&gl=US&mapclient=embed&q=755%20W%20Carmel%20Dr%20Suite%20211%20Carmel%2C%20IN%2046032"
              className="trasnition-all underline duration-300 hover:drop-shadow"
            >
              View on Google Maps{" "}
              <ArrowTopRightOnSquareIcon className="inline w-[16px] align-[-2px]" />
            </Link>
          </p>
          <p className="my-2">
            Treatment by appointment only. To schedule an appointment, please
            call{" "}
            <Link href="tel:+14632821163" className="font-bold underline">
              463-282-1163.
            </Link>{" "}
            Payment is due at the time of service.{" "}
            <b>Insurance is not accepted.</b>
          </p>
        </div>
        <div className="basis-2/5">
          <Image
            src={officePic}
            alt="Dr. Feely's office"
            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
          />
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1675.543804235718!2d-86.14708674578002!3d39.96541265137211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8814ac5a7ebfffff%3A0xb04bf8ed82c77ae6!2s755%20W%20Carmel%20Dr%20Suite%20211%2C%20Carmel%2C%20IN%2046032!5e0!3m2!1sen!2sus!4v1722625984763!5m2!1sen!2sus"
            height="300"
            loading="lazy"
            className="mx-auto my-10 block w-11/12 rounded-lg drop-shadow-2xl"
          ></iframe>
        </div>
      </div>
    </CenterView>
  );
};

export default OfficeInfo;