import { Clock, Zap } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const AVATAR_IDS = ["1", "2", "3", "4", "5"] as const;

interface Feature261Props {
  className?: string;
}

const Feature261 = ({ className }: Feature261Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12">
          <div className="relative h-60 overflow-hidden rounded-3xl md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
            <img
              src="/block-media/shadcnblocks/block/photos/Minimalist Concrete Wall with Shadows.jpeg"
              alt="گزارش مالی یکپارچه"
              className="absolute inset-0 size-full object-cover"
            />
            <div className="absolute inset-0" />
            <div className="absolute start-6 bottom-6 z-10 text-white">
              <p className="text-lg font-medium text-balance">
                گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
              </p>
            </div>
            <div className="absolute end-6 top-6 z-10">
              <div className="flex size-10 items-center justify-center rounded-full bg-white/20">
                <Zap className="size-5 text-white" />
              </div>
            </div>
          </div>

          <div className="relative h-60 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="داشبورد ERP"
              className="absolute inset-0 size-full object-cover"
            />
            <div className="absolute start-6 end-6 bottom-6 z-10 text-start">
              <h2 className="text-sm leading-tight font-medium text-balance md:text-base lg:text-xl">
                عملیات سازمان را یکپارچه کنید
              </h2>
            </div>
          </div>

          <Card className="col-span-1 rounded-3xl md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
            <CardContent className="flex h-full flex-col justify-center p-4 text-start md:p-6">
              <div className="mb-2 text-xl font-bold md:text-xl lg:text-2xll">
                ۹۵
                <span className="align-top text-xl md:text-xl lg:text-3xl">
                  ٪
                </span>
              </div>
              <p className="text-sm leading-tight text-pretty md:text-sm">
                مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
                <br />
                گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
              </p>
            </CardContent>
          </Card>

          <div className="relative col-span-1 h-60 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="مدیریت عملیات"
              className="absolute inset-0 size-full object-cover"
            />
          </div>

          <Card className="col-span-1 rounded-3xl bg-muted md:col-span-4 md:row-span-1 md:h-[300px] lg:col-span-4">
            <CardContent className="h-full p-4 text-start md:p-5">
              <div className="flex h-full flex-col justify-end">
                <div className="space-y-2">
                  <div className="text-xl font-normal md:text-2xll lg:text-2xll">
                    یکپارچگی
                  </div>
                  <div className="text-muted-foreground">
                    گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
                  </div>
                  <Button>مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.</Button>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="col-span-1 rounded-3xl md:col-span-2 md:row-span-1 md:h-[300px] lg:col-span-3">
            <CardContent className="flex h-full flex-col justify-center p-4 text-start md:p-5">
              <div className="mb-3">
                <span className="text-xl font-bold md:text-3xl lg:text-2xll">
                  ERP
                </span>
                <span className="align-top text-xl font-bold md:text-xl lg:text-3xl">
                  +
                </span>
              </div>
              <p className="mb-4 text-sm md:text-sm">ERP</p>
              <div className="flex -space-x-2 rtl:space-x-reverse">
                {AVATAR_IDS.map((id) => (
                  <Avatar
                    key={id}
                    className="size-8 border-2 border-border md:size-8 lg:size-10"
                  >
                    <AvatarImage
                      src={`/block-media/shadcnblocks/block/avatar-${id}.webp`}
                      alt={`نمای عضو تیم ${id}`}
                    />
                    <AvatarFallback>ت{id}</AvatarFallback>
                  </Avatar>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card className="relative col-span-1 h-60 overflow-hidden rounded-3xl md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-5">
            <img
              src="/block-media/shadcnblocks/block/placeholder-3.svg"
              alt="گزارش مالی یکپارچه"
              className="absolute inset-0 size-full object-cover"
            />
          </Card>

          <Card className="relative col-span-1 h-60 overflow-hidden rounded-3xl md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-4">
            <img
              src="/block-media/shadcnblocks/block/photos/Geometric Staircase and Concrete Wall.jpeg"
              alt="داشبورد ERP"
              className="absolute inset-0 size-full object-cover"
            />
            <div className="absolute inset-0 bg-linear-to-r from-black/60 via-black/30 to-transparent rtl:bg-linear-to-l" />
            <div className="absolute inset-0 z-10 flex items-center justify-start p-4 md:p-6">
              <div className="text-start text-white">
                <div className="mb-2 flex items-center gap-2 md:gap-3">
                  <div className="flex size-6 items-center justify-center rounded-full bg-white/20 md:size-7">
                    <Clock className="size-3 md:size-4" />
                  </div>
                  <span className="text-base font-semibold md:text-lg">
                    ERP
                  </span>
                </div>
                <p className="text-sm text-pretty opacity-90 md:text-sm">
                  گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
                  <br />
                  <span className="text-sm font-semibold md:text-sm">
                    از خرید تا فروش در یک سیستم
                  </span>
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Feature261 };