/* ============================================================
   TEND, METHODOLOGY: how a profile is built
   Steps moved from science.html. The validity checks are the six
   named in the TEND buyer one-pager (5.8). Item design, scoring
   detail and norms sit in the Technical and Validity Manual.
   ============================================================ */

/* 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 MT_STEPS = [
  ['01', 'Respond', 'You answer forced-choice and rated questions, balanced across all ten aspects.', 'spark', 'aqua'],
  ['02', 'Score', 'Responses are scored to sten scales with a standard error of measurement, and run against validity checks.', 'engineer', 'coral'],
  ['03', 'Resolve', 'The ten aspects resolve into the four currents, summed as a vector to find the direction of the needle.', 'reframe', 'amber'],
  ['04', 'Read', 'Direction shows the current your answers leaned towards most. Length shows the gap between the leading and supporting currents.', 'compass', 'violet'],
];
const MT_CHECKS = [
  ['Consistency', 'Whether statements that ask about the same thing were answered in the same way.'],
  ['Impression management', 'Whether the answers lean towards the most flattering option all the way through.'],
  ['Infrequency', 'Whether the answers include responses that very few people give, which can be a sign of rushing.'],
  ['Long strings', 'Whether the same point on the scale was chosen many times in a row.'],
  ['Acquiescence', 'Whether there is a habit of agreeing with statements whatever they say.'],
  ['Completeness', 'Whether enough statements were answered to build a profile.'],
];
const MT_POINTS = [['aqua', 'Aqua', 'North'], ['coral', 'Coral', 'East'], ['amber', 'Amber', 'South'], ['violet', 'Violet', 'West']];

function Methodology() {
  window.useReveal();
  return (
    <>
      <Nav active="about" />
      <header className="section" style={{ paddingBottom: 'clamp(28px,4vw,48px)' }}>
        <div className="wrap">
          <div className="ph-hero">
            <div>
              <div className="eyebrow">About · methodology</div>
              <h1 className="display-xl" style={{ maxWidth: '15ch' }}>How a profile is built.</h1>
              <p className="lead" style={{ marginTop: 24, maxWidth: '56ch' }}>This page follows a set of answers from the first statement to the needle on your Compass. The research behind each step is on the <a href="science.html" style={{ color: 'var(--aqua-deep)' }}>science and validity</a> page.</p>
            </div>
            <TPhoto id="photo-1681396059172-7532b1ef8b47" ratio="4x5" eager alt="A hand resting on an open notebook of handwritten notes in soft light" />
          </div>
        </div>
      </header>

      <section className="section section-sunk">
        <div className="wrap">
          <SectionHead eyebrow="Four steps" title="From answers to a needle." />
          <div className="grid cols-4" style={{ marginTop: 'clamp(28px,4vw,48px)' }}>
            {MT_STEPS.map(([n, t, d, ico, c]) => (
              <div className="card card-pad accent-top reveal" key={n} style={{ '--energy-core': `var(--${c}-core)`, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ fontFamily: 'var(--font-data)', fontSize: 13, color: `var(--${c}-deep)` }}>{n}</span>
                  <Glyph name={ico} size={26} color={`var(--${c}-deep)`} />
                </div>
                <h3 className="display-s" style={{ fontSize: 21 }}>{t}</h3>
                <p className="caption" style={{ fontSize: 14 }}>{d}</p>
              </div>
            ))}
          </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="Reading the Compass" title="Four points, one needle." lead="The TEND Compass places the four currents at its points. The needle points the way your answers leaned, and its length shows the gap between your leading current and the one that supports it. A long needle means one current led clearly, and a short one means two currents sat close together. Length never shows strength." />
              <ul className="mt-points">
                {MT_POINTS.map(([k, n, d]) => <li key={k}><span className="pr-dot" style={{ background: `var(--${k}-core)` }} /><b style={{ color: `var(--${k}-deep)` }}>{n}</b><span>{d}</span></li>)}
              </ul>
            </div>
            <div className="center reveal">
              <div style={{ display: 'inline-flex', padding: 'clamp(20px,3vw,36px)', background: 'var(--surface-sunk)', borderRadius: 'var(--r-lg)' }}
                role="img" aria-label="A sample TEND Compass with Aqua at North, Coral at East, Amber at South and Violet at West."
                dangerouslySetInnerHTML={{ __html: window.TENDCompass.render({ aqua: 70, coral: 52, amber: 60, violet: 44, size: 320, style: 'instrument', idSeed: 'mt' }) }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section section-sunk" id="checks">
        <div className="wrap">
          <SectionHead eyebrow="Checks on every set of answers" title="How we check the answers hold together." lead="Every set of answers runs through six checks before a report is written, and the time spent on each question is recorded quietly to support them. Each report then carries a validity status, shown by colour, text and a seal together." />
          <div className="grid cols-3" style={{ marginTop: 'clamp(28px,4vw,44px)' }}>
            {MT_CHECKS.map(([t, d], i) => (
              <div key={t} className="card card-pad reveal" style={{ display: 'grid', gap: 8 }}>
                <span className="pr-dot" style={{ background: `var(--${MT_POINTS[i % 4][0]}-core)` }} />
                <h3 className="display-s" style={{ fontSize: 19 }}>{t}</h3>
                <p className="caption" style={{ fontSize: 14.5 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead eyebrow="How results are written" title="Plain words, about your answers." lead="Participant reports are written in the past tense and describe your answers, for example: You led with Aqua in these answers. They show no scores, percentiles or comparisons. The numbers live only in the separate report a practitioner uses for a debrief." />
          <div className="card card-pad" style={{ marginTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', maxWidth: '58ch' }}>
              <span style={{ flex: 'none' }}><Glyph name="citation" size={32} color="var(--aqua-deep)" /></span>
              <p className="body" style={{ margin: 0 }}>The full account of item design, scoring, reliability and validity evidence is in the <span className="tn">TEND</span> Technical and Validity Manual.</p>
            </div>
            <a className="btn btn-ink" href="practitioners.html?topic=manual#register">Ask about the manual<span className="btn-arrow">→</span></a>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

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