import React from "react";

import { cn } from "@/lib/utils";

const stats = [
  {
    number: "80K+",
    description:
      "از دسترسی به بیش از ۸۰هزار کاربر تا پشتیبانی از بیش از ۲۰ استارتاپ؛ این اعداد مقیاس، اثر و ثبات کار من را نشان می‌دهند.",
  },
  {
    number: "20+",
    description:
      "استارتاپ‌هایی که با راهکارهای نوآورانه و راهنمایی استراتژیک همراه شدند تا در بازار خود مقیاس بگیرند و موفق شوند.",
  },
  {
    number: "95%",
    description:
      "نرخ رضایت مشتری با پشتیبانی متعهد، تحویل باکیفیت و مشارکت‌های بلندمدت مبتنی بر اعتماد.",
  },
];

interface About16Props {
  className?: string;
}

const About16 = ({ className }: About16Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-20 lg:grid-cols-6">
          <div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 lg:sticky">
            <span className="size-2 bg-orange-500" />
            <p className="text-foreground/30 uppercase">چرا ما؟</p>
          </div>
          <div className="col-span-4 ml-auto max-w-3xl space-y-10">
            <h1 className="text-3xl font-medium tracking-tight lg:text-xl">
              «ما تیمی از متخصصان محصول و فروش هستیم. پلتفرم‌های B2B می‌سازیم
              که به تیم‌ها کمک می‌کند درآمد را افزایش دهند. مأموریت ما بر
              نوآوری، کارایی و رشد پایدار مشتریان بنا شده است.»
            </h1>

            <p className="text-lg text-foreground/40">
              می‌پرسیم: هدف چیست؟ برای چه کسی است؟ چطور آن را بی‌دردسر کنیم؟
              <br className="hidden lg:block" />
              از چرایی، برای چه کسی و چگونه بهتر شدنش شروع می‌کنیم.
            </p>

            <img
              src="/block-media/shadcnblocks/block/guri4/img11.png"
              alt=""
              className="pointer-events-none h-110 w-full object-cover"
            />
            <ul className="mt-14">
              {stats.map((stat, index) => (
                <li key={index} className="grid grid-cols-5 border-b py-8">
                  <h3 className="col-span-2 text-xl font-medium">
                    {stat.number}
                  </h3>
                  <p className="col-span-3">{stat.description}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About16 };