"use client";

import HomePageCarousel from "@/components/HomePageCarousel";
import { ChevronDoubleDownIcon } from "@heroicons/react/24/solid";
import drFeelyPic from "@/public/content/dr_feely_headshot2.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 an experienced, highly accomplished physician in
              osteopathic manipulative medicine, acupuncture, herbal medicine,
              and family practice. He developed the new osteopathic manipulative
              procedure Neuro Ocular Release, that takes away pain in just 3
              seconds. Dr. Feely specializes in the treatment of
              neuromusculoskeletal pain&mdash;especially head, neck, and back
              pain.
            </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;