import { tenextButton as TenextButton } from "@/components/shared/Button";
import { IconBox } from "@/components/shared/IconBox";
import { valueProps } from "@/data/site-content";
import {
  OrbitIcon,
  FanIcon,
  CirclesIcon,
  ExpandIcon,
} from "@/components/shared/icons/PossibilityIcons";

export function PossibilitiesSection() {
  return (
    <section className="px-[20px] py-[60px] md:py-[100px]">
      <div className="mx-auto grid max-w-[1260px] grid-cols-1 gap-[50px] lg:grid-cols-[1fr_1fr]">
        {/* Left Column */}
        <div className="flex flex-col items-start pr-[10%] pt-[20px]">
          <span
            className="tenext-subheading mb-[16px] text-tenext-dark uppercase tracking-[0.1em]"
            style={{ fontFamily: "var(--font-sora)" }}
          >
            [ what we do ]
          </span>

          <h2
            className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-tenext-dark"
            style={{
              fontFamily: "var(--font-dm-sans)",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 500,
              lineHeight: 1.1,
            }}
          >
            Services that move the business, not just the technology
          </h2>

          <p className="mb-[40px] max-w-[480px] text-[16px] leading-[1.8] text-tenext-text-muted">
            Tenext Technologies partners with enterprises to engineer, migrate,
            and scale digital platforms. We integrate solutions with your
            existing systems and processes to deliver predictable outcomes,
            lower total cost of ownership, and accelerate time to value.
          </p>

          <TenextButton
            variant="gradient-border"
            className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
            showArrow={true}
          >
            Explore more
          </TenextButton>

          <div className="mt-[80px] max-w-[420px] border-t border-tenext-card-border pt-[30px]">
            <h3 className="text-[20px] font-bold text-tenext-dark font-[var(--font-sora)]">
              {valueProps.engineering.title}
            </h3>
            <p className="mt-[10px] text-[16px] leading-[1.7] text-tenext-text-muted">
              {valueProps.engineering.description}
            </p>
          </div>
        </div>

        {/* Right Column */}
        <div className="flex flex-col gap-[30px] lg:pl-[10%]">
          <IconBox
            icon={<OrbitIcon className="h-full w-full" />}
            title="Technology Engineering"
            description="Full-stack product engineering — architecture, development, and modernization of enterprise applications built to scale."
            hasBorder={true}
            theme="light"
          />
          <IconBox
            icon={<FanIcon className="h-full w-full" />}
            title="Cloud & Enterprise Platforms"
            description="Cloud migration, platform engineering, and DevOps that lower total cost of ownership and keep systems reliable."
            hasBorder={true}
            theme="light"
          />
          <IconBox
            icon={<CirclesIcon className="h-full w-full" />}
            title="AI & Data Science"
            description="Data platforms, analytics, and applied AI that turn enterprise data into automation and decision-ready insight."
            hasBorder={true}
            theme="light"
          />
          <IconBox
            icon={<ExpandIcon className="h-full w-full" />}
            title="Digital Commerce & Mobility"
            description="Commerce platforms and enterprise mobile applications that deliver seamless customer and workforce experiences."
            hasBorder={true}
            theme="light"
          />
        </div>
      </div>
    </section>
  );
}