frontend/components/feature-grid.tsx

const features = [
  {
    title: "Agent Orchestrator",
    description:
      "Observability for the FastAPI orchestrator: intents, tool routing, red-flag blocking, and reasoning traces.",
    tag: "backend/api/services/agent_orchestrator.py",
  },
  {
    title: "Knowledge RAG MCP",
    description:
      "Ingest docs, embed with MiniLM, and search tenant-scoped corpora via pgvector—all from the UI.",
    tag: "backend/mcp_server/server.py",
  },
  {
    title: "Governance Policies",
    description:
      "Create, test, and ship regex + semantic rule packs that instantly sync to Admin MCP and Celery alerts.",
    tag: "backend/api/services/redflag_detector.py",
  },
  {
    title: "Analytics + Workers",
    description:
      "Monitor Celery ingestion throughput, tool usage trends, and daily compliance KPIs in one glance.",
    tag: "backend/workers/*",
  },
];

export function FeatureGrid() {
  return (
    <section className="grid gap-6 md:grid-cols-2">
      {features.map((feature) => (
        <article
          key={feature.title}
          className="glass-panel flex flex-col justify-between p-6 transition hover:-translate-y-1 hover:border-cyan-300/50"
        >
          <div>
            <p className="text-xs uppercase tracking-[0.3em] text-slate-400">
              {feature.tag}
            </p>
            <h3 className="mt-4 text-2xl font-semibold text-white">
              {feature.title}
            </h3>
            <p className="mt-4 text-base text-slate-300">
              {feature.description}
            </p>
          </div>
          <div className="mt-6 inline-flex items-center gap-2 text-sm text-cyan-200">
            <span className="h-1.5 w-1.5 rounded-full bg-cyan-400" />
            Ready to run
          </div>
        </article>
      ))}
    </section>
  );
}