import React from "react";
import Image from "next/image";

const AboutUs = () => {
  return (
    <div className="flex flex-col pt-20">
      <Image
        src="/header02.webp"
        alt="nav image"
        priority
        fill
        style={{ objectFit: "cover", objectPosition: "75%" }}
        quality={100}
        className="brightness-[25%]"
      />
      <div className="flex items-center pt-4 justify-center text-center text-4xl hidden xl:block text-white lg:pt-4 lg:text-2xl">
        About Us
      </div>
      <div className="flex items-center justify-center p-4  text-center text-4xl hidden xl:block text-white lg:h-16 lg:text-2xl">
        Jefe's Mexican Cantina & Cocina
      </div>
      <div className="flex relative mb-5 mx-auto max-w-xl relative items-center justify-center">
        <Image
          src="/kevin.webp"
          fill
          style={{ objectFit: "contain" }}
          quality={100}
          alt="Photo of Kevin mobile."
          className=""
        />
      </div>
      <div className="flex gap-8 mx-auto relative max-w-screen-xl text-xl font-serif antialiased">
        <div className="space-y-6 text-white p-20">
          <p>
            My name is Kevin Aguilar, and I am the owner and manager of the
            Jefe's Mexican Cantina and Cocina based in Broken Arrow, Oklahoma.
            Our combination of authentic Mexican dishes, excellent customer
            service, and family-friendly environment makes us one of the best
            Mexican restaurants around.
          </p>
          <div>
            <p>
              Whether you are wanting to book our upstairs venue for an event,
              wanting to try out our creative alcoholic drinks or just wanting
              to enjoy a meal with a loved one, you quickly see why so many
              people choose Jefe's. We take pride in our business as one of the
              highest rated Mexican restaurants in Broken Arrow.
            </p>
          </div>
          <div>
            <p>
              We just wanted to take a moment to express our heartfelt gratitude
              to all of our loyal customers. Your continued support and loyalty
              means the world to us, and it is because of you that we are able
              to continue doing what we love. Thank you for choosing our
              restaurant and for allowing us to serve you. We promise to always
              strive for excellence and to bring you the best dining experience
              possible. Thank you again!
            </p>
          </div>
        </div>
      </div>
      <div className="mx-auto flex items-center justify-center top-2">
        <Image
          src="/award.jpg"
          width={0}
          height={0}
          sizes="20vw"
          style={{ width: "10%", height: "auto" }}
          alt="Photo of award."
        />
      </div>
    </div>
  );
};

export default AboutUs;
