// CONTACT page — form + webhook submission with terminal success animation.

function PageContact() {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', message: '' });
  const [phase, setPhase] = React.useState('idle'); // idle | sending | ok | err
  const [errMsg, setErrMsg] = React.useState('');
  const [log, setLog] = React.useState([]);

  const WEBHOOK_URL = ''; // ← paste webhook endpoint here

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const appendLog = (line) => setLog(l => [...l, line]);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (phase === 'sending') return;

    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) {
      setErrMsg('missing required field · name, email, message');
      setPhase('err');
      return;
    }

    setPhase('sending');
    setLog([]);
    appendLog('[init] compiling payload …');
    await sleep(280);
    appendLog(`[ok]   signed · ${new Date().toISOString()}`);
    await sleep(220);
    appendLog('[tx]   POST → /forge/intake');
    await sleep(420);

    if (!WEBHOOK_URL) {
      // No webhook wired yet — simulate success so the UI works.
      appendLog('[warn] webhook·offline · message stored locally');
      await sleep(260);
      appendLog('[ok]   handoff → operator inbox');
      await sleep(200);
      appendLog('[done] transmission complete.');
      setPhase('ok');
      return;
    }

    try {
      const res = await fetch(WEBHOOK_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, source: '01forge.ai', ts: Date.now() }),
      });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      appendLog('[ok]   200 · received');
      await sleep(220);
      appendLog('[done] transmission complete.');
      setPhase('ok');
    } catch (err) {
      appendLog('[err]  ' + err.message);
      setErrMsg(err.message);
      setPhase('err');
    }
  };

  const reset = () => {
    setForm({ name: '', email: '', company: '', message: '' });
    setPhase('idle');
    setLog([]);
    setErrMsg('');
  };

  return (
    <div className="page page-contact">
      <TopBar variant={3} />

      <div className="page-header">
        <div className="page-crumb mono upper">
          <a href="#/" className="nav-link">◀ HOME</a>
          <span className="faint">/</span>
          <span className="accent">CONTACT</span>
        </div>
        <div className="page-meta mono upper dim">
          SECURE·CHANNEL · OPERATOR·INBOX
        </div>
      </div>

      <section className="contact-grid">
        <div className="contact-left">
          <div className="mono upper dim contact-eyebrow">// transmission</div>
          <p className="contact-blurb dim">
            Tell me what's repetitive, expensive, or slow.
            I read everything; I reply to what I can build.
          </p>

          <div className="contact-meta">
            <div className="contact-meta-row">
              <span className="mono upper dim">direct</span>
              <a href="mailto:max@01forge.ai" className="mono accent">max@01forge.ai</a>
            </div>
            <div className="contact-meta-row">
              <span className="mono upper dim">intake</span>
              <span className="mono">referral · by invite</span>
            </div>
            <div className="contact-meta-row">
              <span className="mono upper dim">response</span>
              <span className="mono">&lt; 48h · weekdays</span>
            </div>
            <div className="contact-meta-row">
              <span className="mono upper dim">timezone</span>
              <span className="mono">PT · SF</span>
            </div>
          </div>
        </div>

        <div className="contact-right">
          {phase !== 'ok' ? (
            <form className="panel contact-form" onSubmit={onSubmit} noValidate>
              <div className="panel__label"><span className="dot" />INTAKE · FORM</div>

              <label className="field">
                <span className="field-label mono upper dim">name</span>
                <input
                  className="field-input mono"
                  type="text"
                  value={form.name}
                  onChange={e => update('name', e.target.value)}
                  placeholder="operator"
                  disabled={phase === 'sending'}
                />
              </label>

              <label className="field">
                <span className="field-label mono upper dim">email</span>
                <input
                  className="field-input mono"
                  type="email"
                  value={form.email}
                  onChange={e => update('email', e.target.value)}
                  placeholder="you@domain"
                  disabled={phase === 'sending'}
                />
              </label>

              <label className="field">
                <span className="field-label mono upper dim">company <span className="faint">· optional</span></span>
                <input
                  className="field-input mono"
                  type="text"
                  value={form.company}
                  onChange={e => update('company', e.target.value)}
                  placeholder="where you're forging"
                  disabled={phase === 'sending'}
                />
              </label>

              <label className="field">
                <span className="field-label mono upper dim">what are you trying to solve?</span>
                <textarea
                  className="field-input field-textarea mono"
                  value={form.message}
                  onChange={e => update('message', e.target.value)}
                  placeholder="describe the workflow · volume · current pain"
                  rows={5}
                  disabled={phase === 'sending'}
                />
              </label>

              {phase === 'err' && (
                <div className="form-error mono">// err · {errMsg}</div>
              )}

              {(phase === 'sending' || log.length > 0) && (
                <div className="form-log mono">
                  {log.map((l, i) => (
                    <div key={i} className={l.includes('[err]') ? 'err' : l.includes('[ok]') || l.includes('[done]') ? 'accent' : 'dim'}>
                      {l}
                    </div>
                  ))}
                  {phase === 'sending' && <div className="blink dim">_</div>}
                </div>
              )}

              <button
                type="submit"
                className="cta contact-submit"
                disabled={phase === 'sending'}
              >
                {phase === 'sending' ? (
                  <>TRANSMITTING <span className="blink">_</span></>
                ) : (
                  <>&gt;_ TRANSMIT <span className="cta-arrow">→</span></>
                )}
              </button>
            </form>
          ) : (
            <div className="panel contact-success">
              <div className="panel__label"><span className="dot" />SIGNAL · RECEIVED</div>
              <div className="success-ascii mono">{`
  ╔══════════════════════╗
  ║  ░▒▓█ OK █▓▒░        ║
  ║  TRANSMISSION CLEAN  ║
  ╚══════════════════════╝`}</div>
              <p className="success-msg">
                Signal received, <span className="accent">{form.name || 'operator'}</span>.
                <br/>
                I'll respond to <span className="mono accent">{form.email}</span> within 48h.
              </p>
              <div className="form-log mono">
                {log.map((l, i) => (
                  <div key={i} className={l.includes('[ok]') || l.includes('[done]') ? 'accent' : 'dim'}>{l}</div>
                ))}
              </div>
              <button type="button" className="cta success-reset" onClick={reset}>
                &gt;_ SEND ANOTHER <span className="cta-arrow">→</span>
              </button>
            </div>
          )}
        </div>
      </section>

      <footer className="page-foot mono upper dim">
        <span>CH·ENCRYPTED</span>
        <span>·</span>
        <a href="#/" className="nav-link">RETURN HOME</a>
      </footer>
    </div>
  );
}

function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }

window.PageContact = PageContact;