// =========================================================================
// Alice Murrell, Contact
// =========================================================================
const { Cursor, Nav, Footer, Icon, useSiteEffects } = window;

const WEB3FORMS_ACCESS_KEY = 'e1a83a61-e283-467d-bdea-597651ad43de';

function ContactForm() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  if (status === 'sent') {
    return (
      <div className="form-success" data-reveal>
        <span className="tick"><Icon name="check" size={22} /></span>
        <h3 className="display" style={{ fontSize: '1.8rem' }}>Almost there.</h3>
        <p className="muted" style={{ margin: 0, fontSize: 15 }}>Thanks for reaching out - your message is on its way. I'll get back to you soon. If you don't hear from me, reach me directly at <a href="mailto:alice_murrell@outlook.com" style={{ color: 'inherit', textDecoration: 'none' }}>alice_murrell@outlook.com</a>.</p>
        <button className="btn btn-secondary magnetic" onClick={() => setStatus('idle')}>Send another</button>
      </div>);
  }

  return (
    <form className="form" data-reveal onSubmit={async (e) => {
      e.preventDefault();
      const form = e.currentTarget;
      setStatus('sending');
      try {
        const res = await fetch('https://api.web3forms.com/submit', {
          method: 'POST',
          headers: { Accept: 'application/json' },
          body: new FormData(form),
        });
        const data = await res.json();
        if (data.success) {
          form.reset();
          setStatus('sent');
        } else {
          setStatus('error');
        }
      } catch (err) {
        setStatus('error');
      }
    }}>
      <input type="hidden" name="access_key" value={WEB3FORMS_ACCESS_KEY} />
      <div className="field-row">
        <div className="field"><label htmlFor="name">Name</label><input id="name" name="name" required placeholder="Jane Appleseed" /></div>
        <div className="field"><label htmlFor="email">Email</label><input id="email" name="email" type="email" required placeholder="jane@studio.com" /></div>
      </div>
      <div className="field"><label htmlFor="msg">Message</label><textarea id="msg" name="message" placeholder="What's on your mind…"></textarea></div>
      {status === 'error' && <p className="muted" style={{ color: 'var(--danger)', fontSize: 14, margin: 0 }}>Something went wrong sending that - please try again, or email me directly at <a href="mailto:alice_murrell@outlook.com" style={{ color: 'inherit', textDecoration: 'none' }}>alice_murrell@outlook.com</a>.</p>}
      <button className="btn btn-primary magnetic" type="submit" disabled={status === 'sending'} style={{ justifySelf: 'start' }}>{status === 'sending' ? 'Sending…' : 'Send message'}</button>
    </form>);
}

function App() {
  useSiteEffects();
  return (
    <React.Fragment>
      <Cursor />
      <Nav active="contact" />
      <main>
        <section className="wrap contact-head">
          <div className="ad-eyebrow" data-reveal style={{ marginBottom: 26 }}>Contact</div>
          <h1 className="display" data-reveal style={{ fontSize: 'clamp(3rem, 9vw, 7.6rem)', maxWidth: '13ch' }}>Let's connect.

          </h1>
        </section>

        <section className="wrap section-tight contact-body-section" style={{ borderTop: '1px solid var(--hairline)' }}>
          <div className="contact-grid">
            <div className="contact-aside" data-reveal>
              <div className="contact-aside-group">
                <div className="contact-aside-label">Email</div>
                <a className="contact-email" href="mailto:alice_murrell@outlook.com" style={{ textDecoration: 'none' }}>alice_murrell@outlook.com</a>
              </div>
              <div className="contact-aside-group">
                <div className="contact-aside-label">Location</div>
                <div className="contact-email">London</div>
              </div>
            </div>
            <ContactForm />
          </div>
        </section>
      </main>
      <Footer hideCta />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);