const signals = [
  {
    icon: "warning",
    time: "T-2m ago",
    message:
      "Unusual spike in security mentions in DevOps channels. Analyzing 12 recent signals...",
    tag: "Security Risk",
    borderOpacity: "border-l-[3px]",
    borderColor: "rgba(167,139,250,0.3)",
  },
  {
    icon: "check_circle",
    time: "T-14m ago",
    message:
      "High consensus reached on Microservices architecture for project 'Aurora'. 95% alignment.",
    tag: "Consensus Met",
    borderOpacity: "border-l-[3px]",
    borderColor: "#A78BFA",
  },
  {
    icon: "campaign",
    time: "T-1h ago",
    message:
      "New 'ThirdEye Sovereign' feature mentioned across all leadership streams. Tracking adoption...",
    tag: "Brand Sync",
    borderOpacity: "border-l-[3px]",
    borderColor: "rgba(167,139,250,0.5)",
  },
  {
    icon: "psychology_alt",
    time: "T-2h ago",
    message:
      "Ongoing trend: Focus shift to AI-assisted development across 5 engineering squads.",
    tag: "Trend Vector",
    borderOpacity: "border-l-[3px]",
    borderColor: "rgba(167,139,250,0.7)",
  },
];

export default function LiveSignals() {
  return (
    <section className="space-y-6">
    <div>
      <div className="flex items-center gap-3 mb-4 animate-fade-in-right delay-300">
        <div className="w-2 h-2 rounded-full bg-[#A78BFA] shadow-[0_0_10px_#A78BFA] animate-pulse"></div>
        <h3 className="text-xs font-semibold tracking-widest text-zinc-400 uppercase">Live Signals Stream</h3>
        <div className="ml-auto flex gap-2">
          <button className="text-zinc-500 hover:text-[#A78BFA] transition-colors btn-interactive"><span className="material-symbols-outlined text-sm">filter_list</span></button>
          <button className="text-zinc-500 hover:text-[#A78BFA] transition-colors btn-interactive"><span className="material-symbols-outlined text-sm">sort</span></button>
        </div>
      </div>
      <div className="grid grid-cols-4 gap-4 animate-fade-in-up delay-400">
        {signals.map((s, idx) => (
          <div key={idx} className="glass rounded-xl p-4 border border-white/5 hover:border-[#A78BFA]/30 hover:bg-white/5 transition-all group card-interactive flex flex-col justify-between min-h-[140px]" style={{ animationDelay: `${400 + idx * 100}ms` }}>
            <div className="flex justify-between items-start mb-6">
              <div
                className="p-2.5 rounded-lg"
                style={{ backgroundColor: "rgba(167,139,250,0.1)" }}
              >
                <span className="material-symbols-outlined" style={{ color: "#A78BFA", fontSize: "22px" }}>
                  {s.icon}
                </span>
              </div>
              <span className="text-[10px] text-zinc-400 uppercase tracking-tighter">{s.time}</span>
            </div>

            <p className="text-[14px] font-medium text-zinc-200 leading-relaxed mb-8">
              {s.message}
            </p>

            <div className="mt-auto flex items-center justify-between">
              <span className="text-[10px] font-bold uppercase tracking-[0.1em]" style={{ color: "#A78BFA" }}>
                {s.tag}
              </span>
              <span className="material-symbols-outlined text-zinc-500 group-hover:text-[#A78BFA] transition-all cursor-pointer" style={{ fontSize: "22px" }}>
                arrow_forward
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
    </section>
  );
}