"use client";

import { FormEvent, useState } from "react";
import { FiArrowRight, FiCheck } from "react-icons/fi";
import { trackEvent } from "@/lib/analytics";

const subjects = [
  "Parcerias",
  "Igrejas",
  "Eventos",
  "Licenciamento",
  "Utilização de música",
  "Imprensa",
  "Colaborações",
  "Outros",
];

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

  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    trackEvent("contact_submit", { source: "contact_page" });
    setSent(true);
    event.currentTarget.reset();
  }

  if (sent) {
    return (
      <div className="contact-success" role="status" data-reveal>
        <FiCheck />
        <span className="eyebrow">MENSAGEM RECEBIDA</span>
        <h2>Obrigado pelo contato.</h2>
        <p>
          O formulário está em modo demonstrativo e pronto para ser ligado a
          Resend, Formspree, Brevo ou uma API própria.
        </p>
        <button type="button" className="text-button" onClick={() => setSent(false)}>
          Enviar outra mensagem
          <FiArrowRight />
        </button>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit} data-reveal>
      <div className="form-grid">
        <label>
          <span>Nome</span>
          <input name="name" type="text" autoComplete="name" required />
        </label>
        <label>
          <span>E-mail</span>
          <input name="email" type="email" autoComplete="email" required />
        </label>
      </div>
      <label>
        <span>Assunto</span>
        <select name="subject" defaultValue="" required>
          <option value="" disabled>
            Selecione um motivo
          </option>
          {subjects.map((subject) => (
            <option key={subject}>{subject}</option>
          ))}
        </select>
      </label>
      <label>
        <span>Mensagem</span>
        <textarea name="message" rows={7} required />
      </label>
      <button type="submit" className="primary-button">
        Enviar mensagem
        <FiArrowRight />
      </button>
    </form>
  );
}