// pages-contact.jsx

const CONTACT_ENDPOINT = "https://script.google.com/macros/s/AKfycbxVaTRBIoU6m9JIc_AEhD69tPfL_dfi3R9zCricU30RqVbcm4V-Dya7OOczfh-Uuh3S9A/exec";

function ContactPage({ go }) {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const nameRef = React.useRef();
  const emailRef = React.useRef();
  const capacityRef = React.useRef();
  const messageRef = React.useRef();

  const submit = (e) => {
    e.preventDefault();
    setSending(true);
    const params = new URLSearchParams({
      name: nameRef.current.value,
      email: emailRef.current.value,
      capacity: capacityRef.current.value,
      message: messageRef.current.value
    });
    fetch(CONTACT_ENDPOINT, { method: "POST", mode: "no-cors", body: params })
      .catch(() => {})
      .finally(() => { setSending(false); setSent(true); });
  };

  return (
    <main className="page shell contact" data-screen-label="06 Contact">
      <section className="contact-form">
        <div className="block">
          <div className="contact-locations">
            <div className="eg-label contact-locations-eyebrow">Esme Grace and its partnerships:</div>
            <div className="body">Los Angeles · London · Sydney</div>
          </div>
        </div>
        <form onSubmit={submit}>
          <div className="field">
            <label className="eg-label">Your name</label>
            <input ref={nameRef} type="text" placeholder="First and last" required />
          </div>
          <div className="field">
            <label className="eg-label">Email</label>
            <input ref={emailRef} type="email" placeholder="you@studio.com" required />
          </div>
          <div className="field">
            <label className="eg-label">Capacity</label>
            <select ref={capacityRef} defaultValue="">
              <option value="" disabled>Select one</option>
              <option>Writer</option>
              <option>Director</option>
              <option>Producer</option>
              <option>Financier</option>
              <option>Press / journalist</option>
              <option>Other</option>
            </select>
          </div>
          <div className="field">
            <label className="eg-label">Message</label>
            <textarea ref={messageRef} rows="4" placeholder="Tell us more."></textarea>
          </div>
          {sent ? (
            <div className="contact-sent">
              Received. We'll be in touch.
            </div>
          ) : (
            <div className="btn-send-row">
              <button type="submit" className="btn-send" disabled={sending}>{sending ? "Sending…" : "Send note →"}</button>
              <p className="contact-disclaimer">Esme Grace does not accept unsolicited submissions.</p>
            </div>
          )}
        </form>
      </section>
    </main>
  );
}

Object.assign(window, { ContactPage });