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

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,
            }}
          >
            AI Solutions that drive success
          </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 our API to uncover deep insights"
                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">
                Cobra opaleye gray reef shark bluntnose minnow. Triggerfish
                bango guppy opah sunfish bluntnose knifefish upside-down
                catfish.
              </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-[40px] sm:flex-row sm:gap-[60px] lg:pl-[15%]">
                <Counter
                  target={98}
                  suffix="%"
                  numberClassName="text-[60px] font-bold leading-none font-[var(--font-manrope)] text-white"
                  title="Accuracy rate"
                  titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-tenext-text-muted mt-2"
                />
                <Counter
                  target={24}
                  suffix="/7"
                  numberClassName="text-[60px] font-bold leading-none font-[var(--font-manrope)] text-white"
                  title="Customer support"
                  titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-tenext-text-muted mt-2"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}