"use client";

import HomePageCarousel from "@/components/HomePageCarousel";
import { ChevronDoubleDownIcon } from "@heroicons/react/24/solid";
import drFeelyPic from "@/public/content/dr_feely_headshot.png";
import Image from "next/image";
import View from "@/components/View";

/* Here be dragons */
const Introduction = () => {
  return (
    <View
      bg_color="bg-primary-500 bg-opacity-75"
      txt_color="text-primary-100"
      id="introduction"
      className="relative overflow-hidden"
    >
      {/* "relative" above makes the background work */}
      {/* we have to do some funky stuff with margins to get the look 
          we want for the home page */}
      <div className="my-10 flex min-h-screen items-center md:my-[-6rem]">
        <div className="flex flex-col items-center gap-12 p-0 md:mb-32 md:mt-48 md:flex-row md:justify-around">
          <hgroup className="basis-6/12">
            <div className="relative">
              <div className="before:absolute before:-left-52 before:-top-44 before:z-[-1] before:content-textAccent">
                <h1 className="">Richard A. Feely, DO</h1>
              </div>
            </div>
            <p className="text-2xl">
              Dr. Feely is a highly accomplished physician with over 25 years of
              experience in osteopathic medicine, acupuncture, herbal medicine,
              and family practice. He specializes in the treatment of
              neuromusculoskeletal pain&mdash;especially back pain, neck pain
              and headaches.
            </p>
          </hgroup>
          <div className="basis-4/12">
            <Image
              className="w-fit rounded-3xl shadow-superPortraitR shadow-secondary-500"
              src={drFeelyPic}
              alt="Headshot of Dr. Feely"
            />
          </div>
        </div>
      </div>

      {/* bouncy arrow :) */}
      <div className="absolute bottom-0 left-1/2 mb-4 ml-[-10px] hidden animate-bounce rounded-full bg-secondary-500 p-1.5 drop-shadow-xl md:block">
        <ChevronDoubleDownIcon
          width="20px"
          className=""
        ></ChevronDoubleDownIcon>
      </div>
      {/* background image magic */}
      <HomePageCarousel className="absolute left-0 top-0 z-[-2] h-full w-full"></HomePageCarousel>
      <div className="absolute left-0 top-0 z-[-3] h-full w-full bg-primary-500"></div>
    </View>
  );
};

export default Introduction;