import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import React from "react";


const AboutUs = () => {
  const t = useTranslations("HomePage.AboutUs")
  const locale = useLocale()
  return (
    <div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative  ">
      <div className="max-w-screen-xl mx-auto">


        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute left-0 top-0 bottom-0 -z-10 right-0">
          <pattern id="diagonalLines" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="10" stroke="#e2e8f0" stroke-width="1" />
          </pattern>
          <rect width="100%" height="100%" fill="url(#diagonalLines)" />
        </svg>
        <div className="xs:px-3 md:px-10 md:container md:mx-auto ">
          <div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5  items-center " dir={locale == "en" ? "rtl" : "ltr"} >
            <div className="mx-auto">
              <Image src={`/images/logo-${locale}.png?v=1`} width={350} height={350} className="xs:w-[200px] lg:w-auto" />
            </div>
            <div className="text-left relative mb-10 col-span-2">
              <h2 className={
                `text-4xl font-bold relative z-10 xs:text-center lg:text-left ${locale === "en" ? "lg:text-left" : "lg:text-right"}`
              }>
                {t("brandName")}

              </h2>

              <p className={`mb-0 text-base mt-5 text-center  ${locale === "en" ? "lg:text-left" : "lg:text-right"}  leading-7`}>
                <span className="text-primary-800 font-semibold text-lg">
                  {t("description.0")}
                </span>
                <br />
                <br />
                {t("description.1")} <br />
                <br />
                {t("description.2")}
              </p>
              {/* 
            <div className="flex gap-2 mx-auto mt-5 w-full justify-center lg:justify-end">
              <button className="btn btn-primary text-base py-3 px-10 ">
                {" "}
                Export
              </button>
              <button className="btn btn-primary text-base p-3 px-10">
                {" "}
                Industrial
              </button>
            </div> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutUs;
