'use client';

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

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

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

  if (!mounted) {
    return (
      <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
        <div className="absolute inset-0 grid-pattern opacity-[0.15]" />
      </div>
    );
  }

  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden z-0">
      <div className="absolute inset-0 grid-pattern opacity-[0.15]" />
      
      {/* Animated Tech Lines */}
      {[...Array(5)].map((_, i) => (
        <motion.div
          key={`line-${i}`}
          initial={{ x: '-100%', opacity: 0 }}
          animate={{ x: '100%', opacity: [0, 0.4, 0] }}
          transition={{ 
            duration: 8 + i * 2, 
            repeat: Infinity, 
            ease: "linear",
            delay: i * 2
          }}
          className="absolute h-[2px] bg-gradient-to-r from-transparent via-accent/40 to-transparent w-full"
          style={{ top: `${20 * (i + 1)}%` }}
        />
      ))}

      {/* Floating Tech Squares */}
      {[...Array(8)].map((_, i) => (
        <motion.div
          key={`square-${i}`}
          initial={{ opacity: 0, scale: 0 }}
          animate={{ 
            opacity: [0, 0.2, 0],
            scale: [0, 1, 0],
            rotate: [0, 90, 180],
            x: [0, Math.random() * 200 - 100, 0],
            y: [0, Math.random() * 200 - 100, 0]
          }}
          transition={{ 
            duration: 8 + Math.random() * 4, 
            repeat: Infinity, 
            ease: "easeInOut",
            delay: i * 2
          }}
          className="absolute w-8 h-8 border border-accent/10 rounded-sm"
          style={{ 
            left: `${Math.random() * 100}%`, 
            top: `${Math.random() * 100}%` 
          }}
        />
      ))}

      {/* Pulsing Dots */}
      {[...Array(15)].map((_, i) => (
        <motion.div
          key={`dot-${i}`}
          animate={{ 
            opacity: [0.1, 0.4, 0.1],
            scale: [1, 1.5, 1]
          }}
          transition={{ 
            duration: 3 + Math.random() * 2, 
            repeat: Infinity, 
            ease: "easeInOut",
            delay: i * 0.5
          }}
          className="tech-dot"
          style={{ 
            left: `${Math.random() * 100}%`, 
            top: `${Math.random() * 100}%` 
          }}
        />
      ))}
    </div>
  );
};