import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { IconBox } from "@/components/shared/IconBox";

export function ServiceFeaturesSection() {
  const features = [
    {
      title: "AI Technology",
      desc: "Emphasize the expertise and knowledge of your team in developing and implementing neural networks.",
    },
    {
      title: "Tailored solutions",
      desc: "Mention your ability to create customized neural network solutions that specifically address your clients.",
    },
    {
      title: "Cutting-edge technology",
      desc: "Highlight that you use the latest and most advanced neural network frameworks and technologies.",
    },
    {
      title: "AI consultancy & strategy",
      desc: "Emphasize the expertise and knowledge of your team in developing and implementing neural networks.",
    },
    {
      title: "Computer vision",
      desc: "Mention your ability to create customized neural network solutions that specifically address your clients.",
    },
    {
      title: "Deployment & Integration",
      desc: "Highlight that you use the latest and most advanced neural network frameworks and technologies.",
    },
  ];

  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="features"
            title="The unique selling points & advantages of our service"
            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">
          {features.map((feat, i) => (
            <IconBox
              key={i}
              icon={<DefaultIcon />}
              title={feat.title}
              description={feat.desc}
              hasBorder={i < 3} // The original has a border for the first row
            />
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}