// Anologe — Contact form (full validation, no real submit)

const SYSTEMS = [
  'Revenue Operations',
  'AI Workflow Automation',
  'Internal Systems',
  'CRM Infrastructure',
  'Growth Operations',
  'Customer Support',
  'Payment Operations',
  'Knowledge Orchestration',
  'Reporting & Attribution',
  'AI Agent Deployment'
];

const SIZE_OPTS = [
  '1–10', '11–50', '51–200', '201–500', '500+'
];

const TIMING_OPTS = [
  { v: 'now', label: 'This quarter' },
  { v: 'soon', label: 'Next quarter' },
  { v: 'exploring', label: 'Exploring' }
];

function ContactForm() {
  const [step, setStep] = React.useState(1);
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    company: '',
    role: '',
    size: '51–200',
    timing: 'now',
    systems: ['Revenue Operations'],
    stack: '',
    note: ''
  });
  const [touched, setTouched] = React.useState({});

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const toggleSystem = (s) => {
    setForm((f) => ({ ...f, systems: f.systems.includes(s) ? f.systems.filter((x) => x !== s) : [...f.systems, s] }));
  };

  const errs = {
    name: !form.name.trim() ? 'Required' : '',
    email: !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email) ? 'Valid email required' : '',
    company: !form.company.trim() ? 'Required' : '',
    role: !form.role.trim() ? 'Required' : '',
    systems: form.systems.length === 0 ? 'Pick at least one' : '',
    note: form.note.trim().length < 30 ? 'At least 30 characters' : ''
  };

  const step1Ok = !errs.name && !errs.email && !errs.company && !errs.role;
  const step2Ok = !errs.systems;
  const step3Ok = !errs.note;

  const next = () => {
    if (step === 1) {
      setTouched({ ...touched, name: true, email: true, company: true, role: true });
      if (step1Ok) setStep(2);
    } else if (step === 2) {
      if (step2Ok) setStep(3);
    }
  };

  const submit = (e) => {
    e.preventDefault();
    setTouched({ ...touched, note: true });
    if (step3Ok) setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="cf-success card">
        <div className="cf-success-mark">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <path d="M5 11 L9.5 15.5 L17 7" stroke="var(--accent)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <h3 style={{ marginTop: 18 }}>Working session requested.</h3>
        <p style={{ color: 'var(--mute)', marginTop: 8, maxWidth: '52ch', lineHeight: 1.55 }}>
          An operating partner will reply to <strong style={{ color: 'var(--ink)' }}>{form.email}</strong> within 1 working day. We don't ghost.
        </p>
        <div className="cf-receipt mono">
          <div><span className="lbl">Reference</span><span>ANL‑{Date.now().toString(36).toUpperCase().slice(-7)}</span></div>
          <div><span className="lbl">Routed to</span><span>RevOps Partner · LON</span></div>
          <div><span className="lbl">Systems flagged</span><span>{form.systems.length} of 10</span></div>
          <div><span className="lbl">Reply SLA</span><span>≤ 24h working time</span></div>
        </div>
        <CFStyle />
      </div>
    );
  }

  return (
    <form className="cf card" onSubmit={submit} noValidate>
      <div className="cf-progress">
        {[1, 2, 3].map((n) => (
          <div key={n} className={`cf-step ${step >= n ? 'on' : ''}`}>
            <span className="mono">{String(n).padStart(2, '0')}</span>
            <span>{['You', 'Surface area', 'Note'][n - 1]}</span>
          </div>
        ))}
      </div>

      {step === 1 && (
        <div className="cf-pane">
          <div className="cf-row">
            <Field label="Your name" error={touched.name && errs.name}>
              <input className={`input ${touched.name && errs.name ? 'invalid' : ''}`} value={form.name} onChange={(e) => set('name', e.target.value)} onBlur={() => setTouched({ ...touched, name: true })} placeholder="Eliot Marsden" />
            </Field>
            <Field label="Work email" error={touched.email && errs.email}>
              <input type="email" className={`input ${touched.email && errs.email ? 'invalid' : ''}`} value={form.email} onChange={(e) => set('email', e.target.value)} onBlur={() => setTouched({ ...touched, email: true })} placeholder="you@company.co" />
            </Field>
          </div>
          <div className="cf-row">
            <Field label="Company" error={touched.company && errs.company}>
              <input className={`input ${touched.company && errs.company ? 'invalid' : ''}`} value={form.company} onChange={(e) => set('company', e.target.value)} onBlur={() => setTouched({ ...touched, company: true })} placeholder="Substrate" />
            </Field>
            <Field label="Your role" error={touched.role && errs.role}>
              <input className={`input ${touched.role && errs.role ? 'invalid' : ''}`} value={form.role} onChange={(e) => set('role', e.target.value)} onBlur={() => setTouched({ ...touched, role: true })} placeholder="VP Operations" />
            </Field>
          </div>
          <div className="cf-row">
            <Field label="Company size">
              <div className="seg">
                {SIZE_OPTS.map((s) => (
                  <button type="button" key={s} className={`seg-btn ${form.size === s ? 'on' : ''}`} onClick={() => set('size', s)}>{s}</button>
                ))}
              </div>
            </Field>
            <Field label="Timing">
              <div className="seg">
                {TIMING_OPTS.map((t) => (
                  <button type="button" key={t.v} className={`seg-btn ${form.timing === t.v ? 'on' : ''}`} onClick={() => set('timing', t.v)}>{t.label}</button>
                ))}
              </div>
            </Field>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="cf-pane">
          <Field label="Systems you're considering" error={touched.systems && errs.systems}>
            <div className="sys-grid">
              {SYSTEMS.map((s, i) => {
                const on = form.systems.includes(s);
                return (
                  <button type="button" key={s} className={`sys-pill ${on ? 'on' : ''}`} onClick={() => toggleSystem(s)}>
                    <span className="mono ix">S{String(i + 1).padStart(2, '0')}</span>
                    <span>{s}</span>
                    <span className="check">{on ? '●' : '○'}</span>
                  </button>
                );
              })}
            </div>
          </Field>
          <Field label="Current stack (optional)">
            <input className="input" value={form.stack} onChange={(e) => set('stack', e.target.value)} placeholder="HubSpot · Stripe · Snowflake · Customer.io" />
          </Field>
        </div>
      )}

      {step === 3 && (
        <div className="cf-pane">
          <Field label="What are you trying to fix" error={touched.note && errs.note}>
            <textarea className={`textarea ${touched.note && errs.note ? 'invalid' : ''}`} rows="6" value={form.note} onChange={(e) => set('note', e.target.value)} onBlur={() => setTouched({ ...touched, note: true })} placeholder="One paragraph. Concrete. What's broken, what you've tried, what 'good' looks like in six weeks." />
            <div className="mono" style={{ fontSize: 11, color: 'var(--mute-1)', marginTop: 6 }}>
              {form.note.length} / 30 minimum
            </div>
          </Field>
          <div className="cf-summary">
            <div className="mono lbl">Summary</div>
            <ul>
              <li><span className="mono">Who</span> {form.name} · {form.role} at {form.company}</li>
              <li><span className="mono">Size</span> {form.size} · {TIMING_OPTS.find((t) => t.v === form.timing).label}</li>
              <li><span className="mono">Systems</span> {form.systems.join(' · ') || '—'}</li>
              {form.stack && <li><span className="mono">Stack</span> {form.stack}</li>}
            </ul>
          </div>
        </div>
      )}

      <div className="cf-foot">
        <div className="mono" style={{ fontSize: 11, color: 'var(--mute)', letterSpacing: '0.04em' }}>
          <span className="kbd">Esc</span> to cancel · <span className="kbd">Tab</span> to navigate · routed by partner
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          {step > 1 && <button type="button" className="btn" onClick={() => setStep(step - 1)}>← Back</button>}
          {step < 3 && (
            <button type="button" className="btn primary" onClick={next} disabled={step === 1 ? !step1Ok && Object.keys(touched).length > 0 : false}>
              Continue <span className="arrow">→</span>
            </button>
          )}
          {step === 3 && (
            <button type="submit" className="btn primary">Submit · book session <span className="arrow">→</span></button>
          )}
        </div>
      </div>

      <CFStyle />
    </form>
  );
}

