import { ArrowRight } from "lucide-react";
import React from "react";

import {
  DraggableCardBody,
  DraggableCardContainer,
} from "@/components/aceternity/draggable-card";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero244Props {
  className?: string;
}

const Hero244 = ({ className }: Hero244Props) => {
  const items = [
    {
      title: "مجموعه کنترلر",
      image:
        "/block-media/shadcnblocks/block/guri3/img12.jpeg",
      className: "absolute top-10 left-[20%] rotate-[-5deg]",
    },
    {
      title: "مجموعه ژوئن",
      image:
        "/block-media/shadcnblocks/block/guri3/img6.jpeg",
      className: "absolute top-40 left-[25%] rotate-[-7deg]",
    },
    {
      title: "حال‌وهوای تابستان",
      image:
        "/block-media/shadcnblocks/block/guri3/img8.jpeg",
      className: "absolute top-5 left-[40%] rotate-[8deg]",
    },
    {
      title: "سبک شهری",
      image:
        "/block-media/shadcnblocks/block/guri3/img9.jpeg",
      className: "absolute top-32 left-[55%] rotate-[10deg]",
    },
    {
      title: "نسخه کلاسیک",
      image:
        "/block-media/shadcnblocks/block/guri3/img3.jpeg",
      className: "absolute top-20  lg:right-[35%] rotate-[2deg]",
    },
    {
      title: "سری پریمیوم",
      image:
        "/block-media/shadcnblocks/block/guri3/img13.jpeg",
      className: "absolute top-24 left-[45%] rotate-[-7deg]",
    },
    {
      title: "نسخه محدود",
      image:
        "/block-media/shadcnblocks/block/guri3/img7.jpeg",
      className: "absolute top-8 left-[30%] rotate-[4deg]",
    },
  ];

  return (
    <section
      className={cn(
        "relative grid w-screen overflow-hidden border py-32 lg:min-h-screen",
        className,
      )}
    >
      <div className="relative z-10 container h-full grid-cols-1 items-center justify-center gap-10 lg:grid lg:grid-cols-2">
        <div className="flex flex-col items-center justify-center text-center lg:items-start lg:text-start">
          <h1 className="font-calSans max-w-lg text-2xll">
            کنترل کامل محصول سامانه ابری خود را در اختیار بگیرید
                                </h1>
          <p className="mt-10 max-w-md text-muted-foreground">
            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
                                </p>

          <div className="mt-10 flex gap-5">
            <Button className="h-11 rounded-xl">
              دسترسی نامحدود <ArrowRight className="-rotate-45 rtl:rotate-180" />
            </Button>
            <Button className="h-11 rounded-xl" variant="secondary">
              آشنایی بیشتر <ArrowRight className="-rotate-45 rtl:rotate-180" />
            </Button>
          </div>
        </div>
        <DraggableCardContainer className="relative flex h-[80vh] w-full items-center justify-center lg:h-full">
          <p className="font-calSans absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-xl text-muted-foreground">
            به نسخه حرفه‌ای کتابخانه کامپوننت دسترسی پیدا کنید
                                </p>
          {items.map((item) => (
            <DraggableCardBody
              key={item.title}
              className={cn(
                item.className,
                "-translate-x-20 scale-75 rounded-2xl p-3 lg:translate-x-0 lg:scale-100",
              )}
            >
              <img
                src={item.image}
                alt={item.title}
                className="pointer-events-none relative z-10 h-82 w-80 rounded-2xl object-cover"
              />
              <h3 className="mt-4 text-center text-xl tracking-tighter">
                {item.title}
              </h3>
            </DraggableCardBody>
          ))}
        </DraggableCardContainer>
      </div>
      <div className="absolute inset-0 flex h-full w-full items-center justify-between">
        {Array.from({ length: 7 }).map((_, index) => (
          <div key={index} className="h-full w-px bg-border"></div>
        ))}
      </div>
    </section>
  );
};

export { Hero244 };