import { ArrowLeft } from "lucide-react";

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

interface About7Props {
  className?: string;
}

const About7 = ({ className }: About7Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "overflow-x-clip bg-[#E9EDE8] py-32 dark:bg-[#2F332E]",
        className,
      )}
    >
      <div className="container">
        <div className="max-w-xl lg:-translate-x-32">
          <h2 className="mb-4 text-xl font-semibold text-muted-foreground md:text-3xl">
            درباره ما
          </h2>
          <h1 className="max-w-[600px] text-3xl leading-tight font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
            کارنویس پلتفرم مدیریت کار برای تیم‌های محصول و عملیات است؛ پروژه‌ها، مهلت‌ها و مالکیت کار را شفاف نگه می‌دارد.
                                </h1>
        </div>

        <div className="relative mt-12 flex gap-4">
          <div className="max-lg:translate-x-20">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="داشبورد مدیریت کار کارنویس"
              width={800}
              height={500}
            />
          </div>
          <div className="bottom-0 aspect-[1.5/1.4] w-[max(30vw,220px)] -left-10 translate-y-20 max-lg:absolute max-lg:border-[16px] max-lg:border-[#E9EDE8] lg:-translate-y-20 dark:max-lg:border-[#2F332E]">
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="کاربر در حال به‌روزرسانی وظایف"
              className="h-full w-full object-cover"
            />
          </div>
        </div>

        <div className="mt-28 max-w-xl lg:mt-10 lg:-translate-x-32">
          <p className="text-lg leading-relaxed">
            کار تیمی وقتی پراکنده می‌شود که تسک‌ها در چت، ایمیل و صفحات مختلف باشد. کارنویس همه کارها را در یک سیستم قابل پیگیری جمع می‌کند.
          </p>
        </div>

        <div className="mt-6 space-y-6 md:mt-8 md:space-y-8 lg:mt-10 lg:space-y-10">
          <h2 className="max-w-xl text-xl font-semibold md:text-3xl lg:-translate-x-32">
            ابزار مدیریت کار باید به اندازه تیم شما منعطف باشد؛ نه برعکس.
                                </h2>
          <p className="max-w-xl text-lg leading-relaxed lg:-translate-x-32">
            سال‌ها تخته کانبان، لیست تسک و ابزارهای پیچیده را آزمودیم. بیشترشان یا بیش‌ازحد ساده بودند یا برای راه‌اندازی به ماه‌ها آموزش نیاز داشتند. کارنویس را از صفر ساختیم تا برنامه‌ریزی اسپرینت، وابستگی‌ها و گزارش پیشرفت در چند دقیقه ممکن شود.
                                </p>
          <div className="grid gap-6 py-6 md:grid-cols-2 lg:py-10">
            <img
              src="/block-media/shadcnblocks/block/placeholder-3.svg"
              alt="همکاری روی برد پروژه"
              width={600}
              height={400}
              className="rounded-lg"
            />
            <img
              src="/block-media/shadcnblocks/block/placeholder-4.svg"
              alt="جلسه برنامه‌ریزی اسپرینت"
              width={600}
              height={400}
              className="rounded-lg"
            />
          </div>

          <p className="ms-auto max-w-xl text-lg leading-relaxed lg:translate-x-32">
            کارنویس از ۲۰۱۹ برای تیم‌های داخلی ما ساخته شد و از ۲۰۲۲ به‌صورت عمومی در دسترس است. هر قابلیت برای سرعت، وضوح مالکیت و کاهش نویز طراحی شده است.
                                </p>

          <h2 className="ms-auto max-w-xl text-xl font-semibold md:text-3xl lg:translate-x-32">
            تیمی متمرکز بر محصول؛ نه یک استارتاپ پر سروصدا.
          </h2>
          <div className="ms-auto max-w-xl text-lg leading-relaxed lg:translate-x-32">
            <p>
              کارنویس متعلق به بنیان‌گذاران و تیم است. سودآور و متمرکز کار می‌کنیم تا محصول پایدار بماند. اگر می‌خواهید روی ابزارهای بهره‌وری تیمی کار کنید، موقعیت‌های باز را ببینید:
            </p>
            <Button
              variant="outline"
              size="lg"
              className="mt-6 md:mt-8 lg:mt-10"
            >
              <a href="#">
                <span className="flex items-center gap-2 whitespace-pre-wrap">
                  فرصت‌های شغلی کارنویس
                  <ArrowLeft className="size-4" />
                </span>
              </a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { About7 };