"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import React from "react";

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

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

interface Feature189AbeshdeHamkarProps {
  className?: string;
}

const Feature189AbeshdeHamkar = ({ className }: Feature189AbeshdeHamkarProps) => {
  const features = [
    {
      title: "بهره‌وری بیشتر",
      description:
        "ثبت و پیگیری معاملات آبشده بدون تماس‌های مکرر؛ دسترسی لحظه‌ای به مانده و ریز تراکنش‌ها تا روی کار اصلی تمرکز کنید.",
    },
    {
      title: "همکاری و شفافیت",
      description:
        "همه طرفین معامله به‌صورت شفاف به داده‌ها دسترسی دارند؛ همکاری بدون ابهام و تسویه بر اساس اعداد واقعی.",
    },
    {
      title: "گزارش و تحلیل",
      description:
        "گزارش‌های تفصیلی و ابزارهای تحلیلی برای ارزیابی عملکرد و تصمیم‌گیری بر اساس داده.",
    },
  ];

  return (
    <section
      className={cn(
        "bg-background py-16 sm:py-24 md:py-28 lg:py-32",
        className
      )}
      dir="rtl"
    >
      <div className="container mx-auto max-w-6xl px-4 sm:px-6">
        <div className="grid items-center gap-10 sm:gap-12 lg:grid-cols-2 lg:gap-16">
          {/* تصاویر سکشن آبشده همکار */}
          <div className="relative mb-8 lg:mb-0">
            <div className="relative -top-8 z-10 mx-auto w-[55%] sm:-top-10 sm:w-[40%] lg:-top-12 lg:w-[35%]">
              <img
                alt="Professional Business Collaboration Meeting abshodeh-hamkar"
                src="/assets/abshode-hamkar/Professional Business Collaboration Meeting abshodeh-hamkar.jpg"
                className="h-[180px] rounded-xl object-cover shadow-lg sm:h-[260px] lg:h-[280px]"
              />
            </div>
            <div className="absolute left-0 top-4 z-0 w-[50%] -rotate-12 sm:top-6 sm:w-[35%]">
              <img
                alt="Financial Management Productivity Workspace abshodeh-hamkar"
                src="/assets/abshode-hamkar/Financial Management Productivity Workspace abshodeh-hamkar.jpg"
                className="h-[160px] rounded-xl object-cover shadow-lg sm:h-[240px] lg:h-[260px]"
              />
            </div>
            <div className="absolute right-0 top-4 z-20 w-[50%] rotate-12 sm:top-6 sm:w-[35%]">
              <img
                alt="Advanced Data Analysis Dashboard Office abshodeh-hamkar"
                src="/assets/abshode-hamkar/Advanced Data Analysis Dashboard Office abshodeh-hamkar.jpg"
                className="h-[160px] rounded-xl object-cover shadow-lg sm:h-[240px] lg:h-[260px]"
              />
            </div>
          </div>

          {/* محتوا */}
          <div className="max-w-xl lg:max-w-none lg:mr-auto">
            <h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground lg:max-w-[90%]">
              با ابزارهای حرفه‌ای، کسب‌وکارتان را متحول کنید
            </h2>

            <div className="mt-6 grid gap-6 sm:mt-10 sm:gap-8">
              {features.map((feature) => (
                <div key={feature.title} className="flex items-start gap-4">
                  <div>
                    <h3 className="text-heading-4 font-semibold leading-[var(--line-height-heading)] text-foreground">
                      {feature.title}
                    </h3>
                    <p className="text-body mt-1.5 leading-[var(--line-height-body)] text-muted-foreground">
                      {feature.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            <Button
              asChild
              variant="secondary"
              className="mt-6 flex items-center gap-2 sm:mt-10"
            >
              <Link href="/contact">
                بیشتر بدانید
                <ArrowRight className="size-4" />
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature189AbeshdeHamkar };