import VerticalCutCornerBordered from "../global/VerticalCutCornerBordered";
import ServicesDescription from "./ServicesDescription";
import CardOfServices from "../atoms/CardOfServices";
const servicesItems = [
  {
    title: (
      <>
        طراحی و توسعه <span className="text-secondary">نرم افزار</span>
      </>
    ),
    subTitle: "Software design & Develop",
    description:
      "برای تیم ما، نرم‌افزار اختصاصی یعنی ساختن یک ابزار هدفمند؛ سیستمی که با منطق کسب‌وکار هماهنگ است و بی‌سروصدا، اما مؤثر، رشد و بهره‌وری را ممکن می‌کند.",
    buttonText: "سفارش نرم افزار",
  },
  {
    title: (
      <>
        طراحی و توسعه <span className="text-secondary">اپلیکیشن</span>{" "}
        موبایل{" "}
      </>
    ),
    subTitle: "Application design & Develop",
    description:
      "ما اپلیکیشن موبایل را امتداد طبیعی یک کسب‌وکار می‌دانیم؛ جایی که تکنولوژی در دسترس‌ترین شکل خودش را پیدا می‌کند تا ارتباطی سریع، ساده و مداوم با کاربر شکل بگیرد.",
    buttonText: "سفارش اپلیکیشن",
  },
  {
    title: (
      <>
        طراحی و توسعه <span className="text-secondary">سایت</span>
      </>
    ),
    subTitle: "Web design & Develop",
    description:
      "برای ما، سایت یک ویترین دیجیتال هدفمند است؛ ترکیبی از طراحی و تکنولوژی که نه برای نمایش پیچیدگی، بلکه برای خلق تجربه‌ای ساده، حرفه‌ای و ماندگار ساخته می‌شود.",
    buttonText: "سفارش وب سایت",
  },
];
function ServicesSection() {
  return (
    <div className="w-full flex-wrap flex flex-col lg:flex-row lg:justify-between ">
      <div className="relative">
        <VerticalCutCornerBordered
          height="100%"
          className="hidden lg:inline-block"
        />
        <div className="lg:absolute lg:top-10 lg:right-10 md:min-w-50 lg:min-w-90">
          <ServicesDescription />
        </div>
      </div>
      <div className="flex flex-col justify-center items-center gap-5 lg:h-[calc(100dvh-50px)] overflow-y-auto no-scrollbar py-10 lg:pt-120 lg:my-8 lg:pb-0">
        {servicesItems.map((item, index) => (
          <div key={index} className="w-full md:w-fit">
            <CardOfServices
              title={item.title}
              subTitle={item.subTitle}
              description={item.description}
              buttonText={item.buttonText}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default ServicesSection;
