// Contact.jsx — contact form with client-side validation
const { useState: useStateC } = React;

function Contact() {
  const [form, setForm] = useStateC({ name: '', email: '', company: '', message: '', budget: '' });
  const [errs, setErrs] = useStateC({});
  const [sent, setSent] = useStateC(false);
  const [sending, setSending] = useStateC(false);

  const set = (k) => (e) => {
    setForm(f => ({ ...f, [k]: e.target.value }));
    if (errs[k]) setErrs(prev => ({ ...prev, [k]: null }));
  };
  const setBudget = (b) => setForm(f => ({ ...f, budget: b }));

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Your name, please.";
    if (!form.email.trim()) e.email = "We'll need this to reply.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Doesn't look like a valid email.";
    if (!form.message.trim()) e.message = "Tell us a little about what you need.";
    else if (form.message.trim().length < 12) e.message = "A few more words would help.";
    return e;
  };

  const submit = (e) => {
    e.preventDefault();
    const v = validate();
    if (Object.keys(v).length) { setErrs(v); return; }
    setSending(true);
    setTimeout(() => { setSending(false); setSent(true); }, 850);
  };

  return (
    <section className="section section--dark" id="contact">
      <div className="container-xl">
        <header className="section__head reveal">
          <div className="section__num">04 &nbsp;/&nbsp; Contact</div>
          <SectionOrbit variant="contact" />
          <h2 className="section__title">Tell us about <em>your week</em>.</h2>
        </header>

        <div className="contact">
          <div className="contact__pitch reveal">
            <h2 style={{display:'none'}}>Book a chat</h2>
            <p>
              A 30-minute call, no pitch, no slide deck. You talk us through what's eating your time, we'll say whether we think we can help — or who else you should talk to.
            </p>
            <p style={{color:'rgba(251,250,255,0.55)', fontSize:'var(--fs-16)'}}>
              Taking on two new projects for Q3. We'll reply within one working day.
            </p>

            <dl className="contact__details">
              <div className="contact__detail">
                <dt>Email</dt>
                <dd><a href="mailto:hello@ozworks.uk" data-hover>hello@ozworks.uk</a></dd>
              </div>
              <div className="contact__detail">
                <dt>Phone</dt>
                <dd><a href="tel:+442012345678" data-hover>+44 20 1234 5678</a></dd>
              </div>
              <div className="contact__detail">
                <dt>Based</dt>
                <dd>London &amp; Kent, UK</dd>
              </div>
              <div className="contact__detail">
                <dt>Hours</dt>
                <dd>Mon–Fri, 9–6 GMT</dd>
              </div>
            </dl>
          </div>

          <form className="form-card reveal" onSubmit={submit} data-delay="1" noValidate>
            {!sent ? (
              <>
                <div className="form-card__head">
                  <h3 className="form-card__title">Book a chat</h3>
                  <span className="form-card__avail">Available</span>
                </div>

                <div className="field" data-field>
                  <label>Your name</label>
                  <input type="text" value={form.name} onChange={set('name')} placeholder="Jane Patel" data-hover />
                  {errs.name && <div className="field__err">{errs.name}</div>}
                </div>

                <div className="field">
                  <label>Email</label>
                  <input type="email" value={form.email} onChange={set('email')} placeholder="jane@yourbusiness.co.uk" data-hover />
                  {errs.email && <div className="field__err">{errs.email}</div>}
                </div>

                <div className="field">
                  <label>Business (optional)</label>
                  <input type="text" value={form.company} onChange={set('company')} placeholder="Patel & Co. Plumbing" data-hover />
                </div>

                <div className="field">
                  <label>Rough budget</label>
                  <div className="budget-row">
                    {["Under £2k", "£2–5k", "£5–10k", "£10k+"].map(b => (
                      <button type="button" key={b} className={form.budget === b ? 'active' : ''} onClick={() => setBudget(b)} data-hover>{b}</button>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label>What's on your mind</label>
                  <textarea value={form.message} onChange={set('message')} placeholder="The thing eating your week, in your own words." data-hover />
                  {errs.message && <div className="field__err">{errs.message}</div>}
                </div>

                <button type="submit" className="form-submit" disabled={sending} data-hover>
                  <span>{sending ? "Sending…" : "Send it our way"}</span>
                  <span className="arrow-wrap"><ArrowUpRight size={14} /></span>
                </button>
              </>
            ) : (
              <div className="form-success">
                <div className="form-success__mark"><Check size={28} /></div>
                <h3>Thanks, {form.name.split(' ')[0] || 'friend'}.</h3>
                <p>We've got it. You'll hear back within one working day — usually sooner.</p>
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;