import { CircleArrowRight, Files, Settings } from "lucide-react";

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

interface About1Props {
  className?: string;
}

const About1 = ({ className }: About1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col gap-16 lg:gap-28">
        <div className="flex flex-col gap-4 lg:gap-8">
          <h1 className="text-xl font-semibold tracking-tighter lg:text-2xll">
            درباره ما
          </h1>
          <p className="max-w-xl text-xl">
            وندوک به تیم‌های فروش کمک می‌کند مخاطبین، فرصت‌ها و چرخه معامله را در یک CRM واحد مدیریت کنند. از ثبت لید تا بستن قرارداد، همه‌چیز شفاف و قابل پیگیری است.
                                </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="placeholder"
            className="size-full max-h-96 rounded-2xl object-cover"
          />
          <div className="flex flex-col justify-between gap-10 rounded-2xl bg-muted bg-[url('/block-media/shadcnblocks/block/photos/christin-hume-Hcfwew744z4-unsplash.jpg')] bg-cover bg-center p-10">
            <p className="text-sm font-semibold text-white">مأموریت ما</p>
            <p className="text-lg font-medium text-white">
              مأموریت وندوک این است که فروش B2B را بدون پیچیدگی‌های قدیمی CRM ممکن کند. هر نماینده باید بتواند در چند دقیقه وضعیت پایپ‌لاین را ببیند و اقدام بعدی را بداند.
                                      </p>
          </div>
        </div>
        <div className="flex flex-col gap-6 md:gap-20">
          <div className="max-w-xl">
            <h2 className="mb-4 text-3xl font-semibold tracking-tight md:text-2xll">
              فروش را قابل اندازه‌گیری کرده‌ایم
                                      </h2>
            <p className="text-lg text-muted-foreground">
              هدف ما این است که هزاران تیم فروش با دادهٔ واقعی تصمیم بگیرند، نه با حدس. این سه اصل مسیر ماست.
            </p>
          </div>
          <div className="grid gap-10 md:grid-cols-3">
            <div className="flex flex-col">
              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
                <Files className="size-5" />
              </div>
              <h3 className="mt-2 mb-3 text-lg font-semibold">
                شفافیت پایپ‌لاین
                                            </h3>
              <p className="text-muted-foreground">
                هر معامله وضعیت، مالک و مرحله بعدی مشخص دارد. مدیران و نمایندگان روی یک منبع حقیقت کار می‌کنند تا هیچ فرصتی از دست نرود.
                                            </p>
            </div>
            <div className="flex flex-col">
              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
                <CircleArrowRight className="size-5" />
              </div>
              <h3 className="mt-2 mb-3 text-lg font-semibold">
                شتاب در بستن معامله
              </h3>
              <p className="text-muted-foreground">
                اتوماسیون یادآوری، امتیازدهی لید و هشدارهای ازدست‌رفتن به تیم کمک می‌کند روی فرصت‌های با اولویت بالا تمرکز کند و نرخ تبدیل را بالا ببرد.
              </p>
            </div>
            <div className="flex flex-col">
              <div className="mb-5 flex size-12 items-center justify-center rounded-2xl bg-accent">
                <Settings className="size-5" />
              </div>
              <h3 className="mt-2 mb-3 text-lg font-semibold">
                گزارش‌های قابل اقدام
              </h3>
              <p className="text-muted-foreground">
                داشبوردهای وندوک نرخ برد، طول چرخه و عملکرد نمایندگان را لحظه‌ای نشان می‌دهد تا کوچینگ و برنامه‌ریزی فروش دقیق‌تر شود.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About1 };