/* eslint-disable */
/* global React, Reveal */
const { useState: useStateContact } = React;

const WEB3FORMS_KEY = '644cc662-f399-4dab-9121-a8efed59eba7';

function Contact() {
  const [status, setStatus] = useStateContact('idle'); // idle | sending | success | error

  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    setStatus('sending');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        body: new FormData(form),
      });
      const json = await res.json();
      if (json.success) {
        setStatus('success');
        form.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <section id="contact" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <hr className="hr-gold" />
            <span className="eyebrow">Contact</span>
            <h2>Contact us.</h2>
            <p>Tell us about your car and what you want to do with it. We'll come back with a plan.</p>
          </div>
        </Reveal>

        <div className="contact__grid">
          <Reveal>
            <div className="contact__info">
              <div className="contact__row">
                <span className="contact__k">Email</span>
                <a href="mailto:info@platinumtuning.com.au" className="contact__v">info@platinumtuning.com.au</a>
              </div>
              <div className="contact__row">
                <span className="contact__k">Phone</span>
                <a href="tel:+61361460480" className="contact__v">(03) 6146 0480</a>
              </div>
              <div className="contact__row">
                <span className="contact__k">Address</span>
                <span className="contact__v">Unit 8, 3 Abernant Way<br/>Cambridge, Tasmania 7170</span>
              </div>
              <div className="contact__row" style={{ alignItems: 'start' }}>
                <span className="contact__k">Hours</span>
                <div className="contact__hours">
                  <span><span>Mon–Thu</span><span>7:30am – 5:00pm</span></span>
                  <span><span>Friday</span><span>7:30am – 3:00pm</span></span>
                  <span className="muted"><span>Sat–Sun</span><span>Closed</span></span>
                </div>
              </div>
            </div>
          </Reveal>

          <Reveal delay={140}>
            {status === 'success' ? (
              <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-gold)', padding: 40, borderRadius: 2 }}>
                <hr className="hr-gold" style={{ marginBottom: 16 }} />
                <h3 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 28, letterSpacing: '0.02em', margin: '0 0 12px' }}>Enquiry received.</h3>
                <p style={{ color: 'var(--fg-2)', margin: 0 }}>We'll be in touch shortly. For urgent jobs, give the shop a call.</p>
              </div>
            ) : (
              <form className="form" onSubmit={onSubmit}>
                <input type="hidden" name="access_key" value={WEB3FORMS_KEY} />
                <input type="hidden" name="subject" value="New enquiry — Platinum Tuning website" />
                <input type="hidden" name="from_name" value="Platinum Tuning Website" />
                <input type="checkbox" name="botcheck" tabIndex="-1" autoComplete="off" style={{ position: 'absolute', left: '-9999px', opacity: 0 }} aria-hidden="true" />

                <div className="form-row">
                  <div className="field">
                    <label htmlFor="f-name">Name</label>
                    <input id="f-name" name="name" type="text" required />
                  </div>
                  <div className="field">
                    <label htmlFor="f-email">Email</label>
                    <input id="f-email" name="email" type="email" required />
                  </div>
                </div>
                <div className="field">
                  <label htmlFor="f-phone">Phone</label>
                  <input id="f-phone" name="phone" type="tel" />
                </div>
                <div className="field">
                  <label htmlFor="f-msg">Message</label>
                  <textarea id="f-msg" name="message" rows="5" placeholder="Tell us about the car and what you're after." required></textarea>
                </div>
                <div className="form__submit">
                  <button type="submit" className="btn btn--primary" disabled={status === 'sending'}>
                    {status === 'sending' ? 'Sending…' : 'Send Enquiry'}
                  </button>
                  {status === 'error' && (
                    <span className="form__note" style={{ color: 'var(--status-bad)' }}>
                      Couldn't send. Try emailing info@platinumtuning.com.au or call the shop.
                    </span>
                  )}
                </div>
              </form>
            )}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;