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-[90svh]">
          <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-[90svh] 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">
              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>
        <div className="flex flex-col w-full h-[180vh]">
          <EmblaCarousel />
        </div>
      </div>
    </main>
  );
}