/* Serenity Wills — contact enquiry form (React island, stubbed) */
const { useState: useStateCF } = React;

function ContactForm() {
  const [form, setForm] = useStateCF({ name: "", phone: "", email: "", message: "" });
  const [errors, setErrors] = useStateCF({});
  const [sent, setSent] = useStateCF(false);

  const set = (k) => (e) => {
    setForm((f) => ({ ...f, [k]: e.target.value }));
    setErrors((er) => ({ ...er, [k]: undefined }));
  };

  const validate = () => {
    const er = {};
    if (!form.name.trim()) er.name = "Please tell us your name.";
    if (!form.phone.trim() && !form.email.trim())
      er.phone = "Please leave a phone number or an email.";
    if (form.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
      er.email = "Please check this email address.";
    return er;
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const er = validate();
    setErrors(er);
    if (Object.keys(er).length) return;
    // TODO wire to a real endpoint
    setSent(true);
  };

  if (sent) {
    return (
      <div className="form">
        <div className="form__sent">
          <div className="tick">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="m5 12.5 4.5 4.5L19 7" />
            </svg>
          </div>
          <h3>Thank you, {form.name.trim().split(" ")[0] || "and speak soon"}.</h3>
          <p>Your message has been noted. Mark will be in touch to arrange a time that suits you.</p>
        </div>
      </div>
    );
  }

  return (
    <form className="form" onSubmit={onSubmit} noValidate>
      <div className={"field" + (errors.name ? " field--error" : "")}>
        <label htmlFor="cf-name">Your name</label>
        <input id="cf-name" type="text" value={form.name} onChange={set("name")} placeholder="Full name" autoComplete="name" />
        <span className="field__err">{errors.name}</span>
      </div>
      <div className={"field" + (errors.phone ? " field--error" : "")}>
        <label htmlFor="cf-phone">Phone</label>
        <input id="cf-phone" type="tel" value={form.phone} onChange={set("phone")} placeholder="Best number to reach you" autoComplete="tel" />
        <span className="field__err">{errors.phone}</span>
      </div>
      <div className={"field" + (errors.email ? " field--error" : "")}>
        <label htmlFor="cf-email">Email</label>
        <input id="cf-email" type="email" value={form.email} onChange={set("email")} placeholder="Optional" autoComplete="email" />
        <span className="field__err">{errors.email}</span>
      </div>
      <div className="field">
        <label htmlFor="cf-message">Message</label>
        <textarea id="cf-message" value={form.message} onChange={set("message")} placeholder="A few words about what you would like to arrange"></textarea>
      </div>
      <button type="submit" className="btn btn--teal">Send message</button>
      <p className="form__note">No pressure, no obligation. Mark will reply to arrange a convenient time.</p>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("contact-root")).render(<ContactForm />);