import Link from "next/link";
import Image from "next/image";
import { EmblaCarousel } from "./carousel";
import Reserve from "./components/NavBar/reserveButton";
import MenuButton from "./menuButton";

export default function Home() {
  return (
    <main>
      <div className="flex flex-col relative">
        <div className="flex relative w-full h-[95svh]">
          <Image
            src="/img01.webp"
            alt="nav image"
            priority
            fill
            style={{ objectFit: "cover", objectPosition: "center" }}
            quality={100}
            className="brightness-[20%] -z-90"
          />
          <div className="flex flex-col items-center justify-center text-white absolute w-full h-[95svh] gap-6">
            {/* <center className="bg-gray-700 w-full">0</center> */}
            <div className="flex w-full h-[24svh] relative">
              <Image
                src="/award01.png"
                alt="award image"
                priority
                fill
                style={{ objectFit: "contain", objectPosition: "center" }}
                quality={100}
                className=""
              />
            </div>
            <p className="flex flex-col w-full justify-center px-[24svw] text-xl 2xl:px-[25svw] text-center py-[10px] leading-relaxed">
              Jefe's Mexican Cocina Y Cantina serves the best Mexican food in
              town. Be our guests and have an enjoyable experience with an
              authentic Mexican meal right here in Broken Arrow, OK.
            </p>
            {/* <center>0</center> */}
            <div className="flex flex-row w-full space-x-6 items-center justify-center">
              <MenuButton />
              <Reserve />
            </div>
          </div>
        </div>
        {/* Section 1 */}
        <div className="flex flex-row h-[95svh] px-60 w-full leading-relaxed py-11 space-x-8">
          {/* Text-side */}
          <div className="flex flex-col text-start gap-8 max-w-[650px]">
            <h2 className="text-red-800 text-4xl font-bold ">
              The heart of Mexico here in Broken Arrow!
            </h2>
            <div className="flex flex-col text-start text-2xl">
              <p>
                Jefe's Mexican cocina y cantina is a family owned authentic
                mexican restaurant that provides a variety of different dishes
                and cocktails. We are one of the best restaurants around because
                nowhere else can you find the most extraordinary homemade
                Mexican food along with fresh and naturally flavored waters. At
                our restaurant, we guarantee that our dishes are authentic to
                the soul of Mexico.
              </p>
            </div>
          </div>
          {/* Images side  */}
          <div className="flex flex-col relative w-full gap-4">
            <div className="flex flex-col relative w-full h-[35svh] overflow-hidden">
              <Image
                src="/IMG_2431.jpg"
                alt="food1 image"
                priority
                fill
                style={{ objectFit: "cover", objectPosition: "top" }}
                quality={100}
                className=""
              />
            </div>
            <div className="flex flex-row relative h-1/2 gap-4">
              <div className="flex w-1/2 h-[25svh] relative">
                <Image
                  src="/IMG_2429.JPG"
                  alt="food2 image"
                  priority
                  fill
                  style={{ objectFit: "cover", objectPosition: "center" }}
                  quality={100}
                  className=""
                />
              </div>
              <div className="flex w-1/2 h-[25svh] relative">
                <Image
                  src="/food02.webp"
                  alt="food3 image"
                  priority
                  fill
                  style={{ objectFit: "cover", objectPosition: "center" }}
                  quality={100}
                  className=""
                />
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col w-full h-[180vh]">
          {/* <EmblaCarousel /> */}
        </div>
      </div>
    </main>
  );
}