// Contact.jsx — links copy + rechts formulier (NL)
const { useState: useStateCt } = React;

function Contact() {
  const [sent, setSent] = useStateCt(false);
  const [form, setForm] = useStateCt({ name: "", email: "", company: "", msg: "" });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const valid = form.name.trim() && /\S+@\S+\.\S+/.test(form.email) && form.msg.trim().length > 4;

  return (
    <section className="section container" id="contact">
      <div className="contact">
        <div>
          <span className="eyebrow">Contact</span>
          <h2>Antwoord binnen één werkdag. Meestal sneller.</h2>
          <p>We zijn een klein team. Je spreekt rechtstreeks met de mensen die het werk doen.</p>
          <div className="meta">
            <div className="row">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
              <span>ezra@lptrdigital.nl</span>
            </div>
            <div className="row">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 21s-7-5.5-7-12a7 7 0 0 1 14 0c0 6.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>
              <span>Maassluis</span>
            </div>
            <div className="row">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              <span>+31 30 71 72 92</span>
            </div>
          </div>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); if (valid) setSent(true); }}>
          <div className="grid2">
            <div className="field"><label>Naam</label><input className="input" value={form.name} onChange={set("name")} placeholder="Jelle de Boer"/></div>
            <div className="field"><label>E-mail</label><input className="input" type="email" value={form.email} onChange={set("email")} placeholder="jelle@bedrijf.nl"/></div>
          </div>
          <div className="field"><label>Bedrijf</label><input className="input" value={form.company} onChange={set("company")} placeholder="Bedrijf B.V."/></div>
          <div className="field"><label>Wat speelt er?</label>
            <textarea className="input" value={form.msg} onChange={set("msg")} placeholder="We hebben een Shopify-shop en de support-inbox staat in brand."/>
          </div>
          <button type="submit" className="btn lg" style={{ alignSelf: 'flex-start', opacity: (!sent && !valid) ? 0.4 : 1, cursor: (!sent && !valid) ? 'not-allowed' : 'pointer' }} disabled={!sent && !valid}>
            {sent ? "Verzonden. We bellen je snel." : "Versturen"}
            {!sent && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M13 5l7 7-7 7"/></svg>}
            {sent && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg>}
          </button>
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });