function ContactPage() {
  const [form, setForm] = React.useState({ name: '', email: '', message: '' });
  const [errors, setErrors] = React.useState({});
  const [status, setStatus] = React.useState('idle');
  const [focus, setFocus] = React.useState(null);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Please tell me your name.';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Enter a valid email address.';
    if (form.message.trim().length < 20) e.message = 'A little more detail please — at least 20 characters.';
    return e;
  };

  const submit = async ev => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) { setStatus('error'); return; }
    setStatus('sending');
    try {
      const res = await fetch(PROFILE.formEndpoint, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      setStatus(res.ok ? 'sent' : 'submit-error');
    } catch {
      setStatus('submit-error');
    }
  };

  const set = k => ev => { setForm({ ...form, [k]: ev.target.value }); if (errors[k]) setErrors({ ...errors, [k]: undefined }); };
  const err = k => errors[k] ? <span role="alert" style={{ font: 'var(--type-caption)', color: 'var(--primary-deep)', display: 'flex', gap: 6, alignItems: 'center' }}><Icon name="AlertCircle" size={13} />{errors[k]}</span> : null;

  return (
    <div className="pf-page">
      <Section>
        <PageHead eyebrow="Contact" title="Get in touch with me." lede="Prefer email? Reach me directly at officialharsh147@gmail.com." />
        <div className="pf-split" style={{ display: 'grid', gridTemplateColumns: 'minmax(300px,520px) 1fr', gap: 'var(--space-section)', alignItems: 'start' }}>
          <Reveal>
            <form onSubmit={submit} noValidate style={{ background: 'var(--cream)', border: '1px solid var(--beige-deep)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-xxl)', display: 'grid', gap: 'var(--space-md)' }}>
              {status === 'sent' ? (
                <div role="status" style={{ display: 'grid', gap: 'var(--space-sm)', justifyItems: 'start' }}>
                  <span style={{ display: 'grid', placeItems: 'center', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--canvas)', border: '1px solid var(--beige-deep)', color: 'var(--primary)' }}><Icon name="Check" size={22} /></span>
                  <h2 style={{ font: 'var(--type-heading-4)', color: 'var(--ink)', margin: 0 }}>Message sent.</h2>
                  <p style={{ font: 'var(--type-body-md)', color: 'var(--slate)', margin: 0 }}>Thanks — I reply within two working days.</p>
                  <Button variant="secondary" onClick={() => { setForm({ name: '', email: '', message: '' }); setStatus('idle'); }}>Send another</Button>
                </div>
              ) : (
                <React.Fragment>
                  <h2 style={{ font: 'var(--type-heading-4)', color: 'var(--ink)', margin: 0 }}>Send a message</h2>
                  <div style={{ display: 'grid', gap: '6px' }}>
                    <Input label="Name" value={form.name} onChange={set('name')} onFocus={() => setFocus('name')} onBlur={() => setFocus(null)} focused={focus === 'name'} placeholder="Your name" aria-invalid={!!errors.name} required />
                    {err('name')}
                  </div>
                  <div style={{ display: 'grid', gap: '6px' }}>
                    <Input label="Email" type="email" value={form.email} onChange={set('email')} onFocus={() => setFocus('email')} onBlur={() => setFocus(null)} focused={focus === 'email'} placeholder="you@company.com" aria-invalid={!!errors.email} required />
                    {err('email')}
                  </div>
                  <div style={{ display: 'grid', gap: '6px' }}>
                    <TextArea label="Message" rows={5} value={form.message} onChange={set('message')} onFocus={() => setFocus('message')} onBlur={() => setFocus(null)} focused={focus === 'message'} placeholder="A sentence or two about the role or project." aria-invalid={!!errors.message} required />
                    {err('message')}
                  </div>
                  <Button variant="dark" full disabled={status === 'sending'}>{status === 'sending' ? 'Sending…' : 'Send message'}</Button>
                  {status === 'error' && <span role="alert" style={{ font: 'var(--type-caption)', color: 'var(--primary-deep)' }}>Please fix the fields above and try again.</span>}
                  {status === 'submit-error' && <span role="alert" style={{ font: 'var(--type-caption)', color: 'var(--primary-deep)' }}>Something went wrong sending that — please email me directly at {PROFILE.email}.</span>}
                </React.Fragment>
              )}
            </form>
          </Reveal>
          <div style={{ display: 'grid', gap: 'var(--space-lg)' }}>
            <Reveal delay={90}>
              <Card style={{ display: 'grid', gap: 'var(--space-md)' }}>
                {[['Mail', 'Email', PROFILE.email], ['MapPin', 'Location', PROFILE.location]].map(([ic, k, v]) => (
                  <div key={k} style={{ display: 'flex', gap: 'var(--space-md)', alignItems: 'center' }}>
                    <span style={{ color: 'var(--primary)' }}><Icon name={ic} size={18} /></span>
                    <div><div style={{ font: 'var(--type-caption)', color: 'var(--steel)' }}>{k}</div><div style={{ font: 'var(--type-body-md-medium)', color: 'var(--ink)' }}>{v}</div></div>
                  </div>
                ))}
              </Card>
            </Reveal>
            <Reveal delay={170}><SocialRow /></Reveal>
            <Reveal delay={250}>
              <Card variant="creamSoft" style={{ display: 'grid', gap: 'var(--space-md)', justifyItems: 'start' }}>
                <Eyebrow>Résumé</Eyebrow>
                <p style={{ font: 'var(--type-body-md)', color: 'var(--charcoal)', margin: 0 }}>One page, PDF.</p>
                <Button variant="primary" as="a" href={PROFILE.resumeUrl} download><Icon name="Download" size={16} />Download résumé</Button>
              </Card>
            </Reveal>
          </div>
        </div>
      </Section>
    </div>
  );
}
Object.assign(window, { ContactPage });