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>

          {/* Capability tags */}
          <div className="flex flex-wrap items-center justify-start gap-[12px]">
            {["Cloud", "Data & AI", "IoT", "SMAC", "DevOps", "Blockchain"].map(
              (tag) => (
                <span
                  key={tag}
                  className="rounded-full border border-tenext-card-border px-[22px] py-[10px] text-[15px] font-medium text-tenext-dark"
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  {tag}
                </span>
              )
            )}
          </div>
        </div>
      </div>
    </section>
  );
}