"use client";

import { useState } from "react";

export function ContactForm() {
  const [sent, setSent] = useState(false);

  return (
    <form
      className="rounded-2xl bg-zinc-50 p-5 md:p-8"
      onSubmit={(event) => {
        event.preventDefault();
        setSent(true);
      }}
    >
      <h2 className="text-xl md:text-2xl font-extrabold mb-1">نظرتون با ما به اشتراک بزارید</h2>
      <p dir="ltr" className="mb-6 font-carter text-[10px] tracking-[0.35em] text-zinc-400 uppercase">
        SEND MESSAGE
      </p>

      {sent ? (
        <p className="rounded-xl bg-white px-4 py-6 text-sm leading-7 text-zinc-600">
          پیام شما ثبت شد. به‌زودی از طریق تماس یا پیام پاسخ می‌دهیم.
        </p>
      ) : (
        <div className="grid gap-3">
          <input
            required
            name="name"
            type="text"
            placeholder="نام و نام خانوادگی"
            className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
          />
          <input
            required
            name="email"
            type="email"
            placeholder="ایمیل"
            className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
          />
          <input
            required
            name="cell_number"
            type="tel"
            placeholder="شماره همراه"
            className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
            dir="ltr"
          />
          <input
            required
            name="title"
            type="text"
            placeholder="موضوع"
            className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
          />
          <textarea
            required
            name="message"
            placeholder="پیام"
            rows={6}
            className="w-full resize-y rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
          />
          <button
            type="submit"
            className="mt-2 inline-flex items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-bold text-white hover:bg-[#e01e1e]"
          >
            ارسال پیام
          </button>
        </div>
      )}
    </form>
  );
}