/* ============================================================
   TEND, PRACTITIONER PROGRAMME · register your interest
   Decision 16 (16 October 2026): no claims about certification,
   accreditation or qualification anywhere on this page.
   ============================================================ */

/* Photograph from Unsplash, served from our own domain through /img/u.
   Credits and licence: design-source/photo-credits.md. Styles: .ph in site.css. */
function TPhoto({ id, alt, ratio = '4x3', pos, eager, sizes = '(min-width: 940px) 460px, 100vw', className = '' }) {
  const u = w => '/img/u/' + id + '?w=' + w + '&q=75&fm=webp&fit=crop';
  return (
    <figure className={'ph ph--' + ratio + (className ? ' ' + className : '')}>
      <img src={u(1200)} srcSet={[640, 960, 1400].map(w => u(w) + ' ' + w + 'w').join(', ')} sizes={sizes} alt={alt} loading={eager ? 'eager' : 'lazy'} fetchpriority={eager ? 'high' : undefined} decoding="async" style={pos ? { objectPosition: pos } : undefined} />
    </figure>
  );
}
const { useState: useP, useEffect: usePE, useRef: usePR } = React;

const PR_CUR = [['aqua', 'Aqua', 'North'], ['coral', 'Coral', 'East'], ['amber', 'Amber', 'South'], ['violet', 'Violet', 'West']];
const PR_STOPS = [
  { aqua: 84, coral: 36, amber: 22, violet: 42 },
  { aqua: 36, coral: 84, amber: 42, violet: 22 },
  { aqua: 22, coral: 42, amber: 84, violet: 36 },
  { aqua: 42, coral: 22, amber: 36, violet: 84 },
];

/* The needle turns to each current in turn, the ring of currents drifts
   slowly behind it, and both stop for reduced motion or while hovered. */
function alertBox(form, msg) { let p = form.querySelector('.form-err'); if (!p) { p = document.createElement('p'); p.className = 'form-err caption'; p.setAttribute('role', 'alert'); form.appendChild(p); } p.textContent = msg || 'Something went wrong. Please try again.'; }

function PracCompass() {
  const reduce = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
  const { ref, setTarget } = window.useAnimatedCompass(PR_STOPS[0], { size: 320, style: 'instrument', idSeed: 'pr' });
  const [i, setI] = useP(0);
  const paused = usePR(false);
  usePE(() => {
    if (reduce) return;
    const id = setInterval(() => { if (paused.current) return; setI(n => { const nx = (n + 1) % 4; setTarget(PR_STOPS[nx]); return nx; }); }, 2800);
    return () => clearInterval(id);
  }, []);
  const [k, name, dir] = PR_CUR[i];
  return (
    <figure className={'pr-compass' + (reduce ? ' still' : '')} onMouseEnter={() => { paused.current = true; }} onMouseLeave={() => { paused.current = false; }}>
      <div className="pr-dial" role="img" aria-label="The TEND Compass. Its needle turns in turn to Aqua at North, Coral at East, Amber at South and Violet at West.">
        <span className="pr-ring" aria-hidden="true" />
        <div ref={ref} />
      </div>
      {!reduce && <figcaption className="pr-cap" aria-hidden="true" key={k}><span className="pr-dot" style={{ background: `var(--${k}-core)` }} /><span style={{ color: `var(--${k}-deep)`, fontWeight: 600 }}>{name}</span> · {dir}</figcaption>}
    </figure>
  );
}

const WORK = ['Coaching', 'Facilitation and training', 'Learning and development', 'Organisation development', 'HR and people partnering', 'Consulting', 'Something else'];
const WITH = ['Individuals', 'Teams', 'Leadership teams', 'Whole organisations'];
const REACH = ['Fewer than 25', '25 to 100', '100 to 500', 'More than 500'];
const USE = ['With coaching clients', 'In workshops and programmes', 'Inside my own organisation', 'I am not sure yet'];

function Pick({ label, options, name, required }) {
  return (
    <label className="pf"><span>{label}</span>
      <select name={name} required={required} defaultValue="">
        <option value="" disabled>Choose one</option>
        {options.map(o => <option key={o}>{o}</option>)}
      </select>
    </label>
  );
}

