import { Card } from "@/components/ui/Card";
import { Badge } from "@/components/ui/Badge";
import { LinkButton } from "@/components/ui/Button";
import { MachineOutputNotice } from "@/components/ui/MachineOutputNotice";

const SECTIONS: {
  eyebrow: string;
  title: string;
  body: string;
  points: string[];
  /** Section describes AI pipeline output — render the Gate A / A2 qualifier. */
  qualify?: boolean;
}[] = [
  {
    eyebrow: "Correlation",
    title: "Calls become incidents",
    body:
      "The correlation engine groups related transmissions — across talkgroups and even across nodes — into a single incident. A pursuit renders as a path through every checkin point heard while it moved; a structure fire or accident renders as a pin at the location dispatch gave.",
    points: [
      "Hybrid rule + LLM correlation with a cheap/smart consensus tiebreak",
      "Distance, timing, shared units, and talkgroup signals all feed the match",
      "Every call keeps its correlation debug trail for admins to audit",
    ],
    qualify: true,
  },
  {
    eyebrow: "AI pipeline",
    title: "Transcription and entity extraction",
    body:
      "Every recorded call is transcribed and scanned for the details that matter — units on scene, vehicles, and locations — so an incident reads like a dispatch briefing instead of a stack of raw audio.",
    points: [
      "Automatic speech-to-text on every call",
      "Scene & entity extraction feeds the correlator and the incident summary",
      "AI-generated incident summaries, regenerable on demand",
    ],
    qualify: true,
  },
  {
    eyebrow: "Situational awareness",
    title: "Live map, full history",
    body:
      "Glance at the map to see what's active right now, or scrub back through history to review how a specific incident unfolded — every linked call, in order, with playback.",
    points: [
      "Real-time node and incident map",
      "Per-incident call timeline with audio playback",
      "Configurable alert rules that post to Discord on keyword or talkgroup match",
    ],
  },
  {
    eyebrow: "Field hardware",
    title: "Field SDR nodes",
    body:
      "Lightweight edge nodes run OP25/GNU Radio against a P25 or analog trunked system and stream decoded audio to your account. Deploy one node to cover a town, or a whole network across a region.",
    points: [
      "P25 and analog trunked systems supported",
      "Per-node hardware tuning (gain, PPM, antenna) persists independently of system assignment",
      "Node health, call activity, and configuration all visible from the dashboard",
    ],
  },
  {
    eyebrow: "Team",
    title: "Discord voice relay & role-scoped access",
    body:
      "The Discord bot relays live radio audio into a voice channel so your team can listen along without a separate app, and doubles as a lightweight utility bot for team coordination.",
    points: [
      "Live audio relay per node, on demand",
      "Admin / operator / viewer roles, with operators scoped to the nodes they own",
      "Discord account linking for in-Discord commands",
    ],
  },
];

export default function FeaturesPage() {
  return (
    <div className="max-w-screen-xl mx-auto px-4 md:px-6 py-16 md:py-20">
      <div className="max-w-2xl">
        <Badge tone="brand">Features</Badge>
        <h1 className="text-display-sm md:text-display text-white mt-5">Everything between the radio and the map</h1>
        <p className="text-gray-400 mt-4 leading-relaxed">
          DRB is the pipeline from decoded radio traffic to a picture your team can act on: transcription,
          correlation, mapping, and a live relay — end to end.
        </p>
      </div>

      <div className="mt-16 space-y-16">
        {SECTIONS.map((s) => (
          <div key={s.title} className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
            <div className="lg:col-span-2">
              <p className="text-indigo-400 text-xs font-mono uppercase tracking-wider font-semibold">{s.eyebrow}</p>
              <h2 className="text-white text-2xl font-bold mt-2">{s.title}</h2>
              <p className="text-gray-400 mt-3 leading-relaxed">{s.body}</p>
            </div>
            <Card padding="lg" className="lg:col-span-3">
              <ul className="space-y-3">
                {s.points.map((p) => (
                  <li key={p} className="flex items-start gap-3 text-sm text-gray-300">
                    <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-indigo-500 shrink-0" />
                    {p}
                  </li>
                ))}
              </ul>
              {/* Gate A / A2 (server-26#46) — the sections that describe the AI
                  pipeline carry the same qualifier the product surfaces do. */}
              {s.qualify && <MachineOutputNotice className="mt-5" />}
            </Card>
          </div>
        ))}
      </div>

      <div className="text-center mt-20 pt-16 border-t border-gray-800">
        <h2 className="text-display-sm text-white">See it running on your own traffic</h2>
        <div className="mt-6">
          <LinkButton href="/login" size="lg">Get started</LinkButton>
        </div>
      </div>
    </div>
  );
}