/* ============================================================
   TEND, BLOG
   News and research on personality at work. No posts yet: the
   page shows an empty state until real posts are supplied.
   ============================================================ */

/* 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: useB } = React;
const BLOG_CATS = [['All', null], ['Research news', 'aqua'], ['Notes from Andrew', 'coral'], ['Reading your TEND', 'amber'], ['Teams at work', 'violet']];
const POSTS = [];

function Blog() {
  window.useReveal();
  const [cat, setCat] = useB('All');
  const [sent, setSent] = useB(false);
  const [subErr, setSubErr] = useB('');
  function subscribe(e) {
    e.preventDefault(); setSubErr('');
    const email = (e.target.querySelector('input[type=email]') || {}).value || '';
    window.TENDApi.guard(e.target, () => window.TENDApi.api('contact', { form: 'blog', email: email.trim(), message: 'Please send me new TEND blog posts.' })
      .then(() => setSent(true)).catch(err => setSubErr(err.message || 'Something went wrong. Please try again.')));
  }
  const list = cat === 'All' ? POSTS : POSTS.filter(p => p.cat === cat);
  return (
    <>
      <Nav active="resources" />
      <header className="section" style={{ paddingBottom: 'clamp(20px,3vw,36px)' }}>
        <div className="wrap">
          <div className="ph-hero">
            <div>
              <div className="eyebrow">Blog</div>
              <h1 className="display-xl" style={{ maxWidth: '16ch' }}>News and research on personality at work.</h1>
              <p className="lead" style={{ marginTop: 22, maxWidth: '56ch' }}>Plain-language notes on new research into personality and how people adapt at work, and what it means when you read your own <span className="tn">TEND</span>.</p>
            </div>
            <TPhoto id="photo-1600188769045-bc6026bfc8cd" ratio="4x5" eager pos="62% 50%" alt="A woman writing in a notebook at a wooden desk by a bright window" />
          </div>
        </div>
      </header>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="seg blog-cats" style={{ marginBottom: 28 }}>
            {BLOG_CATS.map(([c, k]) => <button key={c} className={'seg-btn' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{k && <span className="pr-dot" style={{ background: `var(--${k}-core)` }} />}{c}</button>)}
          </div>
          {list.length === 0 && (
            <div className="card card-pad spec-top blog-empty">
              <h2 className="display-s">The first posts are on their way.</h2>
              <p className="body" style={{ margin: 0, maxWidth: '54ch' }}>Leave your email and we will send you each new post when it is published. You can unsubscribe from any email.</p>
              {!sent ? (
                <form className="blog-sub" onSubmit={subscribe}>
                  <label className="pf" style={{ flex: '1 1 260px' }}><span>Email</span><input type="email" required autoComplete="email" /></label>
                  <button type="submit" className="btn btn-ink">Send me new posts</button>
                  {subErr && <p className="lb-err" role="alert" style={{ flexBasis: '100%', margin: 0 }}>{subErr}</p>}
                </form>
              ) : <p className="body" role="status" style={{ margin: 0, color: 'var(--aqua-deep)', fontWeight: 600 }}>Thank you. We will email you when the first post is published.</p>}
            </div>
          )}
        </div>
      </section>
      <Footer />
    </>
  );
}

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