/* ============================================================
   Sara Akef, ENQUIRY FORM
   Posts to a form-to-email service so Sara gets an email.
   Set ENQUIRY_KEY below. With no key it falls back to a
   prefilled mail draft, so the form always works.
   ============================================================ */

/* ---- SETUP, one value ----------------------------------------
   The form posts straight from the page. The visitor never opens
   a mail app. Fill in ONE of these:

   A) web3forms.com, enter Sara's email, copy the free access key
      const ENQUIRY_KEY = "abcd-1234-...";

   B) any endpoint that accepts a JSON POST (Formspree, your own)
      const ENQUIRY_URL = "https://formspree.io/f/xxxx";

   Her address is never exposed in the page and no server is needed.
--------------------------------------------------------------- */
const ENQUIRY_KEY = "";        // <-- paste web3forms access key
const ENQUIRY_URL  = "/api/enquiry";       // <-- or a full POST endpoint instead
const ENQUIRY_CONFIGURED = !!(ENQUIRY_KEY || ENQUIRY_URL);

const { useState: useStateE, useEffect: useEffectE } = React;
const tE = window.SA_T;
const ENQUIRY_TYPES = tE("eqTypes");

function EnquiryForm({ open, onClose, preset }) {
  const p = window.SARA_PROFILE || {};
  const [f, setF] = useStateE({ name: "", email: "", org: "", phone: "", type: ENQUIRY_TYPES[0], message: "", when: "" });
  const [state, setState] = useStateE("idle");   // idle | sending | sent | error

  // "Enquire about classes" should land on the teaching option already chosen
  useEffectE(() => {
    if (!open) return;
    setState("idle");
    setF((v) => ({ ...v, type: preset === "teaching" ? ENQUIRY_TYPES[2] : ENQUIRY_TYPES[0] }));
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose, preset]);

  if (!open) return null;
  const set = (k) => (e) => setF((v) => ({ ...v, [k]: e.target.value }));
  const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email) && f.message.trim();


  const bodyText =
    "Enquiry type: " + f.type +
    "\nName: " + f.name +
    "\nEmail: " + f.email +
    (f.org ? "\nOrganisation: " + f.org : "") +
    (f.phone ? "\nPhone: " + f.phone : "") +
    (f.when ? "\nDates or timing: " + f.when : "") +
    "\n\n" + f.message;

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || state === "sending") return;
    if (!ENQUIRY_CONFIGURED) { setState("unconfigured"); return; }
    setState("sending");
    const url = ENQUIRY_URL || "https://api.web3forms.com/submit";
    const payload = ENQUIRY_KEY
      ? { access_key: ENQUIRY_KEY, subject: "Enquiry: " + f.type + " (" + f.name + ")",
          from_name: f.name, replyto: f.email, message: bodyText }
      : { subject: "Enquiry: " + f.type + " (" + f.name + ")", name: f.name, email: f.email,
          organisation: f.org, phone: f.phone, timing: f.when, type: f.type, message: bodyText };
    try {
      const res = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(payload),
      });
      setState(res.ok ? "sent" : "error");
    } catch (err) { setState("error"); }
  };

  return (
    <div className="lb eq" onClick={onClose}>
      <button className="lb-close" aria-label={tE("lbClose")} onClick={onClose}>✕</button>
      <div className="eq-panel" onClick={(e) => e.stopPropagation()}>
        {state === "sent" ? (
          <div className="eq-done">
            <div className="eq-tick">✓</div>
            <h3 className="disp">{tE("eqDoneHead")}</h3>
            <p>{tE("eqDone")(f.email)}</p>
            <button className="eq-send" onClick={onClose}>{tE("eqCloseBtn")}</button>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div className="eq-head">
              <h3 className="disp">{tE("eqHead")}</h3>
              <p>{tE("eqSub")}</p>
            </div>

            <div className="eq-types">
              {ENQUIRY_TYPES.map((t) => (
                <button type="button" key={t} className={"eq-type" + (f.type === t ? " on" : "")}
                        onClick={() => setF((v) => ({ ...v, type: t }))}>{t}</button>
              ))}
            </div>

            <div className="eq-grid">
              <label className="eq-field"><span>{tE("eqName")}</span>
                <input value={f.name} onChange={set("name")} placeholder={tE("eqNamePh")} /></label>
              <label className="eq-field"><span>{tE("eqEmail")}</span>
                <input value={f.email} onChange={set("email")} placeholder={tE("eqEmailPh")} type="email" dir="ltr" /></label>
              <label className="eq-field"><span>{tE("eqOrg")}</span>
                <input value={f.org} onChange={set("org")} placeholder={tE("eqOrgPh")} /></label>
              <label className="eq-field"><span>{tE("eqPhone")}</span>
                <input value={f.phone} onChange={set("phone")} placeholder={tE("eqPhonePh")} dir="ltr" /></label>
              <label className="eq-field eq-wide"><span>{tE("eqWhen")}</span>
                <input value={f.when} onChange={set("when")} placeholder={tE("eqWhenPh")} /></label>
              <label className="eq-field eq-wide"><span>{tE("eqMsg")}</span>
                <textarea rows="4" value={f.message} onChange={set("message")}
                          placeholder={tE("eqMsgPh")} /></label>
            </div>


            {state === "error" ? (
              <p className="eq-err">{tE("eqErr")} <a href={"mailto:" + p.email} dir="ltr">{p.email}</a> {tE("eqErrTail")}</p>
            ) : null}
            {state === "unconfigured" ? (
              <p className="eq-err">{tE("eqUnconfigured")} <a href={"mailto:" + p.email} dir="ltr">{p.email}</a> {tE("eqErrTail")}</p>
            ) : null}

            <div className="eq-foot">
              <span className="eq-note">
                {tE("eqNote")} <a href={"mailto:" + p.email} dir="ltr">{p.email}</a> {tE("eqNoteTail")}
              </span>
              <button className="eq-send" disabled={!valid || state === "sending"}>
                {state === "sending" ? tE("eqSending") : tE("eqSend")}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}
window.EnquiryForm = EnquiryForm;