function Practitioners() {
  window.useReveal();
  const [sent, setSent] = useP(false);
  return (
    <>
      <Nav active="practitioners" />
      <header className="section" style={{ paddingBottom: 'clamp(28px,4vw,48px)' }}>
        <div className="wrap">
          <div className="grid cols-2" style={{ alignItems: 'center' }}>
            <div>
              <div className="eyebrow">Practitioner programme</div>
              <h1 className="display-xl" style={{ fontSize: 'clamp(40px,6vw,76px)' }}>Practitioner programme: register your interest.</h1>
              <p className="lead" style={{ marginTop: 22, maxWidth: '50ch' }}>We are shaping a programme for coaches, facilitators and people professionals who would like to use <span className="tn">TEND</span> with the people they work with. If that sounds like you, leave your details and we will be in touch as the programme takes shape.</p>
              <a className="btn btn-ink btn-lg" href="#register" style={{ marginTop: 30 }}>Register your interest<span className="btn-arrow">→</span></a>
            </div>
            <div className="center reveal"><PracCompass /></div>
          </div>
        </div>
      </header>

      <section className="section section-sunk" id="register">
        <div className="wrap">
          <div className="pr-reg">
            <div className="pr-reg-intro">
              <div className="eyebrow">Register your interest</div>
              <h2 className="display-m">Tell us a little about your work.</h2>
              <p className="body" style={{ marginTop: 16 }}>Every <span className="tn">TEND</span> report is read through four currents. Tell us who you work with and how you would like to use them, and we will shape the programme with people like you in mind.</p>
              <ul className="cmark-row pr-marks" aria-label="The four currents">
                {PR_CUR.map(([k, n]) => <li key={k} style={{ '--c-tint': `var(--${k}-tint)` }}><CurrentMark k={k} size={64} /><span style={{ color: `var(--${k}-deep)` }}>{n}</span></li>)}
              </ul>
              <TPhoto id="photo-1507537362848-9c7e70b7b5c1" ratio="3x2" className="reveal pr-photo" sizes="(min-width: 860px) 40vw, 100vw" alt="Two men in an easy one-to-one conversation by a sunlit window" />
              <p className="caption" style={{ marginTop: 22 }}>We will use your details only to tell you about the practitioner programme, and you can ask us to remove them at any time.</p>
            </div>
            <div className="card card-pad spec-top">
              {!sent ? (
                <form onSubmit={(e) => { e.preventDefault(); const form = e.target; const f = window.TENDApi.formData(form); const pick = re => f[Object.keys(f).find(k => re.test(k))] || ''; window.TENDApi.guard(form, () => window.TENDApi.api('contact', { form: /[?&]topic=manual/.test(location.search) ? 'manual' : 'practitioners', name: pick(/name/i), email: pick(/email/i), organisation: pick(/organisation/i), message: pick(/draws you/i), details: f }).then(() => setSent(true)).catch(err => alertBox(form, err.message))); }} style={{ display: 'grid', gap: 16 }}>
                  <div className="pf-row">
                    <Field label="Your name" required />
                    <Field label="Work email" type="email" required />
                  </div>
                  <div className="pf-row">
                    <Field label="Organisation" required />
                    <Field label="Job title" />
                  </div>
                  <div className="pf-row">
                    <Field label="Country" />
                    <Pick label="The work you do" name="work" options={WORK} required />
                  </div>
                  <div className="pf-row">
                    <Pick label="Who you work with most" name="with" options={WITH} />
                    <Pick label="People you work with in a year" name="reach" options={REACH} />
                  </div>
                  <Pick label="How you would like to use TEND" name="use" options={USE} />
                  <Field label="What draws you to TEND?" as="textarea" rows={3} hint="Optional." />
                  <label className="pf-check"><input type="checkbox" required /><span>I agree that The ONmedia Collective may contact me about the practitioner programme, as set out in the <a href="privacy.html">privacy policy</a>.</span></label>
                  <Button variant="accent" energy="aqua" size="lg" type="submit" style={{ width: '100%' }}>Register your interest</Button>
                  <p className="caption center" style={{ margin: 0 }}>We reply within 48 hours.</p>
                </form>
              ) : (
                <div className="center" style={{ padding: '28px 8px' }} role="status">
                  <h3 className="display-s">Thank you, you are on the list.</h3>
                  <p className="body" style={{ marginTop: 10 }}>We will reply within 48 hours, and keep you posted as the practitioner programme takes shape.</p>
                  <p className="signoff" style={{ color: 'var(--aqua-deep)', marginTop: 18 }}>Now go tend to it.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Practitioners />);