function Field({ label, error, children }) {
  return (
    <div className="cf-field">
      <label className="label">{label}</label>
      {children}
      {error && <div className="field-error">{error}</div>}
    </div>
  );
}

function CFStyle() {
  return (
    <style>{`
      .cf, .cf-success { padding: 0; }
      .cf-progress { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
      .cf-step { padding: 14px 18px; display: flex; gap: 10px; align-items: center; border-right: 1px solid var(--line); color: var(--mute-1); font-size: 13px; letter-spacing: -0.005em; }
      .cf-step:last-child { border-right: 0; }
      .cf-step .mono { font-size: 11px; letter-spacing: 0.06em; color: var(--mute-1); }
      .cf-step.on { color: var(--ink); background: #fcfcf9; }
      .cf-step.on .mono { color: var(--ink); }
      .cf-pane { padding: 24px; display: flex; flex-direction: column; gap: 18px; min-height: 280px; }
      .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      .cf-field { display: flex; flex-direction: column; }
      .seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
      .seg-btn { background: transparent; border: 0; padding: 9px 12px; font-family: var(--font-sans); font-size: 13px; color: var(--mute); border-right: 1px solid var(--line); cursor: pointer; flex: 1; }
      .seg-btn:last-child { border-right: 0; }
      .seg-btn.on { background: var(--ink); color: #fafaf7; }
      .seg-btn:hover:not(.on) { background: var(--bg-1); color: var(--ink); }
      .sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .sys-pill {
        display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 10px;
        padding: 11px 12px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
        font-size: 14px; color: var(--ink-1); text-align: left; cursor: pointer; transition: border-color 160ms, background 160ms;
      }
      .sys-pill:hover { background: #fcfcf9; }
      .sys-pill.on { border-color: var(--ink); background: var(--ink); color: #fafaf7; }
      .sys-pill .ix { font-size: 10.5px; color: var(--mute-1); letter-spacing: 0.04em; }
      .sys-pill.on .ix { color: rgba(255,255,255,0.4); }
      .sys-pill .check { color: var(--mute-1); font-size: 14px; justify-self: end; }
      .sys-pill.on .check { color: var(--accent); }
      .cf-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; background: #fcfcf9; border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
      .cf-summary { padding: 14px 16px; background: var(--bg-1); border-radius: var(--radius); }
      .cf-summary .lbl { font-size: 11px; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
      .cf-summary ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-1); }
      .cf-summary ul .mono { display: inline-block; min-width: 64px; color: var(--mute); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

      .cf-success { padding: 36px 32px 32px; text-align: center; }
      .cf-success-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
      .cf-success h3 { font-size: 28px; }
      .cf-receipt { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; background: var(--bg-1); border-radius: var(--radius); text-align: left; font-size: 12px; }
      .cf-receipt > div { display: flex; flex-direction: column; gap: 2px; }
      .cf-receipt .lbl { color: var(--mute); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }

      @media (max-width: 600px) { .cf-row { grid-template-columns: 1fr; } .sys-grid { grid-template-columns: 1fr; } .cf-receipt { grid-template-columns: 1fr; } }
    `}</style>
  );
}

const root = document.getElementById('contact-form-root');
if (root) ReactDOM.createRoot(root).render(<ContactForm />);