import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface About4Props {
  className?: string;
}

const About4 = ({ className }: About4Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center">
          <h1 className="text-xl font-semibold md:text-2xll">درباره ما</h1>
          <p className="text-xl font-medium text-muted-foreground">
            نگهدار پلتفرم موفقیت مشتری است؛ سلامت حساب، تمدید و گسترش فروش را در یک داشبورد واحد شفاف می‌کند.
          </p>
        </div>
        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-2.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-3.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-4.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-5.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-6.svg"
            alt="placeholder"
            className="max-h-80 w-full object-cover"
          />
        </div>
        <div className="mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2">
          <div>
            <h2 className="mb-5 text-xl font-semibold">مأموریت ما</h2>
            <p className="text-xl leading-8 font-medium text-muted-foreground">
              نگهداری مشتری نباید بعد از فروش آغاز شود. تیم‌های موفقیت مشتری به سیگنال‌های زودهنگام نیاز دارند: افت استفاده، تأخیر در ورود، یا ریسک ریزش.
              <br />
              <br />
              نگهدار سلامت هر حساب را امتیازدهی می‌کند، هشدار ریسک می‌دهد و اقدامات پیشنهادی را به مالک حساب نشان می‌دهد.
              <br />
              <br />
              نتیجه: تمدید بالاتر، گسترش هدفمند و تجربه مشتری قابل اندازه‌گیری.
            </p>
          </div>
          <div>
            <h2 className="mb-5 text-xl font-semibold">تیم نگهدار</h2>
            <p className="text-xl leading-8 font-medium text-muted-foreground">
              <a href="#" className="mr-1 underline">
                شرکت ما
              </a>
              سال‌ها کنار تیم‌های موفقیت مشتری و درآمد کار کرده‌ایم تا شکاف بین سامانه مدیریت ارتباط با مشتری، پشتیبانی و استفاده محصول را پر کنیم.
              <br />
              <br />
              ابتدا گردش‌کار سلامت حساب را برای عملیات داخلی ساختیم؛ امروز همان مدل را به‌صورت محصولی آماده به تیم‌های SaaS ارائه می‌دهیم.
              <br />
              <br />
              اگر هدف شما افزایش نرخ تمدید و کاهش ریزش است، نگهدار برای همین طراحی شده است.
            </p>
          </div>
        </div>
        <div className="mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-start">
          <h3 className="text-3xl font-semibold">
            به تیم
            <br />
            نگهدار بپیوندید
          </h3>
          <Button size="lg">فرصت‌های شغلی</Button>
        </div>
      </div>
    </section>
  );
};

export { About4 };