import Link from "next/link";
import { Layers, FileCode, Settings, Server } from "lucide-react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const docSections = [
  {
    icon: Layers,
    title: "Architecture",
    description:
      "Understand the system design, data flow between the Next.js frontend and Go DNS microservice, and database schema.",
    href: "/docs/architecture",
  },
  {
    icon: FileCode,
    title: "API Reference",
    description:
      "Explore all available API endpoints for DNS lookups, WHOIS queries, and domain monitoring.",
    href: "/docs/api",
  },
  {
    icon: Settings,
    title: "Configuration",
    description:
      "Learn how to configure the DNS server, set environment variables, and customize behavior.",
    href: "/docs/configuration",
  },
  {
    icon: Server,
    title: "Self-Hosting",
    description:
      "Deploy VectorDNS on your own infrastructure with Docker, systemd, or cloud providers.",
    href: "/docs/self-hosting",
  },
];

export default function DocsPage() {
  return (
    <div className="space-y-8">
      <div className="space-y-4">
        <Badge variant="secondary" className="text-sm">
          Documentation
        </Badge>
        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
          VectorDNS Documentation
        </h1>
        <p className="text-lg text-muted-foreground">
          Everything you need to understand, configure, and deploy VectorDNS —
          the open-source DNS lookup, WHOIS, and domain monitoring toolkit.
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        {docSections.map((section) => (
          <Link key={section.href} href={section.href} className="group">
            <Card className="h-full transition-colors group-hover:border-primary/50">
              <CardHeader>
                <section.icon className="mb-2 size-8 text-primary" />
                <CardTitle>{section.title}</CardTitle>
                <CardDescription>{section.description}</CardDescription>
              </CardHeader>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}