"use client";

import { FormEvent, useState } from "react";

export function ContactForm() {
  const [summary, setSummary] = useState("");
  const [copied, setCopied] = useState(false);

  function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setSummary([`Nome: ${data.get("nome")}`, `Empresa: ${data.get("empresa")}`, `Cargo: ${data.get("cargo")}`, `E-mail: ${data.get("email")}`, `Telefone: ${data.get("telefone") || "Não indicado"}`, `Desafio: ${data.get("desafio")}`].join("\n"));
    setCopied(false);
  }

  async function copySummary() { await navigator.clipboard.writeText(summary); setCopied(true); }

  return (
    <form className="contact-form" onSubmit={onSubmit}>
      <div className="field-grid">
        <label>Nome<input name="nome" required autoComplete="name" /></label>
        <label>Empresa<input name="empresa" required autoComplete="organization" /></label>
        <label>Cargo<input name="cargo" required autoComplete="organization-title" /></label>
        <label>E-mail corporativo<input name="email" type="email" required autoComplete="email" /></label>
        <label>Telefone <span>(opcional)</span><input name="telefone" type="tel" autoComplete="tel" /></label>
        <label className="full-field">Principal desafio<textarea name="desafio" required rows={5} placeholder="Conte-nos, de forma breve, o que precisa de mudar na operação." /></label>
      </div>
      <p className="form-disclaimer">Nesta versão de apresentação, os dados não são transmitidos. O formulário prepara um briefing que poderá ser copiado; antes da divulgação pública, basta associá-lo ao e-mail ou CRM escolhido.</p>
      <button className="button" type="submit">Preparar pedido de diagnóstico</button>
      {summary && <div className="form-result" role="status"><strong>Briefing preparado</strong><pre>{summary}</pre><button className="button button-ghost" type="button" onClick={copySummary}>{copied ? "Resumo copiado" : "Copiar resumo"}</button></div>}
    </form>
  );
}