import Image from "next/image";

export function TinkerSection() {
  return (
    <section className="relative px-[20px] py-[60px] md:py-[100px] overflow-hidden">
      <div className="mx-auto flex max-w-[1340px] flex-col gap-[50px] lg:flex-row lg:items-center lg:gap-0">
        {/* Left Column - Images */}
        <div className="relative flex w-full flex-col lg:mt-[30px] lg:w-[22%]">
          {/* Background Glow (elementor-absolute) */}
          <div className="absolute left-0 top-0 z-0 pointer-events-none min-[576px]:left-[-40vw] min-[576px]:top-[-19.252vw]">
            <Image
              src="/images/tenext/Group-18433.png"
              alt=""
              width={1283}
              height={1471}
              className="h-auto w-auto max-w-[100vw] object-contain opacity-80"
              aria-hidden="true"
              unoptimized
            />
          </div>

          {/* Main Vector Image */}
          <div className="relative z-10 min-[576px]:ml-[-26vw]">
            <Image
              src="/images/tenext/Vector-13.png"
              alt="Tenext technology stack"
              width={670}
              height={694}
              className="w-full h-auto max-w-[800px] object-contain"
            />
          </div>
        </div>

        {/* Right Column - Text & Partners */}
        <div className="relative z-10 flex w-full flex-col lg:w-[78%]">
          <div className="min-[576px]:mr-[-4%]">
            <h2
              className="mb-[60px] text-tenext-dark tracking-[-0.03em]"
              style={{
                fontFamily: "var(--font-dm-sans)",
                fontSize: "clamp(36px, 4.5vw, 58px)",
                fontWeight: 500,
                lineHeight: 1.1,
              }}
            >
              Modern technology,{" "}
              <span className="gradient-text-purple">
                integrated with the systems
              </span>{" "}
              you already run — cloud, data, IoT, DevOps, and blockchain.
            </h2>
          </div>

          {/* Partners row */}
          <div className="flex flex-wrap items-center justify-start gap-x-[40px] gap-y-[30px]">
            <Image
              src="/images/tenext/partners-1.png"
              alt="Partner 1"
              width={140}
              height={40}
              className="h-auto w-[140px] object-contain"
            />
            <Image
              src="/images/tenext/partners-2.png"
              alt="Partner 2"
              width={130}
              height={40}
              className="h-auto w-[130px] object-contain"
            />
            <Image
              src="/images/tenext/partners-3.png"
              alt="Partner 3"
              width={100}
              height={40}
              className="h-auto w-[100px] object-contain"
            />
            <Image
              src="/images/tenext/partners-4.png"
              alt="Partner 4"
              width={140}
              height={40}
              className="h-auto w-[140px] object-contain"
            />
          </div>
        </div>
      </div>
    </section>
  );
}