/* Contact page — form wired to Web3Forms */
const ContactScreen = ({ go }) => {
  const formRef = React.useRef(null);
  const [status, setStatus] = React.useState({ msg: '', error: false });
  const [sending, setSending] = React.useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    const form = formRef.current;
    if (!form.checkValidity()) { form.reportValidity(); return; }

    const data = Object.fromEntries(new FormData(form));
    setSending(true);
    setStatus({ msg: '', error: false });

    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(data),
      });
      const json = await res.json();
      if (json.success) {
        setStatus({ msg: 'Thank you \u2014 your message is on its way. We\u2019ll be in touch soon.', error: false });
        form.reset();
      } else {
        setStatus({ msg: json.message || 'Something went wrong. Please try again.', error: true });
      }
    } catch {
      setStatus({ msg: 'Network error \u2014 please try again.', error: true });
    } finally {
      setSending(false);
    }
  };

  return (
    <React.Fragment>
      <PageHero eyebrow="Say Hello" title="Come <em>Visit</em>" sub="We&rsquo;d love to welcome you to the waterfront." />
      <section className="contact wrap"><div className="cgrid">
        <div className="cinfo reveal">
          <h4>Studio</h4><p>Humber Bay Shores<br/>Etobicoke, ON</p>
          <h4>Hours</h4><p>Mon&ndash;Fri &middot; 6am&ndash;8pm<br/>Sat&ndash;Sun &middot; 7am&ndash;2pm</p>
          <h4>Connect</h4><p>hello@sorawellbar.com<br/>@sorawellbar</p>
          <h4>First Class</h4><p>Complimentary for every new guest.<br/>Tell us below and we&rsquo;ll save you a spot.</p>
        </div>
        <div className="cform reveal">
          <form ref={formRef} onSubmit={onSubmit} noValidate>
            {/* Web3Forms — required access key (do not remove) */}
            <input type="hidden" name="access_key" defaultValue="8dbcfcc9-0cb9-4cee-8f74-fa91924702a0" />
            <input type="hidden" name="subject" defaultValue="New message from sorawellbar.com" />
            <input type="hidden" name="from_name" defaultValue="Sora Well Bar Website" />
            {/* Honeypot — must stay hidden from real users */}
            <input type="checkbox" name="botcheck" tabIndex="-1" autoComplete="off" style={{ display: 'none' }} />

            <label htmlFor="cf-name">Name</label>
            <input id="cf-name" type="text" name="name" placeholder="Your name" required />

            <label htmlFor="cf-phone">Phone <span style={{ textTransform: 'none', letterSpacing: 0, opacity: .6 }}>(optional)</span></label>
            <input id="cf-phone" type="tel" name="phone" placeholder="(416) 000-0000" />

            <label htmlFor="cf-email">Email</label>
            <input id="cf-email" type="email" name="email" placeholder="you@email.com" required />

            <label htmlFor="cf-reason">How can we help?</label>
            <select id="cf-reason" name="reason" defaultValue="General inquiry">
              <option>General inquiry</option>
              <option>Book my complimentary first class</option>
              <option>Membership &amp; the Founding Circle</option>
              <option>Private event or gathering</option>
              <option>Corporate wellness</option>
              <option>Feedback</option>
            </select>

            <label htmlFor="cf-message">Message</label>
            <textarea id="cf-message" name="message" rows="4" placeholder="Tell us what you&rsquo;re looking for" required></textarea>

            <button className="btn solid" type="submit" disabled={sending}>
              {sending ? 'Sending\u2026' : 'Send Message'}
            </button>

            <p id="result" className={`form-result${status.error ? ' error' : ''}`} role="status" aria-live="polite">{status.msg}</p>
          </form>
        </div>
      </div></section>
      <Footer go={go} />
    </React.Fragment>
  );
};
window.ContactScreen = ContactScreen;