kovakyazilim/components/audit-form.tsx

"use client";

import { useActionState } from "react";
import { submitContact, type ContactFormState } from "@/app/actions";
import {
  Search,
  ArrowRight,
  CheckCircle2,
  AlertCircle,
  Loader2,
} from "lucide-react";

const initial: ContactFormState = { ok: false, message: "" };

export function AuditForm() {
  const [state, action, pending] = useActionState(submitContact, initial);

  return (
    <form action={action} className="space-y-4">
      <input type="hidden" name="source" value="quick-site-audit" />
      <input type="hidden" name="subject" value="Ücretsiz site analizi talebi" />

      <div>
        <label className="text-sm font-medium text-[var(--navy)]">
          Web sitenizin adresi <span className="text-red-500">*</span>
        </label>
        <input
          name="message"
          required
          placeholder="https://siteminizin-adresi.com"
          className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
        />
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="text-sm font-medium text-[var(--navy)]">
            Adınız <span className="text-red-500">*</span>
          </label>
          <input
            name="name"
            required
            placeholder="Adınız Soyadınız"
            className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-[var(--navy)]">
            E-posta <span className="text-red-500">*</span>
          </label>
          <input
            name="email"
            type="email"
            required
            placeholder="ornek@firma.com"
            className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
          />
        </div>
      </div>

      <div>
        <label className="text-sm font-medium text-[var(--navy)]">
          Telefon (opsiyonel)
        </label>
        <input
          name="phone"
          type="tel"
          inputMode="tel"
          placeholder="+90 5xx xxx xx xx"
          className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-3 text-sm outline-none transition placeholder:text-[var(--muted)]/60 focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
        />
      </div>

      <button
        type="submit"
        disabled={pending}
        className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--navy)] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)] disabled:opacity-60"
      >
        {pending ? (
          <>
            <Loader2 className="size-4 animate-spin" />
            Talep gönderiliyor…
          </>
        ) : (
          <>
            <Search className="size-4" />
            Ücretsiz analiz raporumu istiyorum
            <ArrowRight className="size-4" />
          </>
        )}
      </button>

      <p className="text-center text-[11px] text-[var(--muted)]">
        Raporunuz 24 saat içinde e-posta adresinize gönderilir. Bilgileriniz gizli tutulur.
      </p>

      {state.message && (
        <div
          className={`flex items-start gap-2 rounded-xl border p-3 text-xs ${
            state.ok
              ? "border-green-200 bg-green-50 text-green-800"
              : "border-red-200 bg-red-50 text-red-800"
          }`}
        >
          {state.ok ? (
            <CheckCircle2 className="mt-0.5 size-4 shrink-0" />
          ) : (
            <AlertCircle className="mt-0.5 size-4 shrink-0" />
          )}
          <span>{state.message}</span>
        </div>
      )}
    </form>
  );
}