/* global React */
const { useState } = React;

// Dedicated contact page body — intro left, form right.
// Fields: name, work email, company name, message. Interactive: controlled
// inputs, lightweight validation, and a submitted confirmation state.
function ContactPage() {
  const isDemo = localStorage.getItem('contact_intent') === 'demo';
  localStorage.removeItem('contact_intent');
  const [form, setForm] = useState({ name: '', email: '', company: '', message: isDemo ? "I'd like to explore a demo of Holdpoint." : '' });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(false);

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setError(false);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('send failed');
      setSent(true);
    } catch (err) {
      setError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <main className="contact-page">
      <div className="page">
        <div className="contact__grid">
          <div className="contact__intro">
            <p className="eyebrow">Contact</p>
            <h1 className="h1 contact__title">Request access.</h1>
            <p className="lead contact__lead">
              Tell us about your firm and what you are trying to do. We will arrange a
              conversation. Holdpoint deploys inside your environment, so the first step is
              understanding it.
            </p>
            <dl className="contact__meta">
              <div className="contact__meta-row">
                <dt className="small contact__meta-key">Email</dt>
                <dd className="p contact__meta-val">info@holdpointai.com</dd>
              </div>
            </dl>
          </div>

          <div className="contact__form-wrap">
            {sent ? (
              <div className="contact__sent">
                <h2 className="h3">Thank you.</h2>
                <p className="p p-muted">
                  We have received your request and will be in touch shortly.
                </p>
                <a href="/" className="contact__back">Back to home</a>
              </div>
            ) : (
              <form className="form" onSubmit={submit}>
                <div className="field">
                  <label className="field__label" htmlFor="f-name">Name</label>
                  <input id="f-name" className="field__input" value={form.name}
                    onChange={set('name')} autoComplete="name" required />
                </div>
                <div className="field">
                  <label className="field__label" htmlFor="f-email">Work email</label>
                  <input id="f-email" type="email" className="field__input" value={form.email}
                    onChange={set('email')} autoComplete="email" required />
                </div>
                <div className="field">
                  <label className="field__label" htmlFor="f-company">Company name</label>
                  <input id="f-company" className="field__input" value={form.company}
                    onChange={set('company')} autoComplete="organization" required />
                </div>
                <div className="field">
                  <label className="field__label" htmlFor="f-message">Message</label>
                  <textarea id="f-message" className="field__input field__input--area" rows="5"
                    value={form.message} onChange={set('message')}
                    placeholder="What are you trying to do?" required />
                </div>
                {/* Honeypot — hidden from people, tempting to bots. The API
                    silently discards any submission that fills it. */}
                <input
                  type="text" name="website" className="form__hp"
                  value={form.website || ''} onChange={set('website')}
                  tabIndex={-1} autoComplete="off" aria-hidden="true"
                />
                <button type="submit" className="btn-accent form__submit" disabled={sending}>
                  {sending ? 'Sending\u2026' : 'Send request'}
                </button>
                {error && (
                  <p className="small form__error" role="alert">
                    Something went wrong and your request was not sent. Please try
                    again, or email us directly at info@holdpointai.com.
                  </p>
                )}
                <p className="small form__note">
                  Your message reaches our team directly. We do not share it.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

window.ContactPage = ContactPage;