import React from "react";

const Background = () => {
  return (
    <div className="fixed inset-0 z-0 bg-indigo-950 flex flex-col items-center justify-center overflow-hidden">
      {/* Background pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="grid grid-cols-12 h-full">
          {Array(60)
            .fill()
            .map((_, i) => (
              <div
                key={i}
                className="text-xs font-mono text-purple-300 p-2 overflow-hidden"
              >
                {`$ sudo apt upgrade\n> updating system...\n$ cd ~/projects\n$ vim main.cpp\n$ gcc -Wall main.cpp\n$ ./a.out\n$ ps aux | grep chrome\n$ kill -9 1337\n`}
              </div>
            ))}
        </div>
      </div>

      {/* Funny Linux/Windows tiles */}

      {/* Footer quote */}
      <div className="absolute bottom-4 text-center text-purple-300 px-4 max-w-2xl">
        <p className="text-lg font-semibold italic">
          "Imagine using an OS that needs antivirus software to protect itself
          from itself."
        </p>
        <p className="text-sm mt-2">— Every Linux User Ever</p>
      </div>
    </div>
  );
};

// Tile component for each funny caption
const FunnyTile = ({ icon, title, description }) => {
  return (
    <div className="bg-purple-900 bg-opacity-30 backdrop-blur-sm p-4 rounded-lg border border-purple-700 transition-all duration-300 hover:bg-opacity-50 hover:scale-105">
      <div className="text-4xl mb-2">{icon}</div>
      <h3 className="text-xl font-bold text-purple-300 mb-2">{title}</h3>
      <p className="text-gray-300 text-sm">{description}</p>
    </div>
  );
};

export default Background;
