import { CardHeading, IconButton } from "@/components/shared/CardShared";

export function FeaturesSection() {
  return (
    <section className="bg-white px-[20px] pb-[100px] pt-[150px]">
      <div className="mx-auto max-w-[1260px]">
        {/* Top text and separator */}
        <div className="mb-[70px] pr-[10%]">
          <div className="mb-[20px] h-px w-[130px] bg-tenext-card-border" />
          <h2
            className="max-w-[700px] tracking-[-0.03em] text-tenext-dark"
            style={{
              fontFamily: "var(--font-sora)",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 700,
              lineHeight: 1.1,
            }}
          >
            Engineered for outcomes, built for scale
          </h2>
        </div>

        {/* Feature Cards Grid */}
        <div className="grid grid-cols-1 gap-[20px] lg:grid-cols-2">
          {/* Card 1 - Left */}
          <div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[22%_9%_20%_9%]">
            <div
              className="absolute inset-0 bg-[url('/images/tenext/home-9-img.png')] bg-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
              style={{ backgroundSize: "100% auto" }}
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[#0D0D0D99] to-transparent to-[20%]" />

            <div className="relative z-10 mt-auto">
              <CardHeading
                title="Integrate data across your enterprise to uncover deep insight"
                titleClassName="text-white"
              />

              <ul className="mt-[20px] flex flex-col gap-3">
                <li className="flex items-center gap-3 text-tenext-text-muted">
                  <span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
                  Advanced analytics processing
                </li>
                <li className="flex items-center gap-3 text-tenext-text-muted">
                  <span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
                  Real-time data synchronization
                </li>
                <li className="flex items-center gap-3 text-tenext-text-muted">
                  <span className="flex h-1 w-1 rounded-full bg-tenext-text-muted" />
                  Secure API endpoints
                </li>
              </ul>
            </div>

            <IconButton />
          </div>

          {/* Card 2 - Right */}
          <div className="relative flex flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-[40px_35px_45px_35px] lg:p-[10%_9%_11%_9%]">
            <div className="absolute inset-0 bg-[url('/images/tenext/Dots.png')] bg-[length:auto] bg-[50%_20px] bg-no-repeat opacity-20" />

            <div className="relative z-10 flex h-[42px] w-[42px] items-center justify-center text-white">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-full w-full"
              >
                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
              </svg>
            </div>

            <div className="relative z-10 mt-[60px] lg:mt-[100px]">
              <CardHeading
                title="Data privacy and security with robust measures"
                titleClassName="text-white"
              />
              <p className="text-[16px] text-tenext-text-muted">
                Enterprise-grade security and governance built into every
                engagement — from secure architecture and access controls to
                compliance-ready data handling.
              </p>
            </div>

            <IconButton />
          </div>

          {/* Card 3 - Bottom Full Width */}
          <div className="relative col-span-1 overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark lg:col-span-2">
            <div
              className="absolute inset-0 bg-[url('/images/tenext/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png')] bg-right-bottom bg-no-repeat transition-all duration-300 hover:scale-105"
              style={{ backgroundSize: "83% auto" }}
            />

            <div className="relative z-10 grid grid-cols-1 gap-[40px] p-[40px_35px] lg:grid-cols-2 lg:p-[80px_60px]">
              <div>
                <CardHeading
                  subtitle="Technology"
                  title="Tailored solutions specifically to your needs"
                  titleClassName="text-white"
                  subtitleClassName="text-tenext-teal"
                />
              </div>

              <div className="flex flex-col gap-[30px] lg:pl-[15%]">
                <div>
                  <h4 className="text-[20px] font-bold text-white font-[var(--font-sora)]">
                    Engineering ownership
                  </h4>
                  <p className="mt-[8px] text-[15px] leading-[1.7] text-tenext-text-muted">
                    The team that designs a system builds and supports it.
                  </p>
                </div>
                <div>
                  <h4 className="text-[20px] font-bold text-white font-[var(--font-sora)]">
                    Support beyond go-live
                  </h4>
                  <p className="mt-[8px] text-[15px] leading-[1.7] text-tenext-text-muted">
                    Monitoring, optimization, and managed support after launch.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}