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 min-w-0">
        <div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12">
          <div className="relative h-60 min-w-0 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/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg"
              alt="گزارش مالی یکپارچه"
              className="absolute inset-0 size-full object-cover"
            />
            <div className="absolute inset-0" />
            <div className="absolute inset-x-6 bottom-6 z-10 max-w-full text-white">
              <p className="text-lg leading-snug font-medium text-balance break-words">
                گزارش یکپارچه، سهم هر بخش از سودآوری را شفاف می‌کند.
              </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 min-w-0 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 inset-x-6 bottom-6 z-10 max-w-full text-start">
              <h2 className="text-sm leading-snug font-medium text-balance break-words md:text-base lg:text-xl">
                عملیات سازمان را یکپارچه کنید
              </h2>
            </div>
          </div>

          <Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
            <CardContent className="flex h-full min-w-0 flex-col justify-center gap-2 p-4 text-start md:p-5">
              <div className="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="line-clamp-4 text-sm leading-snug text-pretty break-words text-muted-foreground">
                مالی، انبار، خرید و فروش در یک پلتفرم؛ تصمیم‌گیری سریع‌تر با دید end-to-end.
              </p>
            </CardContent>
          </Card>

          <div className="relative col-span-1 h-60 min-w-0 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 min-w-0 overflow-hidden rounded-3xl bg-muted py-0 md:col-span-4 md:row-span-1 md:h-[300px] lg:col-span-4">
            <CardContent className="flex h-full min-w-0 flex-col justify-end gap-3 p-4 text-start md:p-5">
              <div className="min-w-0 space-y-2">
                <div className="text-xl font-normal md:text-2xll">
                  یکپارچگی
                </div>
                <p className="line-clamp-3 text-sm leading-snug text-pretty break-words text-muted-foreground md:text-base">
                  ببینید کدام بخش بیشترین تأثیر را روی سودآوری دارد.
                </p>
                <Button className="max-w-full">مشاهده گزارش‌ها</Button>
              </div>
            </CardContent>
          </Card>

          <Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-2 md:row-span-1 md:h-[300px] lg:col-span-3">
            <CardContent className="flex h-full min-w-0 flex-col justify-center gap-3 p-4 text-start md:p-5">
              <div>
                <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="text-sm text-muted-foreground">تیم عملیات</p>
              <div className="flex min-w-0 flex-wrap -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 min-w-0 overflow-hidden rounded-3xl py-0 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 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-4">
            <img
              src="/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg"
              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="min-w-0 max-w-full text-start text-white">
                <div className="mb-2 flex items-center gap-2 md:gap-3">
                  <div className="flex size-6 shrink-0 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="line-clamp-4 text-sm leading-snug text-pretty break-words opacity-90">
                  گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند.
                  <br />
                  <span className="font-semibold">از خرید تا فروش در یک سیستم</span>
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { Feature261 };