export default function KnowledgeMesh() {
  return (
    <div className="xl:col-span-2 glass-card p-6 rounded-2xl relative overflow-hidden">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h3 className="text-sm font-bold tracking-tight text-white uppercase">
            Global Knowledge Mesh
          </h3>
          <p className="text-[10px] font-mono-data mt-1 uppercase" style={{ color: "rgba(249,245,248,0.4)" }}>
            Cross-Source Entity Integration / Real-time Feed
          </p>
        </div>
        <div>
          <span
            className="px-2 py-1 rounded text-[10px] font-mono-data"
            style={{
              backgroundColor: "#131315",
              border: "1px solid rgba(167,139,250,0.2)",
              color: "#A78BFA",
            }}
          >
            KNOWLEDGE_GRAPH
          </span>
        </div>
      </div>

      {/* Visualization area */}
      <div
        className="h-64 w-full rounded-xl flex items-center justify-center relative overflow-hidden"
        style={{
          backgroundColor: "rgba(0,0,0,0.3)",
          border: "1px solid rgba(255,255,255,0.05)",
        }}
      >
        {/* Dot grid background */}
        <div className="absolute inset-0 opacity-20 pointer-events-none">
          <div className="absolute inset-0 dot-grid" />
        </div>

        {/* Animated SVG node network */}
        <svg
          className="absolute inset-0 w-full h-full opacity-20"
          viewBox="0 0 600 256"
          preserveAspectRatio="xMidYMid slice"
        >
          {/* Connection lines */}
          <line x1="300" y1="128" x2="180" y2="80" stroke="#A78BFA" strokeWidth="0.5" />
          <line x1="300" y1="128" x2="420" y2="80" stroke="#A78BFA" strokeWidth="0.5" />
          <line x1="300" y1="128" x2="180" y2="176" stroke="#A78BFA" strokeWidth="0.5" />
          <line x1="300" y1="128" x2="420" y2="176" stroke="#A78BFA" strokeWidth="0.5" />
          <line x1="180" y1="80" x2="90" y2="50" stroke="#A78BFA" strokeWidth="0.3" />
          <line x1="420" y1="80" x2="510" y2="50" stroke="#A78BFA" strokeWidth="0.3" />
          <line x1="180" y1="176" x2="90" y2="206" stroke="#A78BFA" strokeWidth="0.3" />
          <line x1="420" y1="176" x2="510" y2="206" stroke="#A78BFA" strokeWidth="0.3" />
          {/* Secondary nodes */}
          <circle cx="180" cy="80" r="3" fill="#A78BFA" opacity="0.6" />
          <circle cx="420" cy="80" r="3" fill="#A78BFA" opacity="0.6" />
          <circle cx="180" cy="176" r="3" fill="#A78BFA" opacity="0.6" />
          <circle cx="420" cy="176" r="3" fill="#A78BFA" opacity="0.6" />
          <circle cx="90" cy="50" r="2" fill="#A78BFA" opacity="0.4" />
          <circle cx="510" cy="50" r="2" fill="#A78BFA" opacity="0.4" />
          <circle cx="90" cy="206" r="2" fill="#A78BFA" opacity="0.4" />
          <circle cx="510" cy="206" r="2" fill="#A78BFA" opacity="0.4" />
        </svg>

        {/* Central pulsing node */}
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="relative">
            <div
              className="w-4 h-4 rounded-full active-pulse"
              style={{ backgroundColor: "#A78BFA" }}
            />
            <div
              className="absolute top-6 -left-12 backdrop-blur-md px-3 py-1 rounded text-[10px] font-mono-data text-white whitespace-nowrap"
              style={{
                backgroundColor: "rgba(19,19,21,0.8)",
                border: "1px solid rgba(167,139,250,0.2)",
              }}
            >
              ENTITY_CLUSTER_09
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}