"use client";

import React, { useEffect, useState } from "react";
import { m } from "framer-motion";

export const TileGrid = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  const rows = 7;
  const cols = 8;

  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
      <div className="flex flex-col gap-8 md:gap-12 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
        {[...Array(rows)].map((_, rowIndex) => (
          <div
            key={rowIndex}
            className="flex gap-8 md:gap-12 justify-center"
            style={{
              transform:
                rowIndex % 2 === 0 ? "translateX(0)" : "translateX(100px)",
            }}
          >
            {[...Array(cols)].map((_, colIndex) => (
              <m.div
                key={`${rowIndex}-${colIndex}`}
                initial={{ opacity: 0.03 }}
                animate={{
                  opacity: [0.03, Math.random() > 0.8 ? 0.15 : 0.03, 0.03],
                  scale: [1, Math.random() > 0.8 ? 1.02 : 1, 1],
                }}
                transition={{
                  duration: 8 + Math.random() * 8,
                  repeat: Infinity,
                  delay: Math.random() * 15,
                  ease: "easeInOut",
                }}
                className="w-32 h-32 md:w-56 md:h-56 bg-white/5 rounded-3xl md:rounded-[3rem] border border-white/10 shadow-[0_8px_32px_0_rgba(31,38,135,0.03)] shrink-0 will-change-transform"
              />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};