/* ============================================================
   TEND, LANDING PAGE (Revision 5 · sweep pass 3)
   Built from docs/landing-copy-v1.md. Opening question set by Andrew, 16 October 2026.
   Order: the question and TEND Bearing in place, moments you will
   recognise, what you walk away with, three ways in, why you can
   trust it, a line for teams, and the close.
   ============================================================ */

/* 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: useH, useEffect: useHE } = React;
const PXh = window.TENDPrices || { format: () => '', isZA: true, note: '' };
const TTh = window.TENDTimes || { bearing: 'about 2 minutes', heading: 'about 5 minutes', direction: 'about 25 minutes', questions: { bearing: 12, heading: 25, direction: 140 } };

/* SAMPLE PROFILE 2 for the sample report preview (Revision 5, 7.7).
   The values below are the sample in report-full.html and are waiting
   for the confirmed sample profile 2. */
const SAMPLE_PROFILE_2 = { cv: { aqua: 100, coral: 31, amber: 0, violet: 82 }, signature: 'Lodestar', pair: 'Aqua leading · Violet supporting', href: 'report-full.html' };

const OPENING = <>When a plan changes suddenly, which way do <em>you</em> <span className="ld-tend">TEND</span>?</>;

function goBearing(e) {
  if (e) e.preventDefault();
  const el = document.getElementById('bearing'); if (!el) return;
  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 96, behavior: reduce ? 'auto' : 'smooth' });
  const f = el.querySelector('.lb-head, .lb-opt'); if (f) setTimeout(() => f.focus({ preventScroll: true }), reduce ? 0 : 400);
}

function useBearingDone() {
  const [d, setD] = useH(!!window.__tendBearingDone);
  useHE(() => { const on = () => setD(!!window.__tendBearingDone); window.addEventListener('tend-bearing', on); return () => window.removeEventListener('tend-bearing', on); }, []);
  return d;
}

const SCENES = [
  { t: 'A new way of working is announced on Monday',
    b: 'Some people want the detail before they say anything. Some want to know who it lands on. Some start imagining what it could become, and some want to get going this week.',
    s: 'Notice the first thing you do, before you have thought about it. That first move usually belongs to your leading current.' },
  { t: 'A colleague goes quiet in a meeting',
    b: 'Halfway through the discussion, someone who usually speaks up has stopped. When Violet leads, you notice it before anyone else and find a moment to check in afterwards. When Coral leads, you are more likely to notice that the meeting has lost its pace.',
    s: 'Ask yourself what you noticed first, the person or the pace. The answer points to the current that was leading in that moment.' },
  { t: 'A good idea arrives with no plan attached',
    b: 'Someone shares an idea that could change how the team works. When Aqua leads, the possibilities light up straight away. When Amber leads, the first question is who will own it, and by when.',
    s: 'Listen to the first question you ask. It tells you which current spoke first.' },
];

const TAKE = [
  { id: 'compass', ico: 'compass', t: 'The Compass', where: 'In TEND Heading and TEND Direction',
    b: 'The TEND Compass places the four currents at its points: Aqua at North, Coral at East, Amber at South and Violet at West. One needle points the way your answers leaned. Its length shows the gap between your leading current and the one that supports it, so a long needle means one current led clearly.' },
  { ico: 'champion', t: 'Your Signature', where: 'In TEND Direction',
    b: 'Your Signature is a name for the pair of currents that led your answers, such as Lodestar, with a description of how that pair tends to show up at work and with the people around you.' },
  { id: 'path', ico: 'elevate', t: 'How you adapt, day to day', where: 'In TEND Heading and TEND Direction',
    b: 'The Partnership Path is a working model of five phases people move through whenever work changes: Spark, Reframe, Engineer, Champion and Elevate. Your report names your home phase, the one you move through with the least effort, and TEND Direction also shows the phase that asks the most of you.' },
  { ico: 'engineer', t: 'The edges that slow you down', where: 'In TEND Direction',
    b: 'Every strength can tip over when the load rises. TEND Direction describes three edges, each one a behaviour a colleague could watch you do differently, so you know where to start.' },
];

/* The Bearing card appears beside the question as soon as the visitor
   moves the mouse, hovers the question, scrolls, taps or uses the keyboard,
   and after a short pause for anyone who does none of these. */
function useLive() {
  const reduce = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
  let kept = false; try { kept = !!localStorage.getItem('tend-bearing-kept'); } catch (e) {}
  const [live, setLive] = useH(reduce || kept);
  useHE(() => {
    if (live) return;
    const on = () => setLive(true);
    const evs = ['pointermove', 'pointerdown', 'keydown', 'scroll', 'touchstart', 'focusin', 'wheel'];
    evs.forEach(e => window.addEventListener(e, on, { passive: true }));
    const t = setTimeout(on, 2600);
    return () => { evs.forEach(e => window.removeEventListener(e, on)); clearTimeout(t); };
  }, [live]);
  return [live, setLive];
}

