/* ============================================================
   TEND, HOW IT WORKS: taking TEND, step by step
   Every step describes the participant flow as built in
   assessment.html, checkout.html and the landing TEND Bearing.
   ============================================================ */

/* 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 TTw = window.TENDTimes || { bearing: 'about 2 minutes', heading: 'about 5 minutes', direction: 'about 25 minutes', video: 'about 2 minutes', cap: s => s };
const HW_CUR = ['aqua', 'coral', 'amber', 'violet'];
const HW_STEPS = [
  { ico: 'compass', t: 'Start with TEND Bearing', b: 'On the home page, answer a short set of statements about how you usually are at work. It takes ' + TTw.bearing + ', and the direction of your needle appears the moment you finish. Your answers are not saved unless you enter your email to keep your result.', href: 'index.html#bearing', cta: 'Start TEND Bearing' },
  { ico: 'reframe', t: 'Choose how far to go', b: 'TEND Heading and TEND Direction go further. Choose one at checkout, add the Gen AI chapter to TEND Direction if you would like it, and enter an invite code if you have one.', href: 'packages.html#prices', cta: 'See the options' },
  { ico: 'spark', t: 'Sign in and watch the welcome film', b: 'Your confirmation email has a link that signs you in. A short film, What TEND shows you, and how to use it, explains what your report will show. It is ' + TTw.video + ' long, and you can skip it.' },
  { ico: 'validity', t: 'Before we begin', b: 'You confirm three things: you have time without interruptions, you understand TEND is for development only, and you will answer the way you usually are at work, on an ordinary day.' },
  { ico: 'engineer', t: 'Two practice statements', b: 'Two practice statements help you learn the five-point scale, from Strongly disagree to Strongly agree. They are not recorded, so take your time with them.' },
  { ico: 'elevate', t: 'Answer at your own pace', b: 'Each statement appears on its own, and a bar in the colours of the four currents fills as you go. There is no clock on the screen. Save and exit whenever you like. We’ll email you a link that brings you back to the same question, on any device.' },
  { ico: 'compass', t: 'Your Compass and your report', b: 'Your Compass is built from your answers, and every set of answers is checked for how consistently it was given. Your report describes your answers in plain words with no scores, and it belongs to you.' },
  { ico: 'champion', t: 'A debrief, if you chose one', b: 'If you chose TEND Direction with a debrief, we email you times to choose from once your report is ready. Debriefs are held online, one to one.' },
];
const HW_TIMES = [['bearing', 'TEND Bearing', 'aqua'], ['heading', 'TEND Heading', 'coral'], ['direction', 'TEND Direction', 'violet']];

function HowItWorks() {
  window.useReveal();
  return (
    <>
      <Nav active="how" />
      <header className="section" style={{ paddingBottom: 'clamp(28px,4vw,48px)' }}>
        <div className="wrap">
          <div className="ph-hero">
            <div>
              <div className="eyebrow">How it works</div>
              <h1 className="display-xl" style={{ maxWidth: '16ch' }}>{tendify('Taking TEND, step by step.')}</h1>
              <p className="lead" style={{ marginTop: 24, maxWidth: '56ch' }}><span className="tn">TEND</span> is a workplace diagnostic for everyone at work. These are the steps from your first statement to your report, so you know what to expect before you begin.</p>
            </div>
            <TPhoto id="photo-1758876202610-bae5608f5051" ratio="4x5" eager pos="38% 50%" alt="A young woman smiles as she pauses at her desk, an open notebook in front of her" />
          </div>
        </div>
      </header>

      <div className="wrap">
        <div className="stat-row cur4 reveal" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(200px,1fr))' }}>
          {HW_TIMES.map(([k, n, c]) => (
            <div className="stat" key={k} style={{ '--c-core': `var(--${c}-core)`, '--c-deep': `var(--${c}-deep)`, '--c-tint': `var(--${c}-tint)` }}>
              <span className="sdot" /><div className="sv" style={{ fontSize: 24 }}>{TTw.cap(TTw[k])}</div><div className="sl">{tendify(n, 'tn')}</div>
            </div>
          ))}
        </div>
      </div>

      <section className="section">
        <div className="wrap">
          <ol className="hw-steps">
            {HW_STEPS.map((s, i) => {
              const c = HW_CUR[i % 4];
              return (
                <li key={s.t} className="hw-step reveal" style={{ '--c-core': `var(--${c}-core)`, '--c-deep': `var(--${c}-deep)`, '--c-tint': `var(--${c}-tint)` }}>
                  <span className="hw-n" aria-hidden="true">{String(i + 1).padStart(2, '0')}</span>
                  <div className="hw-body card card-pad">
                    <div className="hw-head"><Glyph name={s.ico} size={24} color={`var(--${c}-deep)`} /><h2 className="display-s">{tendify(s.t)}</h2></div>
                    <p className="body">{tendify(s.b, 'tn')}</p>
                    {s.href && <a className="btn-link hw-cta" href={s.href}>{s.cta} →</a>}
                  </div>
                </li>
              );
            })}
          </ol>
        </div>
      </section>

      <section className="section section-sunk center">
        <div className="wrap wrap-narrow">
          <p className="signoff" style={{ color: 'var(--aqua-deep)' }}>Now go tend to it.</p>
          <h2 className="display-l" style={{ marginTop: 16 }}>Ready for your first statement?</h2>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
            <a className="btn btn-ink btn-lg" href="index.html#bearing">Start TEND Bearing<span className="btn-arrow">→</span></a>
            <a className="btn btn-outline btn-lg" href="methodology.html">How a profile is built</a>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

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