// Contact / onboarding — working form with validation + success state.

function Contact() {
  const interests = ['Web hosting', 'Business email', 'Cloud storage', 'GPU compute'];
  const [form, setForm] = React.useState({ name: '', email: '', company: '', workload: '', gpus: '1', message: '', interest: ['Web hosting'] });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [ticket, setTicket] = React.useState('');

  const set = (k, v) => { setForm(f => ({ ...f, [k]: v })); setErrors(e => ({ ...e, [k]: undefined })); };
  const toggle = (v) => setForm(f => ({ ...f, interest: f.interest.includes(v) ? f.interest.filter(x => x !== v) : [...f.interest, v] }));

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.email.trim()) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Enter a valid email';
    if (!form.workload) e.workload = 'Select one';
    return e;
  };
  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setTicket('THX-' + Math.random().toString(36).slice(2, 7).toUpperCase());
    setSent(true);
  };

  return (
    <Section id="contact" dark pad={96}>
      <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 64, alignItems: 'start' }}>
        <div>
          <Eyebrow index="10" dark>Get started</Eyebrow>
          <h2 style={{ fontSize: 'clamp(32px,3.8vw,46px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.08, margin: '18px 0 18px', color: 'var(--inv-fg)' }}>
            Tell us what<br />to host.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--inv-fg-2)', maxWidth: '40ch', lineHeight: 1.65, margin: '0 0 28px' }}>
            Self-serve checkout isn't live yet. Send the details and a named ops engineer will scope it and follow up, usually same day.
          </p>
          <div style={{ borderTop: '1px solid var(--inv-rule)', paddingTop: 20, fontSize: 14, color: 'var(--inv-fg-2)', display: 'grid', gap: 10 }}>
            <a href="mailto:info@tensorhost.com" style={{ color: 'var(--inv-fg)', textDecoration: 'none', display: 'inline-flex', gap: 10, alignItems: 'center' }}><span style={{ color: 'var(--accent)' }}>→</span> info@tensorhost.com</a>
            <a href="#" style={{ color: 'var(--inv-fg)', textDecoration: 'none', display: 'inline-flex', gap: 10, alignItems: 'center' }}><span style={{ color: 'var(--accent)' }}>↗</span> LinkedIn</a>
          </div>
        </div>

        <div style={{ background: 'var(--inv-bg-2)', border: '1px solid var(--inv-rule)', borderRadius: 4, padding: 32 }}>
          {sent ? (
            <div style={{ fontVariantNumeric: 'tabular-nums' }}>
              <div style={{ color: 'var(--accent)', fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 16, textShadow: '0 0 9px var(--accent-soft)' }}>● Request received</div>
              <pre style={{ margin: 0, fontFamily: 'inherit', fontSize: 13, lineHeight: 1.8, color: 'var(--inv-fg-2)', whiteSpace: 'pre-wrap' }}>
{`$ tensorhost onboard --submit
  → ticket .......... ${ticket}
  → contact ......... ${form.email}
  → workload ........ ${form.workload}
  → interest ........ ${form.interest.join(', ') || 'none'}
  → status .......... queued for ops review

A named engineer will reply shortly.`}
              </pre>
              <button onClick={() => { setSent(false); setForm({ name: '', email: '', company: '', workload: '', gpus: '1', message: '', interest: ['GPU rental'] }); }}
                style={{ marginTop: 24, fontFamily: 'inherit', fontSize: 13, background: 'transparent', color: 'var(--inv-fg)', border: '1px solid var(--inv-rule)', borderRadius: 2, padding: '10px 16px', cursor: 'pointer' }}>
                Send another →
              </button>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Field label="Name" err={errors.name}><input style={inp(errors.name)} value={form.name} onChange={e => set('name', e.target.value)} placeholder="Ada Lovelace" /></Field>
                <Field label="Work email" err={errors.email}><input style={inp(errors.email)} value={form.email} onChange={e => set('email', e.target.value)} placeholder="ada@company.com" /></Field>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                <Field label="Company (optional)"><input style={inp()} value={form.company} onChange={e => set('company', e.target.value)} placeholder="Company Ltd" /></Field>
                <Field label="Team size">
                  <select style={inp()} value={form.gpus} onChange={e => set('gpus', e.target.value)}>
                    {['1', '2–10', '11–50', '51–200', '200+'].map(o => <option key={o} value={o} style={{ color: '#000' }}>{o}</option>)}
                  </select>
                </Field>
              </div>
              <div style={{ marginTop: 16 }}>
                <Field label="What do you need?" err={errors.workload}>
                  <select style={inp(errors.workload)} value={form.workload} onChange={e => set('workload', e.target.value)}>
                    <option value="" style={{ color: '#000' }}>Select…</option>
                    {['Web hosting', 'Business email', 'Cloud storage', 'GPU compute', 'A mix / not sure'].map(o => <option key={o} value={o} style={{ color: '#000' }}>{o}</option>)}
                  </select>
                </Field>
              </div>

              <div style={{ marginTop: 20 }}>
                <div style={lbl}>Interested in</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {interests.map(it => {
                    const on = form.interest.includes(it);
                    return (
                      <button type="button" key={it} onClick={() => toggle(it)}
                        style={{ fontFamily: 'inherit', fontSize: 13, padding: '8px 14px', borderRadius: 2, cursor: 'pointer',
                          border: `1px solid ${on ? 'var(--accent)' : 'var(--inv-rule)'}`, background: on ? 'color-mix(in srgb, var(--accent) 16%, var(--inv-bg-2))' : 'transparent', color: on ? 'var(--inv-fg)' : 'var(--inv-fg-3)' }}>
                        {on ? '✓ ' : ''}{it}
                      </button>
                    );
                  })}
                </div>
              </div>

              <div style={{ marginTop: 20 }}>
                <Field label="Anything else (optional)"><textarea style={{ ...inp(), minHeight: 84, resize: 'vertical' }} value={form.message} onChange={e => set('message', e.target.value)} placeholder="Models, timelines, region needs…" /></Field>
              </div>

              <button type="submit" style={{ marginTop: 24, width: '100%', fontFamily: 'inherit', fontSize: 15, padding: '15px', borderRadius: 2, cursor: 'pointer', background: 'var(--inv-fg)', color: 'var(--inv-bg)', border: '1px solid var(--inv-fg)', display: 'inline-flex', justifyContent: 'center', gap: 8, alignItems: 'center' }}>
                Submit request <span style={{ color: 'var(--accent)' }}>→</span>
              </button>
            </form>
          )}
        </div>
      </div>
    </Section>
  );
}

const lbl = { fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--inv-fg-3)', marginBottom: 9, display: 'flex', justifyContent: 'space-between' };
function Field({ label, err, children }) {
  return (
    <label style={{ display: 'block' }}>
      <div style={lbl}><span>{label}</span>{err && <span style={{ color: 'var(--accent)', letterSpacing: 0, textTransform: 'none' }}>{err}</span>}</div>
      {children}
    </label>
  );
}
const inp = (err) => ({
  width: '100%', fontFamily: 'inherit', fontSize: 14, padding: '11px 13px', borderRadius: 2,
  background: 'var(--inv-bg)', color: 'var(--inv-fg)', border: `1px solid ${err ? 'var(--accent)' : 'var(--inv-rule)'}`,
  outline: 'none', boxSizing: 'border-box',
});

window.Contact = Contact;