/* ============================================================
   TEND, WHY TEND
   Built only from approved copy: the standing positioning rules,
   the landing page and the trust section. The longer case for TEND
   is waiting for Andrew's text.
   ============================================================ */

/* 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 WHY = [
  { k: 'aqua', ico: 'compass', t: 'For everyone at work', b: 'TEND is a workplace diagnostic for anyone who works with other people, whatever their role. It shows the ways of working you tend to reach for first, so you can recognise them on an ordinary day and choose what to do next.' },
  { k: 'coral', ico: 'validity', t: 'For development only', b: 'TEND is used to start conversations about how you work and grow. It is never used for selection, promotion or any employment decision, and nobody at your organisation sees your result unless you say so in writing.' },
  { k: 'amber', ico: 'citation', t: 'Built on established research', b: 'TEND reads your answers across the ten aspects of personality that sit under the five broad traits of the Big Five, as described by DeYoung, Quilty and Peterson (2007). Everything it shows you comes from your own answers.' },
  { k: 'violet', ico: 'reframe', t: 'Open about how it is built', b: 'The Partnership Path, the model TEND uses for how you adapt day to day, is a working model that is still being tested, drawing on research into how people adapt at work (Pulakos et al., 2000; Huang et al., 2014).' },
];

function Why() {
  window.useReveal();
  return (
    <>
      <Nav active="why" />
      <header className="section" style={{ paddingBottom: 'clamp(28px,4vw,48px)' }}>
        <div className="wrap">
          <div className="grid cols-2" style={{ alignItems: 'center' }}>
            <div>
              <div className="eyebrow">Why TEND</div>
              <h1 className="display-xl" style={{ maxWidth: '14ch' }}>{tendify('Which way do you TEND when work changes?')}</h1>
              <p className="lead" style={{ marginTop: 24, maxWidth: '52ch' }}>When a plan changes suddenly, most people reach first for one or two familiar ways of working. <span className="tn">TEND</span> describes four of them, called currents: Aqua, Coral, Amber and Violet. It shows which of them led in your answers, so you can see the pattern and decide what to do with it.</p>
            </div>
            <div className="center reveal">
              <ul className="why-marks" aria-label="The four currents">
                {WHY.map(w => <li key={w.k}><CurrentMark k={w.k} size={96} /><span style={{ color: `var(--${w.k}-deep)` }}>{w.k[0].toUpperCase() + w.k.slice(1)}</span></li>)}
              </ul>
            </div>
          </div>
        </div>
      </header>

      <section className="section section-sunk">
        <div className="wrap">
          <div className="grid cols-2">
            {WHY.map(w => (
              <article key={w.t} className="card card-pad accent-top reveal" style={{ '--energy-core': `var(--${w.k}-core)`, display: 'grid', gap: 12 }}>
                <Glyph name={w.ico} size={26} color={`var(--${w.k}-deep)`} />
                <h2 className="display-s">{w.t}</h2>
                <p className="body" style={{ margin: 0 }}>{tendify(w.b, 'tn')}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="grid cols-2" style={{ alignItems: 'center', gap: 'clamp(28px,5vw,64px)' }}>
            <div>
              <SectionHead eyebrow="What you walk away with" title="Something you can use at work." lead="TEND Heading and TEND Direction turn your answers into your Compass, your Signature, how you adapt day to day, and the edges that slow you down, each written in plain words and describing how you answered on the day." />
              <div style={{ display: 'flex', gap: 14, marginTop: 28, flexWrap: 'wrap' }}>
                <a className="btn btn-ink" href="how-it-works.html">Taking TEND, step by step<span className="btn-arrow">→</span></a>
                <a className="btn btn-outline" href="index.html#walk-away">See what each report shows</a>
              </div>
            </div>
            <TPhoto id="photo-1707129901265-c5bfee67a60b" ratio="4x3" className="reveal ph-side" sizes="(min-width: 680px) 45vw, 100vw" alt="Two hands cupping a young seedling in a ball of soil" />
          </div>
        </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 }}>{tendify('Start with TEND Bearing.')}</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="journey.html">Bring TEND to your team</a>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

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