// Contact form (light variant matching the cream system)
function Contact() {
  const [form, setForm] = React.useState({ name:'', company:'', email:'', size:'', message:'' });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const sizes = ['1–50', '51–200', '201–1,000', '1,001–5,000', '5,000+'];
  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Required';
    if (!form.email.trim()) errs.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) errs.email = 'Looks off';
    if (!form.company.trim()) errs.company = 'Required';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    const lines = [
      `Name: ${form.name}`,
      `Email: ${form.email}`,
      `Company: ${form.company}`,
      form.size ? `Company size: ${form.size} people` : null,
      form.message.trim() ? `\nMessage:\n${form.message.trim()}` : null,
    ].filter(Boolean).join('\n');
    const subject = `Enquiry from ${form.name} — ${form.company}`;
    window.location.href = `mailto:info@simple.space?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines)}`;
    setSubmitted(true);
  };

  return (
    <section id="contact" className="contact">
      <div className="contact-grid">
        {submitted ? (
          <div className="contact-success">
            <div className="mono" style={{color:'var(--orange)', letterSpacing:'0.12em'}}>RECEIVED — REF #SS{Math.floor(Math.random()*9000+1000)}</div>
            <h3 className="h-card" style={{marginTop: 12, fontFamily:'var(--display)', fontSize: 32, fontWeight: 300}}>
              Thanks, {form.name.split(' ')[0]}.
            </h3>
            <p style={{marginTop: 12}}>
              Your email app should have opened with your enquiry ready to send — just hit
              send. If it didn't, email us directly at <a href="mailto:info@simple.space" style={{color:'var(--orange)', textDecoration:'underline'}}>info@simple.space</a>.
            </p>
            <button className="btn btn-ghost" style={{marginTop: 22}}
                    onClick={()=>{setSubmitted(false); setForm({name:'',company:'',email:'',size:'',message:''})}}>Send another</button>
          </div>
        ) : (
          <form className="contact-form" onSubmit={submit} noValidate>
            <div>
              <div className="eyebrow"><span className="line"/><span>Make an enquiry</span></div>
              <h2 className="h-section" style={{marginTop: 16}}>
                Send us an enquiry.
              </h2>
              <p className="lead" style={{marginTop: 18}}>
                Tell us who you are and we'll be in touch. Just the essentials — we'll
                take it from there over email.
              </p>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, marginTop: 12}}>
              <Field label="Your name" err={errors.name}>
                <input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} placeholder="Alex Singh"/>
              </Field>
              <Field label="Company" err={errors.company}>
                <input value={form.company} onChange={e=>setForm({...form, company:e.target.value})} placeholder="Acme Real Estate"/>
              </Field>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
              <Field label="Work email" err={errors.email}>
                <input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} placeholder="alex@acme.com"/>
              </Field>
              <Field label="Company size (optional)">
                <select value={form.size} onChange={e=>setForm({...form, size:e.target.value})}>
                  <option value="">Select headcount…</option>
                  {sizes.map(s => <option key={s} value={s}>{s} people</option>)}
                </select>
              </Field>
            </div>
            <Field label="Anything else? (optional)">
              <textarea rows="3" value={form.message} onChange={e=>setForm({...form, message:e.target.value})}
                placeholder="A line on what you're hoping to solve — optional."/>
            </Field>
            <button type="submit" className="btn btn-orange" style={{alignSelf:'flex-start', marginTop: 10}}>
              Email your enquiry <Icon.arr/>
            </button>
            <p className="mono" style={{fontSize: 12, color:'var(--mid)', marginTop: 4}}>
              Opens your email app addressed to info@simple.space.
            </p>
          </form>
        )}

        <div className="contact-meta">
          <div className="row">
            <span className="l">Direct</span>
            <span className="v">info@simple.space</span>
          </div>
          <div className="row">
            <span className="l">Working with</span>
            <span className="v">Enterprise CRE, Workplace Strategy, HR<br/>and operations teams — Australia &amp; globally.</span>
          </div>
          <div className="row">
            <span className="l">Building since</span>
            <span className="v">2015 — workplace mapping, data integration<br/>and BI reporting specialists.</span>
          </div>
          <div className="row">
            <span className="l">Status</span>
            <div style={{display:'flex', alignItems:'center', gap: 10, marginTop: 6}}>
              <span style={{width:8, height:8, borderRadius:'50%', background:'var(--green)'}} className="pulse"/>
              <span style={{fontFamily:'var(--body)', fontSize: 13, color:'var(--mid)'}}>All systems operational · last refresh 06:00 AEST</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({label, err, children}){
  return (
    <div className="field">
      <label>{label}{err && <span className="err" style={{textTransform:'none', letterSpacing:0, marginLeft:8}}>— {err}</span>}</label>
      {children}
    </div>
  );
}

window.Contact = Contact;