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]">
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18433.svg" 
              alt="" 
              width={1283}
              height={1471}
              className="h-auto w-auto max-w-[100vw] object-contain opacity-80"
              aria-hidden="true"
            />
          </div>
          
          {/* Main Vector Image */}
          <div className="relative z-10 min-[576px]:ml-[-26vw]">
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/01/Vector-13.png" 
              alt="Neural Network Visualization" 
              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-aiero-dark tracking-[-0.03em]"
              style={{
                fontFamily: "var(--font-dm-sans)",
                fontSize: "clamp(36px, 4.5vw, 58px)",
                fontWeight: 500,
                lineHeight: 1.1,
              }}
            >
              Tinker with a <span className="gradient-text-purple">Neural Network right here</span> in your browser. Don’t worry, you can’t break it. We Promise.
            </h2>
          </div>

          {/* Partners row */}
          <div className="flex flex-wrap items-center justify-start gap-x-[40px] gap-y-[30px]">
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-1.png" 
              alt="Partner 1" 
              className="h-auto w-[140px] object-contain"
            />
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-2.png" 
              alt="Partner 2" 
              className="h-auto w-[130px] object-contain"
            />
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-3.png" 
              alt="Partner 3" 
              className="h-auto w-[100px] object-contain"
            />
            <img 
              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/partners-4.png" 
              alt="Partner 4" 
              className="h-auto w-[140px] object-contain"
            />
          </div>
        </div>
      </div>
    </section>
  );
}