'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;

  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[5]">
      {/* The lighting tiles (actual squares) */}
      <div className="absolute inset-0 grid grid-cols-8 md:grid-cols-12 grid-rows-8 md:grid-rows-12">
        {[...Array(144)].map((_, i) => (
          <motion.div
            key={i}
            initial={{ opacity: 0 }}
            animate={{ 
              opacity: [0, Math.random() > 0.92 ? 0.4 : 0, 0],
            }}
            transition={{ 
              duration: 3 + Math.random() * 4, 
              repeat: Infinity, 
              delay: Math.random() * 10,
              ease: "easeInOut"
            }}
            className="w-full h-full bg-accent/20 border border-accent/5"
          />
        ))}
      </div>
    </div>
  );
};