"use client";

import { ArrowLeft, CheckCircle2 } from "lucide-react";
import type { FormEvent } from "react";
import { useState } from "react";

export default function ContactForm() {
  const [submitted, setSubmitted] = useState(false);

  const submit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="contact-success">
        <CheckCircle2 />
        <h3>پیام شما ثبت شد</h3>
        <p>کارشناسان سامان اندیش در اولین فرصت با شما تماس خواهند گرفت.</p>
        <button onClick={() => setSubmitted(false)}>ارسال پیام دیگر</button>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit}>
      <div className="form-row">
        <label>
          نام و نام خانوادگی
          <input name="name" placeholder="نام شما" required />
        </label>
        <label>
          شماره تماس
          <input
            name="phone"
            inputMode="tel"
            placeholder="09xx xxx xxxx"
            dir="ltr"
            required
          />
        </label>
      </div>
      <div className="form-row">
        <label>
          ایمیل
          <input
            name="email"
            type="email"
            placeholder="name@company.com"
            dir="ltr"
          />
        </label>
        <label>
          موضوع درخواست
          <select name="subject" defaultValue="">
            <option value="" disabled>
              انتخاب کنید
            </option>
            <option>خرید ماشین‌آلات</option>
            <option>خدمات فنی و مهندسی</option>
            <option>تأمین مواد اولیه</option>
            <option>همکاری تجاری</option>
            <option>سایر موارد</option>
          </select>
        </label>
      </div>
      <label>
        پیام شما
        <textarea
          name="message"
          rows={6}
          placeholder="درباره دستگاه، برند، ظرفیت تولید یا خدمات مورد نیاز توضیح دهید..."
          required
        />
      </label>
      <button type="submit">
        ارسال درخواست
        <ArrowLeft size={18} />
      </button>
      <small>
        با ارسال فرم، کارشناسان ما برای تکمیل اطلاعات با شما تماس می‌گیرند.
      </small>
    </form>
  );
}