import Link from "next/link";
import Image from "next/image";
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
import { PageContainer } from "@/components/shared/PageContainer";

export function WOWSection() {
  return (
    <section className="relative z-20 px-[20px]">
      <div className="relative z-20 mx-auto max-w-[1340px] overflow-hidden rounded-t-[20px] bg-tenext-dark pt-[30px] pb-[60px] md:pt-[40px] md:pb-[80px]">
        <PageContainer>
          <div className="grid grid-cols-1 gap-[40px] lg:grid-cols-2 lg:gap-[60px]">
            <div className="flex flex-col justify-between">
              <div className="mb-[35px] md:mb-[70px] md:pr-[10%]">
                <span
                  className="mb-[18px] block text-[12px] font-semibold uppercase tracking-[0.1em] text-white"
                  style={{ fontFamily: "var(--font-sora)" }}
                >
                  [ about ]
                </span>
                <h2
                  className="tracking-[-0.03em] text-white"
                  style={{
                    fontFamily: "var(--font-dm-sans)",
                    fontSize: "clamp(44px, 5vw, 80px)",
                    fontWeight: 500,
                    lineHeight: 1.1,
                  }}
                >
                  Why enterprises choose Tenext
                </h2>
              </div>

              <Image
                src="/images/tenext/home-9-img.png"
                alt="Tenext"
                width={632}
                height={158}
                className="h-auto w-full max-w-[632px] object-contain"
              />
            </div>

            <div className="flex flex-col justify-between">
              <div className="max-w-[560px] text-white">
                <p className="text-[16px] font-bold leading-[1.7]">
                  Tenext Technologies helps enterprises turn digital
                  transformation into predictable business outcomes. We combine
                  engineering depth with a diagnostic, outcome-first approach —
                  so every investment maps to measurable value.
                </p>
                <p className="mt-[27px] text-[16px] font-medium leading-[1.7]">
                  Our teams integrate solutions with your existing systems and
                  processes, delivering the lowest total cost of ownership and
                  accelerated time to value across cloud, data, AI, product
                  engineering, and digital commerce.
                </p>
              </div>

              <div className="mt-[40px] md:mt-[60px]">
                <Link
                  href="/services"
                  className="tenext-button tenext-button-gradient-border group rounded-full px-[35px] py-[15px] font-[var(--font-sora)] text-[15px] font-semibold tracking-wide text-white transition-all"
                >
                  <span className="button-inner" />
                  Explore more
                  <ArrowIcon className="ml-2 h-[12px] w-[12px] transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
                </Link>
              </div>
            </div>
          </div>
        </PageContainer>
      </div>
    </section>
  );
}