/* KayaCore — Contact / Book a demo. Working form with validation + success state. */
function Field({ label, children, hint, error }) {
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--fg-muted)', marginBottom: 7 }}>{label}</span>
      {children}
      {error && <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--danger)', marginTop: 6 }}>{error}</span>}
      {!error && hint && <span style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--fg-faint)', marginTop: 6 }}>{hint}</span>}
    </label>
  );
}

const KC_INPUT = {
  width: '100%', boxSizing: 'border-box', background: 'var(--surface)',
  border: '1px solid var(--border)', borderRadius: 10, padding: '12px 14px',
  fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg)', outline: 'none',
  transition: 'border-color var(--dur), box-shadow var(--dur)',
};

function TextInput(props) {
  const [focus, setFocus] = React.useState(false);
  const { invalid, ...rest } = props;
  return (
    <input {...rest}
      onFocus={e => { setFocus(true); props.onFocus && props.onFocus(e); }}
      onBlur={e => { setFocus(false); props.onBlur && props.onBlur(e); }}
      style={{ ...KC_INPUT, ...(invalid ? { borderColor: 'var(--danger)' } : {}), ...(focus ? { borderColor: 'var(--accent)', boxShadow: '0 0 0 3px var(--ring)' } : {}) }} />
  );
}

function ContactPage({ verticals }) {
  const { navigate } = useRouter();
  const [form, setForm] = React.useState({ name: '', email: '', company: '', industry: verticals[0].id, time: '', notes: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = 'Tell us who you are.';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) er.email = 'Enter a valid work email.';
    if (!form.company.trim()) er.company = 'What\u2019s your company?';
    setErrors(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  const expect = [
    { icon: 'clock', t: 'A 30-minute call', d: 'We learn the jobs eating your team\u2019s time \u2014 no slide-ware.' },
    { icon: 'sparkles', t: 'A working agent', d: 'We show one running on a workflow like yours.' },
    { icon: 'shield', t: 'A clear plan', d: 'Scope, timeline (first agent live in under 48 hours) and flat pricing.' },
  ];

  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <Bloom at="80% -10%" size="640px 380px" color="var(--glow-violet)" />
      <NodeGrid fade="75% 5%" opacity={0.045} />
      <div style={{ position: 'relative', maxWidth: 1120, margin: '0 auto', padding: '64px 28px 88px', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 52, alignItems: 'start' }} className="kc-contactgrid">
        {/* left: pitch */}
        <div style={{ paddingTop: 8 }}>
          <span style={{ display: 'inline-flex' }}><Badge tone="accent"><KcIcon name="sparkles" size={13} />Book a demo</Badge></span>
          <h1 className="kc-h1" style={{ marginTop: 18 }}>See an agent on your own workflow.</h1>
          <p className="kc-lead" style={{ marginTop: 16, maxWidth: '42ch' }}>Tell us the job that’s eating your team’s time. We’ll show you a working agent — and what it costs to have us run it.</p>
          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
            {expect.map((x, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <IconChip name={x.icon} size={42} />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: 'var(--fg)' }}>{x.t}</div>
                  <div className="kc-small" style={{ marginTop: 3, color: 'var(--fg-subtle)' }} dangerouslySetInnerHTML={{ __html: x.d }} />
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 30, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
            {['SOC 2 Type II', 'Private deployment', 'No commitment'].map((t, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-subtle)' }}>
                <KcIcon name="check" size={14} style={{ color: 'var(--success)' }} />{t}
              </span>
            ))}
          </div>
        </div>

        {/* right: form card / success */}
        <div style={{ background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 160%)', border: '1px solid var(--border)', borderRadius: 22, padding: 'clamp(24px, 3vw, 34px)', boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -1, left: 24, right: 24, height: 1, background: 'linear-gradient(90deg, transparent, var(--accent-border), transparent)' }} />
          {sent ? (
            <div style={{ textAlign: 'center', padding: '28px 8px' }}>
              <span style={{ width: 64, height: 64, borderRadius: 999, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--accent-tint)', border: '1px solid var(--accent-border)', color: 'var(--accent)', boxShadow: '0 0 0 8px var(--glow-violet-soft)' }}>
                <KcIcon name="check" size={30} stroke={2.2} />
              </span>
              <h2 className="kc-h3" style={{ marginTop: 20 }}>You’re booked in, {form.name.split(' ')[0] || 'thanks'}.</h2>
              <p className="kc-body" style={{ marginTop: 10, marginInline: 'auto', maxWidth: '38ch' }}>We’ll email <strong style={{ color: 'var(--fg)', fontWeight: 600 }}>{form.email}</strong> within one business day to find a time. We’ll come ready with an agent idea for your <span dangerouslySetInnerHTML={{ __html: (verticals.find(v => v.id === form.industry) || {}).name || 'team' }} /> workflow.</p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
                <Button variant="secondary" onClick={() => navigate('/')}>Back to home</Button>
                <Button variant="ghost" onClick={() => { setSent(false); setForm({ name: '', email: '', company: '', industry: verticals[0].id, time: '', notes: '' }); }}>Submit another</Button>
              </div>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Field label="Your name" error={errors.name}>
                  <TextInput value={form.name} invalid={!!errors.name} placeholder="Dana Mercer" onChange={e => set('name', e.target.value)} />
                </Field>
                <Field label="Work email" error={errors.email}>
                  <TextInput type="email" value={form.email} invalid={!!errors.email} placeholder="you@company.com" onChange={e => set('email', e.target.value)} />
                </Field>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                <Field label="Company" error={errors.company}>
                  <TextInput value={form.company} invalid={!!errors.company} placeholder="Northwind" onChange={e => set('company', e.target.value)} />
                </Field>
                <Field label="Industry">
                  <div style={{ position: 'relative' }}>
                    <select value={form.industry} onChange={e => set('industry', e.target.value)}
                      style={{ ...KC_INPUT, appearance: 'none', WebkitAppearance: 'none', cursor: 'pointer', paddingRight: 38 }}>
                      {verticals.map(v => <option key={v.id} value={v.id} dangerouslySetInnerHTML={{ __html: v.name }} />)}
                      <option value="other">Something else</option>
                    </select>
                    <span style={{ position: 'absolute', right: 13, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: 'var(--fg-subtle)' }}><KcIcon name="chevronDown" size={16} /></span>
                  </div>
                </Field>
              </div>
              <div style={{ marginTop: 16 }}>
                <Field label="What's eating your team's time?" hint="A sentence is plenty — e.g. “re-keying submissions” or “lead follow-up.”">
                  <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={3} placeholder="The job you'd hand to an agent first…"
                    style={{ ...KC_INPUT, resize: 'vertical', minHeight: 84, lineHeight: 1.5 }} />
                </Field>
              </div>
              <div style={{ marginTop: 24 }}>
                <Button variant="primary" size="lg" icon="arrowRight" style={{ width: '100%', justifyContent: 'center' }}>Book my demo</Button>
              </div>
              <p className="kc-small" style={{ textAlign: 'center', color: 'var(--fg-faint)', marginTop: 14 }}>No commitment. We reply within one business day.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ContactPage, Field, TextInput });