"use client";

import { FormEvent, useState } from "react";

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

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSent(true);
  };

  if (sent) {
    return (
      <div className="border border-brass bg-brass p-10 text-ink">
        <p className="font-display text-4xl">Message acquis.</p>
        <p className="mt-4 max-w-md">Le club vous rappelle. En attendant : stands, initiation, licence.</p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="grid gap-4 sm:grid-cols-2">
      <label className="block">
        <span className="font-mono text-[10px] tracking-[0.2em] uppercase">Nom</span>
        <input
          required
          name="name"
          className="mt-2 w-full border border-line bg-transparent px-4 py-3 outline-none focus:border-brass"
        />
      </label>
      <label className="block">
        <span className="font-mono text-[10px] tracking-[0.2em] uppercase">E-mail</span>
        <input
          required
          type="email"
          name="email"
          className="mt-2 w-full border border-line bg-transparent px-4 py-3 outline-none focus:border-brass"
        />
      </label>
      <label className="block sm:col-span-2">
        <span className="font-mono text-[10px] tracking-[0.2em] uppercase">Sujet</span>
        <select
          name="topic"
          className="mt-2 w-full border border-line bg-ink px-4 py-3 outline-none focus:border-brass"
        >
          <option>Initiation</option>
          <option>Licence / rejoindre</option>
          <option>Location d’armes</option>
          <option>Concours</option>
          <option>Autre</option>
        </select>
      </label>
      <label className="block sm:col-span-2">
        <span className="font-mono text-[10px] tracking-[0.2em] uppercase">Message</span>
        <textarea
          required
          name="message"
          rows={5}
          className="mt-2 w-full border border-line bg-transparent px-4 py-3 outline-none focus:border-brass"
        />
      </label>
      <button
        type="submit"
        className="inline-flex w-fit rounded-sm bg-brass px-8 py-3.5 text-xs tracking-[0.18em] text-ink uppercase sm:col-span-2"
      >
        Envoyer
      </button>
    </form>
  );
}