/* ============================================================
   TEND, RESOURCES
   ============================================================ */

/* 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: useR2 } = React;
/* A resource that is not written yet shows as a plain card marked Coming soon, never a dead link. */
function RCard({ soon, children, ...rest }) { return soon ? <div {...rest}>{children}</div> : <a {...rest}>{children}</a>; }

const RESOURCES = [
  { cat: 'Research', t: 'The science and validity', d: 'The research TEND is built on, the four currents, and how every set of answers is checked.', ico: 'compass', energy: 'coral', href: 'science.html', tag: 'Science' },
  { cat: 'Research', t: 'TEND Technical & Validity Manual', d: 'The full account of construction, scoring, reliability and validity evidence.', ico: 'validity', energy: 'aqua', href: 'science.html#manual-request', tag: 'Manual · practitioners' },
  { cat: 'Guide', t: 'TEND Keynote · 60-minute outline', d: 'The spine of the keynote, for event organisers and hosts.', ico: 'champion', energy: 'coral', href: 'packages.html#keynote', tag: 'Run sheet' },
  { cat: 'Guide', t: 'TEND Workshop · 4-hour run-of-show', d: 'A half-day with TEND, minute by minute.', ico: 'engineer', energy: 'amber', href: 'packages.html#workshop4', tag: 'Run sheet' },
  { cat: 'Writing', t: 'Describing answers: the language discipline', d: 'Why TEND always describes how someone answered, in words like “you led with Aqua in these answers”.', ico: 'reframe', energy: 'violet', href: '#', tag: 'Essay' },
];
const CATS = ['All', 'Research', 'Writing', 'Guide'];

const VIDEOS = [
  { t: 'What TEND shows you, and how to use it', len: (window.TENDTimes ? window.TENDTimes.cap(window.TENDTimes.video) : 'About 2 minutes'), who: 'Andrew Wolhuter' },
];

function Resources() {
  window.useReveal();
  const [cat, setCat] = useR2('All');
  const list = cat === 'All' ? RESOURCES : RESOURCES.filter(r => r.cat === cat);
  return (
    <>
      <Nav active="resources" />

      {/* HEADER */}
      <header className="section" style={{ paddingBottom: 'clamp(20px,3vw,36px)' }}>
        <div className="wrap">
          <div className="eyebrow">Resources</div>
          <h1 className="display-xl" style={{ maxWidth: '16ch' }}>Read on.</h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: '54ch' }}>The thinking, the evidence, and the run sheets behind TEND. Some are open; the practitioner material is shared with practitioners on request.</p>
          <TPhoto id="photo-1728931710024-c015ea8f4414" ratio="wide" className="ph-band" eager pos="62% 55%" sizes="(min-width: 1240px) 1130px, 100vw" alt="A woman reading a book in a quiet window seat" />
        </div>
      </header>

      {/* FILTER + GRID */}
      <section className="section" id="insights" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="seg" style={{ marginBottom: 28 }}>
            {CATS.map(c => <button key={c} className={'seg-btn' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>)}
          </div>
          <div className="grid cols-3">
            {list.map(r => (
              <RCard key={r.t} soon={r.href === '#'} className="card card-pad reveal in" href={r.href === '#' ? undefined : r.href} style={{ textDecoration: 'none', display: 'flex', flexDirection: 'column', gap: 14, minHeight: 230, '--energy-core': `var(--${r.energy}-core)` }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ color: `var(--${r.energy}-deep)` }}><Glyph name={r.ico} size={26} color={`var(--${r.energy}-deep)`} /></span>
                  <span className="pill" style={{ fontSize: 10, '--energy-core': `var(--${r.energy}-core)` }}><span className="dot" />{r.cat}</span>
                </div>
                <div className="display-s" style={{ fontSize: 21, marginTop: 4 }}>{tendify(r.t)}</div>
                <p className="caption" style={{ fontSize: 14 }}>{r.d}</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ fontFamily: 'var(--font-data)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{r.tag}</span>
                  <span className="btn-link" style={{ color: r.href === '#' ? 'var(--text-muted)' : `var(--${r.energy}-deep)`, fontWeight: 600 }}>{r.href === '#' ? 'Coming soon' : 'Read →'}</span>
                </div>
              </RCard>
            ))}
          </div>
        </div>
      </section>

      {/* VIDEOS */}
      <section className="section section-sunk" id="videos">
        <div className="wrap">
          <SectionHead eyebrow="Talks & videos" title="Watch TEND explained." lead="Short films from Andrew on the diagnostic, the Compass and the Partnership Path." align="center" />
          <div className="res-video" style={{ marginTop: 'clamp(28px,4vw,44px)', maxWidth: 720, marginInline: 'auto', textAlign: 'center' }}>
            {VIDEOS.map((v, i) => (
              <div className="reveal" key={i}>
                <div className="video-frame" style={{ aspectRatio: '16/10' }}>
                  <img className="vf-poster" src="assets/energies/spectrum-portrait.png" alt="" />
                  <button className="vf-play" disabled style={{ width: 64, height: 64, cursor: 'default', opacity: 0.85 }} aria-label={v.t + ', in production'}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--tend-ink)"><path d="M7 5 L19 12 L7 19 Z" /></svg>
                  </button>
                </div>
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontFamily: 'var(--font-data)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{v.who}{v.len ? ' · ' + v.len : ''} · in production</div>
                  <div className="display-s" style={{ fontSize: 19, marginTop: 6 }}>{tendify(v.t)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AUTHOR */}
      <section className="section" id="author">
        <div className="wrap">
          <div className="card card-pad" style={{ padding: 'clamp(28px,4vw,52px)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 'clamp(28px,4vw,56px)', alignItems: 'center' }}>
            <div className="center" style={{ background: 'var(--surface-sunk)', borderRadius: 'var(--r-lg)', padding: 32 }}>
              <div style={{ display: 'inline-flex' }} dangerouslySetInnerHTML={{ __html: window.TENDCompass.render({ aqua: 64, coral: 72, amber: 48, violet: 66, size: 220, style: 'field' }) }} />
            </div>
            <div>
              <div className="eyebrow">The author</div>
              <h2 className="display-l" style={{ fontSize: 'clamp(30px,4vw,46px)' }}>Andrew Wolhuter</h2>
              <p className="body" style={{ marginTop: 16, maxWidth: '52ch' }}>The author of TEND, for The ONmedia Collective.</p>
              <div style={{ display: 'flex', gap: 14, marginTop: 24, flexWrap: 'wrap', alignItems: 'center' }}>
                
              </div>
            </div>
          </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 }}>Ready when you are.</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(<Resources />);