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

const AboutUs = () => {
  return (
    <div className="">
      <div className="flex items-center justify-center text-center text-4xl hidden xl:block text-secondary">
        About Us
      </div>
      <div className="flex items-center justify-center p-4  text-center text-2xl block xl:hidden text-secondary">
        About Us
      </div>
      <div className="flex items-center justify-center p-4  text-center text-4xl hidden xl:block text-secondary">
        Jefe's Mexican Cantina & Cocina
      </div>
      <div className="flex items-center justify-center h-16 p-4  text-center text-2xl block xl:hidden text-secondary">
        Jefe's Mexican Cantina & Cocina
      </div>
      <div className="flex mb-5 mx-auto max-w-xl relative items-center justify-center">
        <Image
          src="/kevin.webp"
          width={0}
          height={0}
          sizes="100vw"
          style={{ width: "60%", height: "auto" }}
          alt="Photo of Kevin mobile."
          className="block xl:hidden"
        />
      </div>
      <div className="flex gap-8 mx-auto relative max-w-screen-xl text-xl font-serif antialiased">
        <Image
          src="/kevin.webp"
          width={0}
          height={0}
          sizes="100vw"
          style={{ width: "100%", height: "auto" }}
          alt="Photo of Kevin."
          className="hidden xl:block p-4"
        />
        <div className="space-y-6">
          <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;
