"use client";

import { motion } from "framer-motion";

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

const galleryColumns = [
  [
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
  ],
  [
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
  ],
  [
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
  ],
  [
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
  ],
  [
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
  ],
];

interface Hero234bProps {
  className?: string;
}

const Hero234b = ({ className }: Hero234bProps) => {
  return (
    <section
      className={cn(
        "relative min-h-screen overflow-hidden bg-background",
        className,
      )}
    >
      <div className="absolute inset-0 flex justify-center gap-6">
        {galleryColumns.map((column, columnIndex) => (
          <motion.div
            key={columnIndex}
            className="flex flex-col gap-6 will-change-transform"
            animate={{
              y: columnIndex % 2 === 0 ? [-1200, 0] : [0, -1200],
            }}
            transition={{
              duration: 20 + columnIndex * 3,
              repeat: Infinity,
              ease: "linear",
            }}
          >
            {[...column, ...column, ...column].map((image, imageIndex) => (
              <motion.div
                key={`${columnIndex}-${imageIndex}`}
                className="relative flex-shrink-0 overflow-hidden rounded-xl"
                style={{
                  width: columnIndex === 2 ? "200px" : "160px",
                  height: columnIndex === 2 ? "280px" : "220px",
                }}
                whileHover={{
                  scale: 1.05,
                  rotate: columnIndex % 2 === 0 ? 2 : -2,
                  zIndex: 20,
                }}
                transition={{ duration: 0.3 }}
              >
                <img
                  src={image}
                  alt="تصویر نمونه"
                  className="h-full w-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
              </motion.div>
            ))}
          </motion.div>
        ))}
      </div>

      {/* Top and bottom masks */}
      <div className="absolute top-0 left-0 z-10 h-[200px] w-full bg-gradient-to-b from-background via-background/80 to-transparent md:h-[300px]" />
      <div className="absolute bottom-0 left-0 z-10 h-[200px] w-full bg-gradient-to-t from-background via-background/80 to-transparent md:h-[300px]" />

      {/* Side masks for additional focus */}
      <div className="absolute top-0 left-0 z-10 h-full w-[80px] bg-gradient-to-r from-background/60 to-transparent md:w-[120px]" />
      <div className="absolute top-0 right-0 z-10 h-full w-[80px] bg-gradient-to-l from-background/60 to-transparent md:w-[120px]" />

      <div className="relative z-20 flex min-h-screen items-center justify-center">
        <motion.div
          className="max-w-md rounded-xl bg-black/70 p-8 text-center backdrop-blur-lg md:p-12"
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.5, type: "spring" }}
        >
          <motion.h1
            className="text-3xl leading-tight text-white md:text-2xll lg:text-2xll"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.7 }}
          >
            استودیویی برای <br />
            طراحی دیجیتال <br />
            می‌آفریند
                                </motion.h1>

          <motion.p
            className="mt-4 text-white/80"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.9 }}
          >
            جایی که ایده‌ها به تجربه‌های دیجیتال ماندگار تبدیل می‌شوند.
                                </motion.p>

          <motion.div
            className="mt-6"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 1 }}
          >
            <Button size="lg" variant="secondary" className="w-full">
              مشاهده مطالعات موردی
                                      </Button>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export { Hero234b };