const { useState: useState_cf } = React;

/** Shared intake form — posts to /api/contact (Mailtrap → contact@cyrion.ai + Supabase). */
function ContactForm({ submitLabel = 'Submit intake · → schedule briefing' }) {
  const [form, setForm] = useState_cf({ name: '', email: '', company: '', jobTitle: '', message: '' });
  const [status, setStatus] = useState_cf('idle');
  const [msg, setMsg] = useState_cf('');

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.email.trim() || !form.message.trim()) {
      setStatus('error'); setMsg('Name, work email, and message are required.'); return;
    }
    setStatus('loading'); setMsg('');
    try {
      const res = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form) });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setStatus('error'); setMsg(data.error || 'Something went wrong'); return; }
      setStatus('success'); setMsg('Message sent. We will be in touch shortly.');
      setForm({ name: '', email: '', company: '', jobTitle: '', message: '' });
    } catch (err) {
      setStatus('error'); setMsg('Network error. Please try again.');
    }
  };

  const sent = status === 'success';

  return (
    <form className="card" style={{ padding: 28, position: 'relative' }} onSubmit={handleSubmit}>
      <span className="ticks"><i /><b /></span>
      <div className="bracket" style={{ marginBottom: 14 }}>SECURE INTAKE · TLS-1.3</div>
      <div className="field-row">
        <Field label="Full name *" placeholder="Jane Doe" value={form.name} onChange={update('name')} />
        <Field label="Work email *" placeholder="ciso@company.com" type="email" value={form.email} onChange={update('email')} />
      </div>
      <div className="field-row">
        <Field label="Company" placeholder="ACME Corp." value={form.company} onChange={update('company')} />
        <Field label="Job title" placeholder="Security Engineer" value={form.jobTitle} onChange={update('jobTitle')} />
      </div>
      <Field label="Message *" placeholder="What keeps you up at night?" as="textarea" value={form.message} onChange={update('message')} />
      <button type="submit" className="btn btn-primary" disabled={status === 'loading' || sent} style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
        {status === 'loading' ? 'Sending…' : sent ? '✓ Message sent' : submitLabel}
      </button>
      {msg && <div style={{ marginTop: 12, fontSize: 11.5, textAlign: 'center', color: status === 'error' ? 'var(--red)' : 'var(--green)' }}>{msg}</div>}
      <div className="dim" style={{ marginTop: 12, fontSize: 11, textAlign: 'center' }}>Mutual NDA executed before any technical exchange.</div>
    </form>
  );
}

function Field({ label, placeholder, value, onChange, as = 'input', type = 'text' }) {
  return (
    <label className="field-label">
      <span className="caption" style={{ display: 'block', marginBottom: 8 }}>{label}</span>
      {as === 'textarea'
        ? <textarea className="field-input" placeholder={placeholder} value={value} onChange={onChange} rows={3} style={{ resize: 'vertical' }} />
        : <input className="field-input" type={type} placeholder={placeholder} value={value} onChange={onChange} />}
    </label>
  );
}

Object.assign(window, { ContactForm, Field });