const CUR_RE = /(Aqua|Coral|Amber|Violet)/;
function paint(s) { return s.split(CUR_RE).map((p, i) => CUR_RE.test(p) ? <span key={i} className={'cur cur-' + p.toLowerCase()}>{p}</span> : p); }
const MARKS = [['aqua', 'Aqua'], ['coral', 'Coral'], ['amber', 'Amber'], ['violet', 'Violet']];

function usd(k, add) {
  const T = PXh.table, a = add ? T.genai : { zar: 0, usd: 0 };
  return PXh.isZA ? 'R' + (T[k].zar + a.zar).toLocaleString('en-US') : '$' + (T[k].usd + a.usd);
}

function TierBlock({ k, energy, name, q, time, body, leave, cta, href, onClick, addon, most }) {
  const [ga, setGa] = useH(false);
  const link = href ? href + (addon && ga ? '&genai=1' : '') : '#bearing';
  return (
    <div className={'card card-pad accent-top ld-tier' + (most ? ' is-most' : '')} style={{ '--energy-core': 'var(--' + energy + '-core)' }}>
      {most && <span className="pk-tag">Most support</span>}
      <h3 className="display-s">{tendify(name)}</h3>
      <p className="ld-price tnum">{k === 'bearing' ? 'Free' : usd(k, ga)}</p>
      {ga && <p className="caption ld-incl">Including the Gen AI chapter</p>}
      <p className="caption">{q} questions · {time}</p>
      <p className="body">{body}</p>
      {leave && <p className="pk-leave">{leave}</p>}
      {addon && (
        <label className="ld-addon">
          <input type="checkbox" checked={ga} onChange={e => setGa(e.target.checked)} />
          <span><strong>Add the Gen AI chapter</strong>, an optional chapter inside your report, for <span className="tnum">+{usd('genai')}</span></span>
        </label>
      )}
      <a className="btn btn-ink" href={link} onClick={onClick}>{cta}</a>
    </div>
  );
}

function WaysIn({ done }) {
  return (
    <section className="section section-sunk" id="ways-in">
      <div className="wrap">
        <SectionHead eyebrow="Ways in" title="Start on us, and go further when you are ready." lead="Every option uses questions from the same TEND set and the same Compass. Choose the one that fits, and add the Gen AI chapter to TEND Direction if you would like it." />
        <div className="ld-tiers">
          <TierBlock k="bearing" energy="aqua" name="TEND Bearing" q={TTh.questions.bearing} time={TTh.bearing} body="A first read of the direction of your needle, shown on this page the moment you finish." cta={done ? 'See your TEND Bearing' : 'Start TEND Bearing'} onClick={goBearing} />
          <TierBlock k="heading" energy="coral" name="TEND Heading" q={TTh.questions.heading} time={TTh.heading} body="Your Compass and your four currents, your home phase in how you adapt day to day, and the three aspects your answers kept pointing at." cta="Choose TEND Heading" href="checkout.html?product=heading" />
          <TierBlock k="direction" energy="violet" name="TEND Direction" q={TTh.questions.direction} time={TTh.direction} body="The complete report: your Compass and Signature, your ten aspects, all five phases of how you adapt, and the edges that slow you down." cta="Choose TEND Direction" href="checkout.html?product=direction" addon />
          <TierBlock k="debrief" energy="violet" name="TEND Direction with a debrief" q={TTh.questions.direction} time={TTh.direction} body="Everything in TEND Direction, followed by a 90-minute one-to-one debrief online that turns your report into a starting point." leave="You leave with the direction of your needle and one clear next step." cta="Choose with a debrief" href="checkout.html?product=debrief" addon most />
        </div>
        <div className="ld-more">
          <div className="card card-pad ld-more-b">
            <p className="ld-more-h">Finished TEND Heading in the last 12 months?</p>
            <p className="body">Upgrade to TEND Direction and your 25 answers carry over.</p>
            <p className="ld-price ld-price--s tnum">{usd('upgrade')}</p>
            <a className="btn btn-outline" href="checkout.html?product=upgrade">Upgrade to TEND Direction</a>
          </div>
          <div className="card card-pad ld-more-b">
            <p className="ld-more-h">Took TEND Direction a year ago or more?</p>
            <p className="body">Retake it and read the two reports side by side.</p>
            <p className="ld-price ld-price--s tnum">{usd('retake')}</p>
            <a className="btn btn-outline" href="checkout.html?product=retake">Retake TEND Direction</a>
          </div>
        </div>
        <div className="ld-ways-foot">
          {!PXh.isZA && <p className="caption">{PXh.note}</p>}
          <p className="caption">If you have an invite code, enter it at checkout and there is nothing to pay.</p>
        </div>
      </div>
    </section>
  );
}

