function Inquiry(){
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '',
    type: '', dateWhen: '', guests: '',
    message: ''
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [refNo] = React.useState(() => 'BY-' + Math.floor(10000 + Math.random()*90000));

  const types = ['Private', 'Corporate', 'Concert', 'Nightlife', 'Pop-up', 'Other'];

  const set = (k, v) => {
    setForm(f => ({ ...f, [k]: v }));
    if (errors[k]) setErrors(e => ({ ...e, [k]: null }));
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.email.trim()) e.email = 'Required';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Invalid email';
    if (!form.type) e.type = 'Choose one';
    if (!form.message.trim()) e.message = 'Tell us a little';
    return e;
  };

  const onSubmit = (ev) => {
    ev.preventDefault();
    const eMap = validate();
    setErrors(eMap);
    if (Object.keys(eMap).length) return;
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSubmitted(true);
    }, 900);
  };

  return (
    <>
      <Marquee alt items={[
        "CUSTOM EVENTS NEAR & FAR ♠",
        "TACOS N' TEQUILA 5/5/26 ♥",
        "CUSTOM EVENTS NEAR & FAR ♠",
      ]} />

      <section className="container inquiry">
        <div className="inquiry-inner">
          <div className="inquiry-copy">
            <span className="eyebrow" style={{marginBottom:20, display:'inline-block'}}>§ Inquire · <span style={{color:'var(--accent)'}}>♥</span></span>
            <h2>Let's <em>party.</em></h2>
            <p>Get in touch.</p>
            <div className="socials">
              <a className="social" href="https://instagram.com/___byace" target="_blank" rel="noreferrer">
                <span className="lbl">Instagram</span>
                <span className="val">@___byace →</span>
              </a>
              <a className="social" href="mailto:hello@byace.events">
                <span className="lbl">Email</span>
                <span className="val">hello@byace.events →</span>
              </a>
              <a className="social" href="https://venmo.com/u/byace" target="_blank" rel="noreferrer">
                <span className="lbl">Venmo</span>
                <span className="val">@byace →</span>
              </a>
            </div>
          </div>

          <div className="ticket">
            {!submitted ? (
              <form onSubmit={onSubmit} noValidate>
                <div className="ticket-head">
                  <div className="t">Inquiry</div>
                  <div className="no">№ {refNo}</div>
                </div>

                <div className="field-row">
                  <div className={`field ${errors.name ? 'error' : ''}`}>
                    <label>Name <span className="hint">required</span></label>
                    <input type="text" value={form.name} onChange={e=>set('name', e.target.value)} placeholder="Your full name" />
                    <div className="err">{errors.name}</div>
                  </div>
                  <div className={`field ${errors.email ? 'error' : ''}`}>
                    <label>Email <span className="hint">required</span></label>
                    <input type="email" value={form.email} onChange={e=>set('email', e.target.value)} placeholder="you@domain.com" />
                    <div className="err">{errors.email}</div>
                  </div>
                </div>

                <div className="field-row">
                  <div className="field">
                    <label>Phone <span className="hint">optional</span></label>
                    <input type="tel" value={form.phone} onChange={e=>set('phone', e.target.value)} placeholder="(—) —" />
                  </div>
                  <div className="field">
                    <label>Preferred date <span className="hint">optional</span></label>
                    <input type="text" value={form.dateWhen} onChange={e=>set('dateWhen', e.target.value)} placeholder="Summer 2026, or flexible" />
                  </div>
                </div>

                <div className={`field ${errors.type ? 'error' : ''}`}>
                  <label>What is it <span className="hint">pick one</span></label>
                  <div className="chip-group" style={{marginTop:8}}>
                    {types.map(t => (
                      <button key={t} type="button"
                        className={`chip ${form.type === t ? 'on' : ''}`}
                        onClick={()=>set('type', t)}>
                        {t}
                      </button>
                    ))}
                  </div>
                  <div className="err" style={{marginTop:8}}>{errors.type}</div>
                </div>

                <div className="field">
                  <label>Guests <span className="hint">estimate is fine</span></label>
                  <input type="text" value={form.guests} onChange={e=>set('guests', e.target.value)} placeholder="~ 40" />
                </div>

                <div className={`field ${errors.message ? 'error' : ''}`}>
                  <label>The note <span className="hint">the more the better</span></label>
                  <textarea value={form.message} onChange={e=>set('message', e.target.value)} placeholder="What are we building? Venue in mind? Budget range? Music taste? Anything." />
                  <div className="err">{errors.message}</div>
                </div>

                <div className="submit-row">
                  <div className="note">We'll reply from hello@byace.events within 48h. Your info stays between us.</div>
                  <button type="submit" className="btn-submit" disabled={submitting}>
                    {submitting ? 'Sending…' : <>Send inquiry <span className="arw">→</span></>}
                  </button>
                </div>
              </form>
            ) : (
              <>
                <div className="ticket-head">
                  <div className="t">Received</div>
                  <div className="no">№ {refNo}</div>
                </div>
                <div className="success">
                  <div className="stamp">Received ✓</div>
                  <h3>Thank you, <em>{form.name.split(' ')[0]}.</em></h3>
                  <p style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.4, maxWidth:'32ch', textWrap:'balance', opacity:0.85}}>
                    Your message is in. We'll be in touch from <span style={{color:'var(--accent)'}}>hello@byace.events</span> within 48 hours.
                  </p>
                  <div className="refno">Reference № {refNo}</div>
                  <button type="button" className="cta-link" style={{marginTop:16}}
                    onClick={()=>{ setSubmitted(false); setForm({name:'',email:'',phone:'',type:'',dateWhen:'',guests:'',message:''}); }}>
                    Send another <span className="arw">→</span>
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </section>
    </>
  );
}
window.Inquiry = Inquiry;