import { ArrowRight, LockKeyhole, UserPlus } from "lucide-react";

import { signInMock, signUpMock } from "@/app/actions/auth";
import { Button } from "@/components/ui/button";

export function AuthEntry() {
  return (
    <main className="flex min-h-dvh items-center justify-center bg-background px-6 py-10">
      <section className="grid w-full max-w-5xl overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm md:grid-cols-[1.05fr_0.95fr]">
        <div className="flex min-h-[520px] flex-col justify-between border-b p-6 md:border-b-0 md:border-r lg:p-8">
          <div>
            <div className="mb-8 inline-flex size-10 items-center justify-center rounded-lg border bg-background">
              <LockKeyhole className="size-5" />
            </div>
            <p className="text-sm font-medium text-muted-foreground">
              WebDev Pipeline MVP
            </p>
            <h1 className="mt-4 max-w-xl text-3xl font-semibold tracking-normal sm:text-4xl">
              Lokale Webdesign-Leads recherchieren, auditieren und freigeben.
            </h1>
            <p className="mt-4 max-w-lg text-sm leading-6 text-muted-foreground sm:text-base">
              Melde dich an, um Kampagnen, Lead-Qualitaet, Audit-Freigaben und
              Outreach-Schritte in einem Arbeitsbereich zu steuern.
            </p>
          </div>

          <dl className="grid gap-4 pt-8 sm:grid-cols-3">
            {[
              ["Recherche", "Google Places Quellen und Kontaktluecken."],
              ["Audit", "Website-Potenzial und Review-Status."],
              ["Outreach", "Manuelle Freigabe vor Versand."],
            ].map(([label, value]) => (
              <div key={label}>
                <dt className="text-sm font-medium">{label}</dt>
                <dd className="mt-1 text-sm leading-5 text-muted-foreground">
                  {value}
                </dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="flex flex-col justify-center p-6 lg:p-8">
          <div className="mx-auto w-full max-w-sm">
            <h2 className="text-2xl font-semibold tracking-normal">
              Sign in oder sign up
            </h2>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">
              Die Authentifizierung ist in TASK-1 noch simuliert. Beide
              Aktionen setzen eine lokale Mock-Session und leiten ins Dashboard.
            </p>

            <div className="mt-8 grid gap-3">
              <form action={signInMock}>
                <Button className="w-full justify-between" size="lg">
                  <span className="inline-flex items-center gap-2">
                    <LockKeyhole />
                    Sign in
                  </span>
                  <ArrowRight />
                </Button>
              </form>
              <form action={signUpMock}>
                <Button
                  className="w-full justify-between"
                  size="lg"
                  variant="outline"
                >
                  <span className="inline-flex items-center gap-2">
                    <UserPlus />
                    Sign up
                  </span>
                  <ArrowRight />
                </Button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}