"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { useState } from "react";

type BentoItem = {
  title: string;
  description: string;
  image: string;
  link: string;
  className?: string;
};

const items: BentoItem[] = [
  {
    title: "Luxury Stone Flooring",
    description:
      "Experience the timeless elegance of natural stone flooring. Perfect for creating serene, high-end living spaces with durability that lasts generations.",
    image: "/images/bento-grid/stone-flooring.png",
    link: "#",
  },
  {
    title: "Modern Brick Facades",
    description:
      "Redefine exterior aesthetics with contemporary brick patterns. A blend of tradition and modern design.",
    image: "/images/bento-grid/brick-facade.png",
    link: "#",
  },
  {
    title: "Resort-Style Pools",
    description:
      "Transform your backyard into a luxury retreat with textured stone decks.",
    image: "/images/bento-grid/stone-pool.png",
    link: "#",
  },
];

const ChangingBentoGrid = () => {
  const [orderedItems, setOrderedItems] = useState(items);

  const activateItem = (clicked: BentoItem) => {
    setOrderedItems((prev) => {
      const rest = prev.filter((i) => i.title !== clicked.title);
      return [clicked, ...rest]; // bring clicked to the front
    });
  };

  return (
    <section className={cn("bg-zinc-50 px-4 py-20 md:px-8 dark:bg-zinc-950")}>
      <div className={cn("mx-auto max-w-7xl")}>
        <div className={cn("grid auto-rows-[300px] gap-4 md:grid-cols-3")}>
          {orderedItems.map((item, index) => {
            const isActive = index === 0;
            return (
              <motion.div
                key={item.title}
                layout
                transition={{
                  duration: 0.6,
                  ease: [0.52, 1, 0.16, 1],
                }}
                className={cn(
                  "group relative overflow-hidden rounded-xl",
                  isActive
                    ? "col-span-1 row-span-2 md:col-span-2"
                    : "col-span-1 row-span-1",
                )}
                onClick={() => activateItem(item)}
              >
                {/* Image Background */}
                <div className={cn("absolute inset-0")}>
                  <Image
                    src={item.image}
                    alt={item.title}
                    fill
                    className={cn(
                      "object-cover transition-transform duration-700 group-hover:scale-105",
                    )}
                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  />

                  {/* Gradient Overlay - Always visible but darker on bottom */}
                  <div
                    className={cn(
                      "absolute inset-0 bg-linear-to-t from-black/90 via-black/40 to-transparent opacity-80 transition-opacity duration-300 group-hover:opacity-90",
                    )}
                  />
                </div>

                {/* Content */}
                <div
                  className={cn(
                    "relative flex h-full flex-col justify-end p-6 md:p-8",
                  )}
                >
                  <div
                    className={cn(
                      "translate-y-2 transform transition-transform duration-300 group-hover:translate-y-0",
                    )}
                  >
                    <div
                      className={cn(
                        "mb-3 flex items-center justify-between gap-4",
                      )}
                    >
                      <h3
                        className={cn(
                          "text-xl font-bold text-white md:text-2xl",
                        )}
                      >
                        {item.title}
                      </h3>
                      <Link
                        href={item.link}
                        className={cn(
                          "-translate-x-2 rounded-full bg-white/10 p-2 text-white opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100 hover:bg-white/20",
                        )}
                      >
                        <ArrowUpRight className={cn("h-5 w-5")} />
                      </Link>
                    </div>

                    <p
                      className={cn(
                        "h-0 text-sm text-zinc-300 opacity-0 transition-all duration-300 group-hover:h-auto group-hover:opacity-100",
                      )}
                    >
                      {item.description}
                    </p>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default ChangingBentoGrid;
Changing Bento Grid

Luxury Stone Flooring

Modern Brick Facades

Resort-Style Pools
