"use client";

import Image from "next/image";
import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
import { services } from "@/data/site-content";

export function ServiceCardsGrid() {
  return (
    <SectionContainer paddingY="lg">
      <PageContainer>
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
          {services.map((svc) => (
            <div
              key={svc.id}
              id={svc.id}
              className="group relative flex h-full min-h-[340px] scroll-mt-[120px] flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-10 transition-all hover:bg-tenext-card-purple"
            >
              <div className="mb-6 h-[60px] w-[60px] rounded-full bg-tenext-card-purple2 p-4">
                <Image
                  src="/images/tenext/3x.png"
                  alt=""
                  width={60}
                  height={60}
                  className="h-full w-full object-contain"
                  onError={(e) => {
                    (e.target as HTMLImageElement).src =
                      "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 2L2 22h20L12 2z'/></svg>";
                  }}
                />
              </div>

              <div>
                <h4
                  className="mb-4 text-[22px] font-bold text-white transition-colors group-hover:text-tenext-teal"
                  style={{ fontFamily: "var(--font-dm-sans)" }}
                >
                  {svc.title}
                </h4>
                <p className="text-[16px] text-tenext-text-muted">
                  {svc.description}
                </p>
              </div>

              <div className="absolute bottom-0 right-0 flex h-[60px] w-[60px] items-center justify-center rounded-tl-[25px] bg-white text-tenext-dark transition-all duration-300 group-hover:bg-tenext-teal group-hover:text-white">
                <ArrowIcon className="h-4 w-4" />
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}