"use client";

import React from "react";

export function TechGrid({ className = "" }: { className?: string }) {
  return (
    <div
      className={`pointer-events-none absolute inset-0 overflow-hidden opacity-40 dark:opacity-25 ${className}`}
      aria-hidden="true"
    >
      {/* Radial green ambient glow */}
      <div className="absolute -top-[20%] -left-[10%] h-[600px] w-[600px] rounded-full bg-[#024d37]/15 dark:bg-[#024d37]/20 blur-[120px]" />
      <div className="absolute top-[30%] -right-[15%] h-[500px] w-[500px] rounded-full bg-[#024d37]/10 dark:bg-[#024d37]/15 blur-[140px]" />

      {/* Grid Pattern Lines */}
      <div
        className="h-full w-full opacity-60"
        style={{
          backgroundImage: `linear-gradient(to right, #024d37 1px, transparent 1px), linear-gradient(to bottom, #024d37 1px, transparent 1px)`,
          backgroundSize: "64px 64px",
          maskImage: "radial-gradient(ellipse at center, black 40%, transparent 80%)",
          WebkitMaskImage: "radial-gradient(ellipse at center, black 40%, transparent 80%)",
        }}
      />
    </div>
  );
}