import Link from "next/link";
import { ArrowRight, FileText, LayoutDashboard, LockKeyhole } from "lucide-react";

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <main className="flex flex-1 bg-background">
      <section className="mx-auto flex min-h-dvh w-full max-w-5xl flex-col justify-center gap-10 px-6 py-12">
        <div className="max-w-3xl space-y-5">
          <p className="text-sm font-medium text-muted-foreground">
            WebDev Pipeline MVP
          </p>
          <h1 className="text-4xl font-semibold tracking-normal text-foreground sm:text-5xl">
            Lokale Webdesign-Leads recherchieren, auditieren und respektvoll
            kontaktieren.
          </h1>
          <p className="max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg">
            Diese Foundation setzt die ersten App-Routen fuer Dashboard,
            Anmeldung und oeffentliche Audit-Seiten auf. Die Integrationen
            folgen in den naechsten Backlog-Tasks.
          </p>
        </div>

        <div className="grid gap-3 sm:grid-cols-3">
          <Button asChild size="lg" className="justify-between">
            <Link href="/dashboard">
              <span className="inline-flex items-center gap-2">
                <LayoutDashboard />
                Dashboard
              </span>
              <ArrowRight />
            </Link>
          </Button>
          <Button asChild size="lg" variant="outline" className="justify-between">
            <Link href="/login">
              <span className="inline-flex items-center gap-2">
                <LockKeyhole />
                Login
              </span>
              <ArrowRight />
            </Link>
          </Button>
          <Button asChild size="lg" variant="outline" className="justify-between">
            <Link href="/audit/example">
              <span className="inline-flex items-center gap-2">
                <FileText />
                Audit
              </span>
              <ArrowRight />
            </Link>
          </Button>
        </div>

        <dl className="grid gap-4 border-t pt-8 sm:grid-cols-3">
          <div>
            <dt className="text-sm font-medium text-foreground">Recherche</dt>
            <dd className="mt-2 text-sm leading-6 text-muted-foreground">
              Kampagnen, Places-Quellen und Lead-Qualitaet werden spaeter im
              Dashboard gebuendelt.
            </dd>
          </div>
          <div>
            <dt className="text-sm font-medium text-foreground">Audit</dt>
            <dd className="mt-2 text-sm leading-6 text-muted-foreground">
              Oeffentliche Audit-Seiten starten als sichere Platzhalter ohne
              freigegebene Inhalte.
            </dd>
          </div>
          <div>
            <dt className="text-sm font-medium text-foreground">Outreach</dt>
            <dd className="mt-2 text-sm leading-6 text-muted-foreground">
              Versand bleibt im MVP an manuelle Pruefung und Freigabe
              gekoppelt.
            </dd>
          </div>
        </dl>
      </section>
    </main>
  );
}