import { FileSearch, MailCheck, MapPinned, ShieldCheck } from "lucide-react";

const pipelineSteps = [
  {
    title: "Kampagnen",
    description: "Kategorie, PLZ, Radius und Lauf-Limits vorbereiten.",
    icon: MapPinned,
  },
  {
    title: "Lead-Audit",
    description: "Website-Potenzial, Screenshots und Quellen buendeln.",
    icon: FileSearch,
  },
  {
    title: "Freigabe",
    description: "Audit-Seite, E-Mail und Telefon-Skript manuell pruefen.",
    icon: ShieldCheck,
  },
  {
    title: "Outreach",
    description: "Freigegebene Kontakte senden und Antworten nachhalten.",
    icon: MailCheck,
  },
];

export default function DashboardPage() {
  return (
    <main className="min-h-dvh bg-background px-6 py-8">
      <div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
        <header className="flex flex-col gap-2 border-b pb-6">
          <p className="text-sm font-medium text-muted-foreground">
            Interner Arbeitsbereich
          </p>
          <h1 className="text-3xl font-semibold tracking-normal">
            Dashboard-Platzhalter
          </h1>
          <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
            Hier entsteht der scanbare Funnel fuer Recherche, Audit, Review,
            Versand und Follow-up.
          </p>
        </header>

        <section className="grid gap-3 md:grid-cols-4">
          {pipelineSteps.map((step) => {
            const Icon = step.icon;

            return (
              <article
                className="rounded-lg border bg-card p-4 text-card-foreground"
                key={step.title}
              >
                <Icon className="mb-4 size-5 text-muted-foreground" />
                <h2 className="text-sm font-medium">{step.title}</h2>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">
                  {step.description}
                </p>
              </article>
            );
          })}
        </section>
      </div>
    </main>
  );
}