import { Texts } from "@/utils/texts";
import { Religion } from "./Religion";

export function CareerSec() {
  return (
    <>
      <div className="w-full bg-white flex items-center justify-center py-20 md:py-56">
        <div className="grid grid-cols-1 lg:grid-cols-3 md:gap-24 w-full max-w-screen-2xl px-6 lg:px-20">
          
          {/* Left Side: Sticky Title */}
          <div className="w-full">
            <div className="sticky top-28 flex flex-col gap-6">
              <h1 className="text-3xl text-black md:text-5xl font-semibold">
                {Texts.our_religion}
              </h1>
              <h2 className="text-xl text-black mb-6 md:mt-4">
                {Texts.our_religion_sub}
              </h2>
            </div>
          </div>

          {/* Right Side: Scrollable Content */}
          <div className="col-span-2 w-full h-fit">
            <Religion />
          </div>
          
        </div>
      </div>
    </>
  );
}
