import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";

export default function Culture() {
  return (
    <>
      <div className="mx-6">
        <div className="w-full mx-6 md:my-20 p-4 md:p-10 flex flex-col items-center justify-between bg-white rounded-2xl md:rounded-5xl lg:flex-row lg:max-w-screen-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
          <div className="w-full lg:w-1/2 flex flex-col justify-between p-4 leading-normal">
            <h1 className="lg:px-12 text-3xl font-semibold text-black">
              {Texts.team_culture}
            </h1>
            <p className="lg:px-12 mt-6 mb-10 text-lg md:text-xl leading-10  text-gray-900 dark:text-white">
              {Texts.team_culture_sub1}
            </p>
            <p className="lg:px-12  mb-10 text-lg md:text-xl leading-10  text-gray-900 dark:text-white">
              {Texts.team_culture_sub2}
            </p>
            <p className="lg:px-12 mb-10 text-lg md:text-xl leading-10  text-gray-900 dark:text-white">
              {Texts.team_culture_sub3}
            </p>
            <p className="lg:px-12  mb-10 text-lg md:text-xl leading-10  text-gray-900 dark:text-white">
              {Texts.team_culture_sub4}
            </p>
          </div>
          <img
            className="object-cover rounded-3xl w-full lg:h-600 md:rounded-3xl lg:w-1/2"
            src={ImagePath.culture}
            alt=""
          />
        </div>
      </div>
      <style jsx>{`
        h5 {
          line-height: 66px;
        }
        .rounded-3xl {
          border-radius: 70px;
        }
      `}</style>
    </>
  );
}