mr_decor/components/sections/feature/feature-partnership-highlights.tsx

"use client";

import {
  ChartArea,
  ChartNoAxesCombined,
  Layout,
  Medal,
  Monitor,
  Target,
  TrendingUp,
} from "lucide-react";

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

import { Badge } from "@/components/ui/badge";

interface FeaturePartnershipHighlightsProps {
  className?: string;
  /** مسیر تصویر وسط سکشن (مثلاً برای صفحه آبشده همکار) */
  centerImageSrc?: string;
  /** متن alt تصویر وسط */
  centerImageAlt?: string;
}

const defaultCenterImage =
  "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-1.svg";

const FeaturePartnershipHighlights = ({
  className,
  centerImageSrc,
  centerImageAlt = "",
}: FeaturePartnershipHighlightsProps) => {
  const leftCards = [
    {
      icon: Target,
      title: "راهکارهای هدف‌مند",
      description:
        "امکانات متناسب با چالش‌های خاص پروژه شما برای رسیدن به نتیجه دقیق.",
    },
    {
      icon: Layout,
      title: "یکپارچه‌سازی روان",
      description:
        "ادغام بی‌دردسر با سامانه‌های موجود برای حفظ تداوم و عملکرد.",
    },
    {
      icon: ChartArea,
      title: "بینش داده لحظه‌ای",
      description:
        "مانیتورینگ داده در زمان واقعی برای تصمیم‌گیری بهتر و تنظیم سریع‌تر.",
    },
  ];

  const rightCards = [
    {
      icon: TrendingUp,
      title: "رشد راهبردی",
      description:
        "ابزارهای راهبردی برای مقیاس‌پذیری کسب‌وکار و پاسخ به نیازهای در حال تحول بازار.",
    },
    {
      icon: ChartNoAxesCombined,
      title: "تحلیل‌های پیشرفته",
      description:
        "بینش عمیق‌تر با تحلیل‌های پیشرفته برای پیشتازی در تصمیم‌گیری.",
    },
    {
      icon: Monitor,
      title: "مدیریت یکپارچه",
      description:
        "مدیریت و کنترل متمرکز همه جنبه‌های گردش کار از یک پلتفرم.",
    },
  ];

  return (
    <section
      className={cn(
        "border-t border-border/50 bg-background py-16 sm:py-24 md:py-32",
        className
      )}
      dir="rtl"
    >
      <div className="container mx-auto flex flex-col items-center px-4 sm:px-6">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 text-center">
          <Badge
            variant="outline"
            className="flex items-center gap-1.5 px-2.5 py-1.5 text-caption font-medium"
          >
            <Medal className="h-auto w-4" />
            برجسته‌ها
          </Badge>
          <h2 className="text-heading-2 font-semibold text-foreground">
            توانایی همکاری خود را آزاد کنید
          </h2>
          <p className="text-body text-muted-foreground">
            مزایای فرآیند ساده‌شده را تجربه کنید؛ طراحی‌شده برای بهره‌وری و
            موفقیت بیشتر.
          </p>
        </div>

        <div className="mx-auto mt-10 w-full max-w-6xl grid gap-2.5 sm:mt-14 lg:grid-cols-3 lg:gap-4">
          {/* ستون چپ — موبایل: اول */}
          <div className="flex flex-col gap-2.5 lg:gap-3">
            {leftCards.map((card, index) => (
              <div
                key={index}
                className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4 sm:p-6"
              >
                <div className="flex items-center gap-2.5">
                  <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted sm:size-12">
                    <card.icon className="h-5 w-5 sm:h-6 sm:w-6" />
                  </span>
                  <h3 className="text-heading-4 font-medium text-foreground">
                    {card.title}
                  </h3>
                </div>
                <p className="text-body-sm text-muted-foreground sm:text-body">
                  {card.description}
                </p>
              </div>
            ))}
          </div>

          {/* تصویر وسط — فقط دسکتاپ */}
          <div className="hidden items-center justify-center py-4 lg:flex lg:py-0">
            <img
              src={centerImageSrc ?? defaultCenterImage}
              alt={centerImageAlt}
              className="h-full w-full rounded-lg object-cover opacity-90"
            />
          </div>

          {/* ستون راست — موبایل: دوم */}
          <div className="flex flex-col gap-2.5 lg:gap-3">
            {rightCards.map((card, index) => (
              <div
                key={index}
                className="flex flex-col gap-3 rounded-lg border border-border bg-card p-4 sm:p-6"
              >
                <div className="flex items-center gap-2.5">
                  <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted sm:size-12">
                    <card.icon className="h-5 w-5 sm:h-6 sm:w-6" />
                  </span>
                  <h3 className="text-heading-4 font-medium text-foreground">
                    {card.title}
                  </h3>
                </div>
                <p className="text-body-sm text-muted-foreground sm:text-body">
                  {card.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { FeaturePartnershipHighlights };