"use client";

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

const imgPaths = [
  "/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg",
  "/block-media/shadcnblocks/block/photos/vasilis-karkalas-LadCWrSL7X8-unsplash.jpg",
  "/block-media/shadcnblocks/block/photos/vanessa-werder-LjFEoGuj5eY-unsplash.jpg",
  "/block-media/shadcnblocks/block/photos/vanessa-werder-4G228Duzmn8-unsplash.jpg",
];

interface Projects16Props {
  className?: string;
}

const Projects16 = ({ className }: Projects16Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="mb-12 text-start text-xl leading-tight font-medium md:text-3xl">کشف امکانات بلاک‌ها،<br />ساخت تجربه‌هایی روان و<br />بلاک Hero چشمگیر در تم روشن</h1>

        <div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-2">
          <div className="space-y-4">
            <img
              src={imgPaths[0]}
              alt="بلاک Hero آرام با فضای خالی فراوان"
              className="aspect-[4/3] w-full rounded-lg object-cover"
            />
            <img
              src={imgPaths[2]}
              alt="گرادیان نرم پس‌زمینه بلاک Hero"
              className="aspect-[4/5] w-full rounded-lg object-cover"
            />
          </div>

          <div className="space-y-4">
            <img
              src={imgPaths[1]}
              alt="کارت‌های رنگی روی پس‌زمینه روشن"
              className="aspect-[4/5] w-full rounded-lg object-cover"
            />
            <img
              src={imgPaths[3]}
              alt="از موبایل تا دسکتاپ، یکدست و واکنش‌گرا."
              className="aspect-[4/3] w-full rounded-lg object-cover"
            />
          </div>
        </div>

        <div className="max-w-md text-start">
          <p className="mb-4 text-muted-foreground">تجربه کاربری همواره در حال تکامل است و بی‌پایان الهام‌بخش. از یک میکروانیمیشن ساده تا یک داشبورد پیچیده، هر روز الگویی تازه برای ساختن و بهبود می‌آورد.</p>
          <Button variant="link" className="h-auto px-0 text-sm font-medium">
            کشف بیشتر{" "}
            <span className="inline-block rtl:rotate-180" aria-hidden>
              →
            </span>
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Projects16 };