/* ============================================================
   TEND, SCIENCE / METHODOLOGY / VALIDITY
   ============================================================ */

/* 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 BIG5 = [
  { domain: 'Openness', aspects: ['Intellect', 'Openness'], energy: 'aqua' },
  { domain: 'Conscientiousness', aspects: ['Industriousness', 'Orderliness'], energy: 'amber' },
  { domain: 'Extraversion', aspects: ['Enthusiasm', 'Assertiveness'], energy: 'coral' },
  { domain: 'Agreeableness', aspects: ['Compassion', 'Politeness'], energy: 'violet' },
  { domain: 'Stability', aspects: ['Volatility', 'Withdrawal'], energy: 'aqua' },
];

const ENERGY_DEEP = [
  { k: 'aqua', name: 'Aqua', dir: 'North', who: 'Imaginative Collaborator', traits: 'Openness & care', img: 'assets/energies/lotus-aqua.png',
    body: 'Drawn to possibility and to people. When Aqua leads in someone’s answers, they tend to sense a shift early and bring others into the thinking. The stretch is closure, turning the exploration into a committed plan.' },
  { k: 'coral', name: 'Coral', dir: 'East', who: 'Driving Achiever', traits: 'Drive & warmth', img: 'assets/energies/lotus-coral.png',
    body: 'Forward motion with heat behind it. When Coral leads, people tend to set the pace and pull the room towards an outcome. The stretch is patience, letting a slower truth land before pushing on.' },
  { k: 'amber', name: 'Amber', dir: 'South', who: 'Practical Organiser', traits: 'Structure & reliability', img: 'assets/energies/lotus-amber.png',
    body: 'The builder. When Amber leads, people tend to turn an intention into something dependable that holds under load. The stretch is improvisation, staying useful when the plan stops fitting the world.' },
  { k: 'violet', name: 'Violet', dir: 'West', who: 'Supportive Harmoniser', traits: 'Care & depth', img: 'assets/energies/lotus-violet.png',
    body: 'The one who reads the room. When Violet leads, people tend to protect trust and hear what is unsaid. The stretch is candour, naming the hard thing while still holding the relationship.' },
];

function Science() {
  window.useReveal();
  return (
    <>
      <Nav active="science" />

      {/* HEADER */}
      <header className="section" style={{ paddingBottom: 'clamp(28px,4vw,48px)' }}>
        <div className="wrap">
          <div className="ph-hero">
            <div>
              <div className="eyebrow">Resources · the science and validity</div>
              <h1 className="display-xl" style={{ maxWidth: '15ch' }}>The science behind <span className="tend-c">TEND</span>.</h1>
              <p className="lead" style={{ marginTop: 24, maxWidth: '56ch' }}>TEND is built on the Big Five and its ten aspects (DeYoung, Quilty and Peterson, 2007), and designed against the Standards for Educational and Psychological Testing. This page sets out the research it draws on, the four currents, and how every set of answers is checked. The steps from answers to a Compass are on the <a href="methodology.html" style={{ color: 'var(--aqua-deep)' }}>methodology</a> page.</p>
            </div>
            <TPhoto id="photo-1548453282-29d422a7025a" ratio="4x5" eager alt="A long, lamp-lit reading room lined with bookshelves" />
          </div>
        </div>
      </header>

      {/* STATS */}
      <div className="wrap">
        <div className="stat-row cur4 reveal">
          {[['5', 'Big Five domains', 'aqua'], ['10', 'DeYoung aspects measured', 'coral'], ['4', 'currents', 'amber'], ['AA', 'WCAG contrast floor', 'violet']].map(([v, l, k]) => (
            <div className="stat" key={l} style={{ '--c-core': `var(--${k}-core)`, '--c-deep': `var(--${k}-deep)`, '--c-tint': `var(--${k}-tint)` }}><span className="sdot" /><div className="sv">{v}</div><div className="sl">{l}</div></div>
          ))}
        </div>
      </div>

      {/* FOUNDATIONS */}
      <section className="section" id="foundation">
        <div className="wrap">
          <SectionHead eyebrow="The foundation" title="Five traits, ten aspects, one needle." lead="Each of the Big Five splits into two finer aspects, after DeYoung, Quilty and Peterson (2007). TEND measures all ten, then resolves them into the four currents." />
          <div className="grid cols-2" style={{ marginTop: 'clamp(28px,4vw,48px)', alignItems: 'center' }}>
            <div className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {BIG5.map(d => (
                <div key={d.domain} style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '10px 16px', padding: '14px 18px', background: 'var(--surface-card)', border: '1px solid var(--rule)', borderRadius: 'var(--r-md)' }}>
                  <span className="energy-dot" style={{ background: `var(--${d.energy}-core)`, width: 12, height: 12 }} />
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, minWidth: 'min(170px, 70%)' }}>{d.domain}</div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {d.aspects.map(a => <span key={a} className="pill" style={{ fontSize: 10 }}>{a}</span>)}
                  </div>
                </div>
              ))}
            </div>
            <div className="reveal center">
              <div className="sci-compass" style={{ display: 'inline-flex', padding: 'clamp(20px,3vw,36px)', background: 'var(--surface-sunk)', borderRadius: 'var(--r-lg)', maxWidth: '100%', boxSizing: 'border-box' }}
                dangerouslySetInnerHTML={{ __html: window.TENDCompass.render({ aqua: 70, coral: 52, amber: 60, violet: 44, size: 320, style: 'instrument' }) }} />
            </div>
          </div>
        </div>
      </section>

      {/* FOUR ENERGIES DEEP */}
      <section className="section" id="energies">
        <div className="wrap">
          <SectionHead eyebrow="The four currents" title="Every direction, in depth." lead="Each current is a pairing of Big Five aspects, a way of working with its own gift and its own stretch." />
          <div className="grid cols-2" style={{ marginTop: 'clamp(28px,4vw,48px)' }}>
            {ENERGY_DEEP.map(e => (
              <div key={e.k} className="card reveal accent-top" style={{ '--energy-core': `var(--${e.k}-core)`, display: 'flex', gap: 0, overflow: 'hidden' }}>
                <div className="sci-mark" style={{ background: `var(--${e.k}-tint)` }}>
                  <CurrentMark k={e.k} size={104} />
                </div>
                <div style={{ padding: '24px 26px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span className="energy-dot" style={{ background: `var(--${e.k}-core)`, width: 11, height: 11 }} />
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: `var(--${e.k}-deep)` }}>{e.name}</span>
                    <span style={{ fontFamily: 'var(--font-data)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--text-muted)' }}>{e.dir}</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-data)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '12px 0 4px' }}>{e.who} · {e.traits}</div>
                  <p className="body" style={{ fontSize: 15, marginTop: 8 }}>{e.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VALIDITY & STANDARDS */}
      <section className="section section-ink" id="manual">
        <div className="wrap">
          <div className="grid cols-2" style={{ alignItems: 'start', gap: 'clamp(28px,5vw,64px)' }}>
            <div className="reveal">
              <div className="eyebrow" style={{ color: 'color-mix(in srgb, var(--tend-page) 72%, transparent)' }}>Validity &amp; standards</div>
              <h2 className="display-l" style={{ color: 'var(--tend-page)' }}>Trustworthy, and shown to be.</h2>
              <p className="lead" style={{ marginTop: 18, color: 'color-mix(in srgb, var(--tend-page) 80%, transparent)' }}>TEND is designed against the Standards for Educational and Psychological Testing (AERA / APA / NCME). Every set of answers carries its own validity status, shown by colour, text and a seal together.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 26 }}>
                <ValidityFlag status="valid" detail="no validity-scale flags" />
                <ValidityFlag status="caution" detail="elevated acquiescence · interpret with care" />
                <ValidityFlag status="flag" detail="inconsistent responding · re-administration advised" />
              </div>
            </div>
            <div className="reveal" style={{ background: 'var(--surface-card)', borderRadius: 'var(--r-lg)', padding: 'clamp(22px,3vw,32px)' }}>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Trained report · sample aspects</div>
              <p className="caption" style={{ marginBottom: 18 }}>Sten 1–10 with the standard error shown as a band. Numbers live only in the practitioner report.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <StenBar aspect="Intellect (Openness)" sten={8} semLow={7} semHigh={9} energy="aqua" labelWidth={150} />
                <StenBar aspect="Assertiveness (Extra.)" sten={7} semLow={6} semHigh={8} energy="coral" labelWidth={150} />
                <StenBar aspect="Orderliness (Consc.)" sten={5} semLow={4} semHigh={6} energy="amber" labelWidth={150} />
                <StenBar aspect="Compassion (Agree.)" sten={6} semLow={5} semHigh={7} energy="violet" labelWidth={150} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" id="manual-request">
        <div className="wrap">
          {/* manual request */}
          <div className="card card-pad reveal" 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>
              <div>
                <h3 className="display-s" style={{ fontSize: 21 }}><span className="tend-c">TEND</span> Technical &amp; Validity Manual</h3>
                <p className="body" style={{ fontSize: 15, marginTop: 6 }}>The full account of construction, scoring, reliability and validity evidence. Practitioners can ask for a copy.</p>
              </div>
            </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>

      {/* CLOSING */}
      <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 }}>Convinced? Curious? Either is fine.</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="packages.html#prices">See the three ways in</a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

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