/* eslint-disable */
function ContactForm({ onSubmit, sent }) {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [project, setProject] = React.useState('');
  const [message, setMessage] = React.useState('');

  function submit(e) {
    e.preventDefault();
    onSubmit({ name, email, project, message });
  }

  if (sent) {
    return (
      <div className="ccg-form-sent">
        <h3>Thank you.</h3>
        <p>We have received your inquiry and will be in touch within one business day.</p>
      </div>
    );
  }

  return (
    <form className="ccg-form" onSubmit={submit}>
      <div className="ccg-field">
        <label className="ccg-label">Name</label>
        <input className="ccg-input" value={name} onChange={(e) => setName(e.target.value)} required />
      </div>
      <div className="ccg-field">
        <label className="ccg-label">Email</label>
        <input className="ccg-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
      </div>
      <div className="ccg-field ccg-field--full">
        <label className="ccg-label">Project type</label>
        <input className="ccg-input" placeholder="Acquisition, redevelopment, sale-vs-hold, …" value={project} onChange={(e) => setProject(e.target.value)} />
      </div>
      <div className="ccg-field ccg-field--full">
        <label className="ccg-label">Message</label>
        <textarea className="ccg-input ccg-input--area" rows="5" value={message} onChange={(e) => setMessage(e.target.value)} required />
      </div>
      <div className="ccg-field ccg-field--full">
        <button type="submit" className="ccg-btn ccg-btn--primary">Send Inquiry</button>
      </div>
    </form>
  );
}
window.ContactForm = ContactForm;