// jsx/Contact.jsx
function Contact() {
  const [result, setResult] = React.useState("");
  const [form, setForm] = React.useState({ name: "", email: "", message: "" });

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((p) => ({ ...p, [name]: value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    setResult("Спасибо! Ваше сообщение отправлено.");
    setForm({ name: "", email: "", message: "" });
    setTimeout(() => setResult(""), 5000);
  }
  function sanitize(str) {
  return String(str).replace(/[<>]/g, '');
}

function handleSubmit(e) {
  e.preventDefault();
  const name = sanitize(form.name.trim());
  const email = sanitize(form.email.trim());
  const message = sanitize(form.message.trim());
  if (!name || !email || !message) {
    setResult("Пожалуйста, заполните все поля корректно.");
    return;
  }
  // отправка на сервер (fetch)...
}


  return (
    <section id="contact" className="section container" style={{ padding: "36px 0" }}>
      <h2>Контакты</h2>
      <p>Свяжитесь с нами для демонстрации, пилотного проекта или сотрудничества.</p>

      <div className="contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <div>
          <p><strong>Email</strong><br /><a href="mailto:hello@neuromedic.example">hello@neuromedic.example</a></p>
          <p><strong>Телефон</strong><br />+7 495 000 00 00</p>
        </div>

        <form id="contact-form" className="contact-form" aria-label="Форма связи" onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <label>
            <span>Имя</span>
            <input name="name" type="text" required value={form.name} onChange={handleChange} />
          </label>

          <label>
            <span>Email</span>
            <input name="email" type="email" required value={form.email} onChange={handleChange} />
          </label>

          <label>
            <span>Сообщение</span>
            <textarea name="message" rows="4" required value={form.message} onChange={handleChange}></textarea>
          </label>

          <div className="form-actions" style={{ display: "flex", gap: 8 }}>
            <button type="submit" className="btn primary">Отправить</button>
            <button type="reset" className="btn ghost" onClick={() => setForm({ name: "", email: "", message: "" })}>Очистить</button>
          </div>

          <p id="contact-result" className="muted" aria-live="polite" style={{ marginTop: 8 }}>{result}</p>
        </form>
      </div>
    </section>
  );
}