'use client';

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

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

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

  if (!mounted) return null;

  const rows = 15;
  const cols = 20;

  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
      <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
        {[...Array(rows)].map((_, rowIndex) => (
          <div 
            key={rowIndex} 
            className="flex gap-3 justify-center"
            style={{ 
              transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
            }}
          >
            {[...Array(cols)].map((_, colIndex) => (
              <motion.div
                key={`${rowIndex}-${colIndex}`}
                initial={{ opacity: 0.05 }}
                animate={{ 
                  opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
                  scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
                }}
                transition={{ 
                  duration: 5 + Math.random() * 5, 
                  repeat: Infinity, 
                  delay: Math.random() * 20,
                  ease: "easeInOut"
                }}
                className="w-24 h-24 md:w-40 md:h-40 bg-white/10 backdrop-blur-[2px] rounded-2xl md:rounded-3xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.07)] shrink-0"
              />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};