// Contact page

const ContactPage = ({ onNav }) => {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState('');
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const submitContact = async (e) => {
    e.preventDefault();
    setSendError('');
    setSending(true);
    try {
      const res = await fetch('/wp-json/soul/v1/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.ok === false) {
        setSendError(data?.message || 'Submission failed. Please try again.');
        setSending(false);
        return;
      }
      setSent(true);
    } catch (err) {
      setSendError('Network error. Please try again.');
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="page">
      <PageHero
        crumbs="Contact"
        title="Let's build"
        titleAccent="this together."
        lead="Questions about the Soul Center, dedication opportunities, or how to get involved? We'd love to hear from you."
      />

      <section className="block">
        <div className="container">
          <div className="contact-grid">
            <div>
              <div style={{ display: 'grid', gap: 20 }}>
                <div className="contact-card">
                  <h3>Get in touch</h3>
                  <div className="row">
                    <Icon name="map-pin" size={20} />
                    <div className="t">
                      <b>Facility</b>
                      16 Microlab Road<br />Livingston, NJ 07039
                    </div>
                  </div>
                  <div className="row">
                    <Icon name="mail" size={20} />
                    <div className="t">
                      <b>Mailing Address</b>
                      10 Microlab Road<br />Livingston, NJ 07039
                    </div>
                  </div>
                  <div className="row">
                    <Icon name="phone" size={20} />
                    <div className="t">
                      <b>Phone</b>
                      (973) 251-0200
                    </div>
                  </div>
                  <div className="row">
                    <Icon name="at-sign" size={20} />
                    <div className="t">
                      <b>Email</b>
                      <a href="mailto:info@soulcenternj.com">info@soulcenternj.com</a>
                    </div>
                  </div>
                </div>

                <div className="map-ph">
                  <div className="pin"><Icon name="map-pin" size={18} /></div>
                </div>
              </div>
            </div>

            <div>
              <form onSubmit={submitContact} className="ded-form" style={{ marginTop: 0 }}>
                <div className="ded-form-head">
                  <h2 style={{ fontSize: 28 }}>Send us a note</h2>
                </div>
                <div className="form-grid">
                  <div className="form-field full">
                    <label>Full Name <span className="req">*</span></label>
                    <input type="text" required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="form-field">
                    <label>Email <span className="req">*</span></label>
                    <input type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
                  </div>
                  <div className="form-field">
                    <label>Phone</label>
                    <input type="tel" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
                  </div>
                  <div className="form-field full">
                    <label>How can we help? <span className="req">*</span></label>
                    <textarea rows="5" required value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
                  </div>
                </div>

                {sendError && (
                  <div style={{
                    marginTop: 12, padding: 12, borderRadius: 10,
                    background: '#fff3f3', color: '#8a1f1f', border: '1px solid #e4b5b5'
                  }}>
                    {sendError}
                  </div>
                )}

                <div className="form-submit">
                  <p>We'll respond within two business days.</p>
                  <Button variant="primary" size="lg" icon="send" type="submit" disabled={sending}>
                    {sending ? 'Sending…' : 'Send message'}
                  </Button>
                </div>

                {sent && (
                  <div style={{
                    marginTop: 20, padding: 16, borderRadius: 12,
                    background: 'var(--sc-blue-20)', color: 'var(--sc-indigo)'
                  }}>
                    <b>Thank you!</b> Your message is on its way. We'll be in touch soon.
                  </div>
                )}
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.ContactPage = ContactPage;