function Home() {
  window.useReveal();
  const done = useBearingDone();
  const [live, setLive] = useLive();
  return (
    <>
      <Nav active="home" />

      <header className={'ld-hero' + (live ? ' is-live' : '')} id="top">
        <div className="wrap ld-hero-grid">
          <div className="ld-hero-text">
          <p className="hero-eyebrow"><span className="he-line" />Trait-based Executive Navigation Diagnostic</p>
          <h1 className="ld-q" onMouseEnter={() => setLive(true)}>{tendify(OPENING)}</h1>
          <p className="ld-line">12 questions · {TTh.bearing} · free · your answers are not saved unless you enter your email to keep your result, and then they are saved with your consent and carry over to TEND Heading.</p>
          </div>
          <div className="ld-bearing"><LandingBearing /></div>
        </div>
      </header>

      <section className="section section-sunk" id="moments">
        <div className="wrap">
          <div className="ld-split">
            <SectionHead eyebrow="Moments you will recognise" title="Your currents show up on ordinary days." lead={paint('TEND describes four currents, Aqua, Coral, Amber and Violet, which are the ways of working people tend to reach for first. Most people find that one or two of them lead. They are easiest to see in small moments at work, like these three.')} />
            <TPhoto id="photo-1790749870695-4dfd18a0834d" ratio="4x3" className="reveal" sizes="(min-width: 940px) 45vw, 100vw" alt="Three colleagues talking and laughing over coffee at a table" />
          </div>
          <ul className="ld-marks" aria-label="The four currents">
            {MARKS.map(([k, n]) => <li key={k}><img src={'assets/marks/tend-mark-' + k + '.png'} alt="" /><span className={'cur cur-' + k}>{n}</span></li>)}
          </ul>
          <div className="grid cols-3" style={{ marginTop: 'clamp(24px,3vw,36px)' }}>
            {SCENES.map(s => (
              <article key={s.t} className="card card-pad reveal ld-scene">
                <h3 className="display-s">{tendify(s.t)}</h3>
                <p className="body">{paint(s.b)}</p>
                <p className="ld-signal"><strong>The signal.</strong> {s.s}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" id="walk-away">
        <div className="wrap">
          <SectionHead eyebrow="What you walk away with" title="What do people count on you for, and what do they quietly work around?" lead="TEND Heading and TEND Direction help you answer that question. They turn your answers into four things you can use at work, each written in plain words and describing how you answered on the day." />
          <div className="ld-take" style={{ marginTop: 'clamp(28px,4vw,48px)' }}>
            <div className="ld-take-grid">
              {TAKE.map(x => (
                <div key={x.t} id={x.id} className="ld-item reveal">
                  <span className="ld-item-ico"><Glyph name={x.ico} size={26} color="var(--aqua-deep)" /></span>
                  <h3 className="display-s">{tendify(x.t)}</h3>
                  <p className="ld-where">{x.where}</p>
                  <p className="body">{x.b}</p>
                </div>
              ))}
            </div>
            <a className="card card-pad ld-sample reveal" href={SAMPLE_PROFILE_2.href}>
              <p className="eyebrow no-rule">Sample report · TEND Direction</p>
              <div className="ld-sample-compass" aria-hidden="true" dangerouslySetInnerHTML={{ __html: window.TENDCompass.render({ ...SAMPLE_PROFILE_2.cv, size: 220, style: 'instrument', labels: true, idSeed: 'sp2' }) }} />
              <p className="ld-sample-name">{SAMPLE_PROFILE_2.signature}</p>
              <p className="caption">{SAMPLE_PROFILE_2.pair}</p>
              <span className="btn-link ld-sample-cta">See a sample TEND Direction report →</span>
            </a>
          </div>
        </div>
      </section>

      <WaysIn done={done} />

      <section className="section" id="trust">
        <div className="wrap">
          <div className="ld-trust">
            <div>
              <SectionHead eyebrow="Why you can trust it" title="Built with care, and open about where it stands." lead="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." />
              <div className="ld-trust-list">
                <p className="body"><strong>For development only.</strong> TEND is used to start conversations about how you work and grow. It is never used for selection, promotion or any employment decision.</p>
                <p className="body"><strong>Open about how it is built.</strong> The Partnership Path 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).</p>
                <p className="body"><strong>Who built it.</strong> Andrew Wolhuter for The ONmedia Collective.</p>
                <a className="btn btn-outline" href="https://andrewwolhuter.com" target="_blank" rel="noopener">About Andrew<span className="btn-arrow">→</span></a>
              </div>
            </div>
            <div className="ld-photo reveal">
              <img className="ld-photo-img" src="assets/photo/andrew-suit.jpg" alt="Andrew Wolhuter" loading="lazy" />
            </div>
          </div>
        </div>
      </section>

      <section className="ld-team">
        <div className="wrap ld-team-grid">
          <TPhoto id="photo-1777150895644-2ca253ee1c93" ratio="3x2" className="reveal" sizes="(min-width: 760px) 340px, 100vw" alt="Two people's hands planting a young seedling together in dark soil" />
          <p className="body">Bringing TEND to a team? Tell us what your people need and we will shape it with you. <a className="ld-link" href="journey.html">Start a conversation →</a></p>
        </div>
      </section>

      <section className="section section-sunk center ld-close">
        <div className="wrap wrap-narrow">
          <h2 className="ld-q ld-q--close">{tendify(OPENING)}</h2>
          <a className="btn btn-ink btn-lg" href="#bearing" onClick={goBearing} style={{ marginTop: 28 }}>{done ? 'See your TEND Bearing' : 'Start TEND Bearing'}<span className="btn-arrow">→</span></a>
        </div>
      </section>

      <Footer />
    </>
  );
}

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