import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { IconBox } from "@/components/shared/IconBox";
import { differentiators } from "@/data/site-content";

export function ServiceFeaturesSection() {
  const DefaultIcon = () => (
    <div className="flex h-full w-full items-center justify-center rounded-[18px] bg-tenext-card-purple">
      <svg
        width="32"
        height="32"
        viewBox="0 0 24 24"
        fill="none"
        className="text-white"
      >
        <path
          d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  );

  return (
    <SectionContainer paddingY="lg">
      <PageContainer>
        <div className="mb-16">
          <SectionHeading
            tag="why tenext"
            title="What enterprises get from working with us"
            titleClassName="text-white max-w-[700px]"
          />
        </div>

        <div className="grid grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-2 lg:grid-cols-3">
          {differentiators.map((item, i) => (
            <IconBox
              key={item.id}
              icon={<DefaultIcon />}
              title={item.title}
              description={item.description}
              hasBorder={i < 3} // The original has a border for the first row
            />
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}