export function GridBackground() {
  return (
    <div className="relative w-full h-80 flex items-center justify-center bg-[#050505] overflow-hidden rounded-2xl border border-border">
      {/* CSS Grid Pattern */}
      <div 
        className="absolute inset-0 z-0 pointer-events-none"
        style={{
          backgroundImage: `linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px)`,
          backgroundSize: '32px 32px'
        }}
      />
      {/* Radial Gradient Mask to fade out the edges */}
      <div className="absolute inset-0 bg-[#050505] [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black_70%)] z-0 pointer-events-none" />
      
      <div className="relative z-10 flex flex-col items-center">
        <h3 className="text-3xl font-medium tracking-tight text-foreground">Retro Grid</h3>
        <p className="text-muted-foreground mt-2 max-w-xs text-center text-sm">
          A subtle, vanishing grid background created entirely with CSS background gradients and masks.
        </p>
      </div>
    </div>
  );
}