frontend/components/hero.tsx

import Link from "next/link";

const stats = [
  { label: "Multi-tenant agents", value: "3 MCPs" },
  { label: "Policies enforced", value: "128 rules" },
  { label: "Avg. response time", value: "1.8s" },
];

export function Hero() {
  return (
    <section className="relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-slate-900 via-slate-900/70 to-cyan-900/40 p-10 text-white shadow-2xl">
      <div className="grid gap-12 md:grid-cols-[1.2fr,0.8fr]">
        <div className="space-y-8">
          <span className="badge">
            <span className="h-2 w-2 rounded-full bg-cyan-400" />
            realtime oversight
          </span>
          <h1 className="text-4xl font-semibold leading-tight md:text-5xl">
            Run chat agents, red-flag governance, and analytics from a single
            console.
          </h1>
          <p className="text-lg text-slate-200">
            IntegraChat brings together the FastAPI backend, MCP tool servers,
            and compliance automation into a cohesive operator experience.
            Trigger conversations, inspect tool traces, and stream policy
            alerts—without leaving the browser.
          </p>
          <div className="flex flex-wrap gap-4 text-base font-medium">
            <Link
              href="#chat"
              className="rounded-full bg-white/90 px-6 py-3 text-slate-900 shadow-lg shadow-cyan-500/30 transition hover:-translate-y-0.5 hover:bg-white"
            >
              Launch chat workspace
            </Link>
            <Link
              href="#analytics"
              className="rounded-full border border-white/30 px-6 py-3 text-white transition hover:border-cyan-300/70 hover:text-cyan-100"
            >
              View governance metrics
            </Link>
          </div>
        </div>
        <div className="glass-panel p-6">
          <p className="text-sm uppercase tracking-[0.3em] text-cyan-200/70">
            Stack Snapshot
          </p>
          <ul className="mt-6 space-y-4 text-sm text-slate-100">
            <li className="flex items-center justify-between rounded-2xl bg-white/5 px-4 py-3">
              <div>
                <p className="text-xs uppercase tracking-wider text-slate-300">
                  API Gateway
                </p>
                <p className="font-semibold text-white">FastAPI 0.110 + CORS</p>
              </div>
              <span className="text-xs text-slate-300">backend/api</span>
            </li>
            <li className="flex items-center justify-between rounded-2xl bg-white/5 px-4 py-3">
              <div>
                <p className="text-xs uppercase tracking-wider text-slate-300">
                  MCP Servers
                </p>
                <p className="font-semibold text-white">
                  RAG · Web · Admin policy
                </p>
              </div>
              <span className="text-xs text-slate-300">ports 8001-8003</span>
            </li>
            <li className="flex items-center justify-between rounded-2xl bg-white/5 px-4 py-3">
              <div>
                <p className="text-xs uppercase tracking-wider text-slate-300">
                  Workers
                </p>
                <p className="font-semibold text-white">
                  Celery ingestion + analytics
                </p>
              </div>
              <span className="text-xs text-slate-300">beat + workers</span>
            </li>
          </ul>
          <div className="mt-6 grid gap-4 rounded-2xl border border-white/10 bg-slate-900/30 p-5 text-center sm:grid-cols-3">
            {stats.map((stat) => (
              <div key={stat.label}>
                <p className="text-2xl font-semibold text-white">
                  {stat.value}
                </p>
                <p className="text-xs uppercase tracking-wider text-slate-400">
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="pointer-events-none absolute inset-0 opacity-40">
        <div className="grid-fade" />
      </div>
    </section>
  );
}