/* ============================================================
   TEND, PACKAGES PAGE
   ============================================================ */

/* 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: usePk } = React;
const PX = window.TENDPrices || { format: () => '', isZA: true, note: '' };
const TTp = window.TENDTimes || { bearing: 'about 2 minutes', heading: 'about 5 minutes', direction: 'about 25 minutes', questions: { bearing: 12, heading: 25, direction: 140 } };
const TIERS = [
  { key: 'bearing', energy: 'aqua', name: 'TEND Bearing', q: TTp.questions.bearing, time: TTp.bearing, cta: 'Start TEND Bearing', href: 'index.html#bearing',
    body: 'A first read of the direction of your needle, shown the moment you finish. Your answers are not saved unless you enter your email to keep your result.' },
  { key: 'heading', energy: 'coral', name: 'TEND Heading', q: TTp.questions.heading, time: TTp.heading, cta: 'Choose TEND Heading', href: 'checkout.html?product=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.' },
  { key: 'direction', energy: 'violet', name: 'TEND Direction', q: TTp.questions.direction, time: TTp.direction, cta: 'Choose TEND Direction', href: 'checkout.html?product=direction',
    body: 'The complete report: your Compass and Signature, your ten aspects, how you adapt day to day across all five phases, and the edges that slow you down.' },
  { key: 'debrief', energy: 'violet', name: 'TEND Direction with a debrief', q: TTp.questions.direction, time: TTp.direction, cta: 'Choose with a debrief', href: 'checkout.html?product=debrief', most: true,
    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.' },
];
const EXTRAS = [
  ['Upgrade from TEND Heading to TEND Direction within 12 months, with your answers carried over', 'upgrade', 'checkout.html?product=upgrade'],
  ['Retake TEND Direction after 12 months', 'retake', 'checkout.html?product=retake'],
  ['The Gen AI chapter, an optional chapter inside TEND Direction, added at checkout', 'genai', null],
];

/* Revision 5, 9.2: four ways in side by side, then the upgrade, retake
   and add-on, then the currency line. */
function Prices() {
  return (
    <section className="section" id="prices" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="pk-price-head">
          <SectionHead eyebrow="For you" title="Start free, and go further when you are ready." lead={<><b className="pk-tn cur-aqua"><span className="tn">TEND</span> Bearing</b> is free and takes a couple of minutes. <b className="pk-tn cur-coral"><span className="tn">TEND</span> Heading</b> and <b className="pk-tn cur-violet"><span className="tn">TEND</span> Direction</b> go further, and you can add a one-to-one debrief to <span className="tn">TEND</span> Direction.</>} />
        </div>
        <div className="pk-tiers">
          {TIERS.map(t => (
            <div key={t.key} className={'card card-pad accent-top pk-tier' + (t.most ? ' is-most' : '')} style={{ '--energy-core': `var(--${t.energy}-core)` }}>
              {t.most && <span className="pk-tag">Most support</span>}
              <h3 className="display-s" style={{ color: `var(--${t.energy}-deep)` }}>{tendify(t.name)}</h3>
              <p className="pk-price tnum">{PX.format(t.key)}</p>
              <p className="caption" style={{ margin: 0 }}>{t.q} questions · {t.time}</p>
              <p className="body" style={{ margin: 0 }}>{t.body}</p>
              {t.leave && <p className="pk-leave">{t.leave}</p>}
              <a className="btn btn-ink" href={t.href}>{t.cta}<span className="btn-arrow">→</span></a>
            </div>
          ))}
        </div>
        <div className="card card-pad" style={{ marginTop: 24 }}>
          <ul className="pk-extras">
            {EXTRAS.map(([t, k, h]) => (
              <li key={k}><span>{t}</span><strong className="tnum">{PX.format(k)}</strong>{h ? <a className="btn btn-outline btn-sm" href={h}>Choose</a> : <span className="caption">At checkout</span>}</li>
            ))}
          </ul>
        </div>
        {!PX.isZA && <p className="caption" style={{ marginTop: 16 }}>{PX.note}</p>}
        <p className="caption" style={{ marginTop: 8 }}>If you have an invite code, enter it at checkout and there is nothing to pay.</p>
      </div>
    </section>
  );
}

const PACKAGES = [
  {
    id: 'keynote', energy: 'coral', glyph: 'spark', kicker: 'Set the frame, from the stage',
    name: 'TEND Keynote', duration: '60 minutes', format: 'Main stage · up to full auditorium',
    lede: 'The science of direction, delivered to a room. The keynote frames the changes your people are facing and the question TEND answers, and prepares the room for the work that follows.',
    includes: ['60-minute keynote by Andrew Wolhuter', 'Live, on-stage Compass demonstration', 'The Partnership Path as a shared language', 'Tailored to your sector and theme'],
    outcome: 'A room that now shares a vocabulary for the change in front of them.',
  },
  {
    id: 'workshop4', energy: 'amber', glyph: 'engineer', kicker: 'Half a day with TEND',
    name: 'TEND Workshop · 4 hours', duration: '4 hours', format: 'In person · 8 to 16 people',
    lede: 'Individual profiles, the team Compass, and the conversations they unlock. A working half-day that turns what people learn into commitments.',
    includes: ['Pre-work TEND administration', 'Individual and team Compass debrief', 'Structured peer conversations', 'Phase-by-phase Partnership Path mapping', 'A team development charter'],
    outcome: 'A team that can name how it tends, and where it needs to stretch.',
  },
  {
    id: 'workshop8', energy: 'violet', glyph: 'champion', kicker: 'A full-day immersion',
    name: 'TEND Workshop · 8 hours', duration: '8 hours', format: 'In person · 8 to 16 people',
    lede: 'The full-day version. Everything in the half-day, plus deeper practice, real scenario work, and a longer arc from profile to plan.',
    includes: ['Everything in the 4-hour workshop', 'Live scenario and case work', 'Pairing and one-to-one practice', 'Individual development planning', 'Facilitation module of your choice'],
    outcome: 'Individual plans and a team operating agreement, built in the room.',
  },
  {
    id: 'lab', energy: 'aqua', glyph: 'compass', kicker: 'Two hours with your team',
    name: 'TEND Leadership Lab', duration: '2 hours', format: 'With your team',
    lede: 'A two-hour working session built around your team Compass. Each person completes TEND beforehand, the team reads its currents together on one Compass, and you leave with a plan for the next 30 days.',
    includes: ['TEND completed by each person beforehand', 'Your team Compass, read together', 'A 30-day plan the team agrees in the room'],
    outcome: 'A team Compass and a 30-day plan, agreed together.',
  },
];

const JOURNEY_TOPICS = [
  { id: 'connection', n: '01', title: 'The Neuroscience of Connection', energy: 'aqua', body: 'The most accessible entry. Builds the relational base, know yourself, read others, build rapport, move people, and plants the premise that we are biological, gently, before the harder modules.' },
  { id: 'amygdala', n: '02', title: 'The Amygdala in the Boardroom', energy: 'amber', body: 'Scale from the individual to the environment. Once people can connect, build the conditions where candour and dissent survive, so strategy does not die of silence. The team-and-strategy layer.' },
  { id: 'biological', n: '03', title: 'Leadership Is a Biological Intervention', energy: 'coral', body: 'Make the leader the active agent. Your behaviour literally moves your people’s biology, their stress, their safety, their performance. The accountability layer, landing hardest once connection and safety are in place.' },
  { id: 'psychopathy', n: '04', title: 'The Neuroscience of Corporate Psychopathy', energy: 'violet', body: '[TOPIC DESCRIPTION PENDING]' },
];

function PackageSection({ p, idx }) {
  const reverse = idx % 2 === 1;
  return (
    <section className="section" id={p.id} style={{ '--energy-core': `var(--${p.energy}-core)`, '--energy-deep': `var(--${p.energy}-deep)`, borderTop: '1px solid var(--rule)' }}>
      <div className="wrap">
        <div className="grid cols-2" style={{ alignItems: 'center' }}>
          <div className="reveal" style={{ order: reverse ? 2 : 1 }}>
            <div className="pk-meta" style={{ marginBottom: 14 }}><Glyph name={p.glyph} size={22} color={`var(--${p.energy}-deep)`} /><span>{p.kicker}</span></div>
            <h2 className="display-l" style={{ color: `var(--${p.energy}-deep)` }}>{tendify(p.name)}</h2>
            <div style={{ display: 'flex', gap: 12, marginTop: 18, flexWrap: 'wrap' }}>
              <span className="pill" style={{ '--energy-core': `var(--${p.energy}-core)` }}><span className="dot" />{p.duration}</span>
              <span className="pill">{p.format}</span>
            </div>
            <p className="lead" style={{ marginTop: 24, maxWidth: '46ch' }}>{p.lede}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <a className="btn btn-ink" href={'journey.html?add=' + p.id + '#builder'}>Add to a programme<span className="btn-arrow">→</span></a>
              <a className="btn btn-ghost" href={'journey.html?add=' + p.id + '#proposal'}>Ask about this</a>
            </div>
          </div>
          <div className="reveal" style={{ order: reverse ? 1 : 2 }}>
            <div className="card card-pad accent-top" style={{ '--energy-core': `var(--${p.energy}-core)` }}>
              <div className="eyebrow" style={{ '--energy-core': `var(--${p.energy}-core)`, marginBottom: 16 }}>What’s included</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 13 }}>
                {p.includes.map(t => (
                  <li key={t} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: `var(--${p.energy}-core)`, marginTop: 9, flex: 'none' }} />{t}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 22, paddingTop: 20, borderTop: '1px solid var(--rule)' }}>
                <div className="eyebrow no-rule" style={{ marginBottom: 8 }}>You leave with</div>
                <p style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, lineHeight: 1.3, color: `var(--${p.energy}-deep)`, margin: 0 }}>{p.outcome}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Packages() {
  window.useReveal();
  return (
    <>
      <Nav active="packages" />
      {/* HEADER */}
      <header className="section" style={{ paddingBottom: 'clamp(28px,4vw,48px)' }}>
        <div className="wrap">
          <div className="ph-hero">
            <div>
              <div className="eyebrow">Packages and prices</div>
              <h1 className="display-xl" style={{ maxWidth: '16ch' }}>Start on your own, or bring your team.</h1>
              <p className="lead" style={{ marginTop: 24, maxWidth: '54ch' }}>Anyone at work can start with TEND Bearing for free and go further with TEND Heading or TEND Direction. Teams and organisations can build TEND into talks, workshops and longer programmes, shaped with us in conversation.</p>
            </div>
            <TPhoto id="photo-1739300293388-ddbe4b4cb1f0" ratio="4x3" eager alt="Two women laughing together on a cream sofa" />
          </div>
        </div>
      </header>

      <Prices />

      <section className="section" id="teams" style={{ paddingBottom: 'clamp(20px,3vw,36px)', borderTop: '1px solid var(--rule)' }}>
        <div className="wrap">
          <SectionHead eyebrow="For teams and organisations" title="Bring TEND to your team." lead="Every team is different, so team and organisation work is shaped with you in conversation. Tell us what your people need and we will come back to you within two working days." />
          <a className="btn btn-outline" href="journey.html" style={{ marginTop: 24 }}>Start a conversation<span className="btn-arrow">→</span></a>
        </div>
      </section>

      {/* QUICK NAV */}
      <div className="wrap" style={{ marginBottom: 8 }}>
        <div className="stat-row cur4 reveal">
          {PACKAGES.map(p => (
            <a key={p.id} className="stat" href={`#${p.id}`} style={{ textDecoration: 'none', display: 'block', '--c-core': `var(--${p.energy}-core)`, '--c-deep': `var(--${p.energy}-deep)`, '--c-tint': `var(--${p.energy}-tint)` }}>
              <span className="sdot" />
              <div className="sv" style={{ fontSize: 22 }}>{p.duration}</div>
              <div className="sl">{p.name.replace('TEND ', '')}</div>
            </a>
          ))}
        </div>
      </div>

      {PACKAGES.map((p, i) => <PackageSection p={p} idx={i} key={p.id} />)}

      {/* LEARNING JOURNEYS */}
      <section className="section section-ink" id="journeys">
        <div className="wrap">
          <div className="grid cols-2" style={{ alignItems: 'center', marginBottom: 'clamp(36px,5vw,64px)' }}>
            <div className="reveal">
              <div className="eyebrow" style={{ color: 'color-mix(in srgb, var(--tend-page) 72%, transparent)' }}>Learning programmes · 3 to 6 months</div>
              <h2 className="display-l" style={{ color: 'var(--tend-page)' }}>One designed programme, from the first session to the last.</h2>
            </div>
            <div className="reveal">
              <p className="lead" style={{ color: 'color-mix(in srgb, var(--tend-page) 80%, transparent)' }}>TEND opens the programme and facilitation carries it. Over three to six months, the instrument is woven with keynotes, workshops, and Andrew Wolhuter’s facilitation topics into a single arc, with bespoke design factored in from the start.</p>
              <a className="btn btn-accent btn-lg" href="journey.html" style={{ marginTop: 24 }}>Shape a programme with us<span className="btn-arrow">→</span></a>
            </div>
          </div>
          <div className="eyebrow" style={{ color: 'color-mix(in srgb, var(--tend-page) 72%, transparent)', marginBottom: 24 }}>Facilitation topics that carry the programme</div>
          <div className="grid cols-2">
            {JOURNEY_TOPICS.map(t => (
              <a key={t.n} href={'journey.html?add=' + t.id + '#builder'} className="reveal pk-topic" style={{ padding: 'clamp(22px,3vw,32px)', border: '1px solid color-mix(in srgb, var(--tend-page) 16%, transparent)', borderRadius: 'var(--r-md)', display: 'flex', gap: 20, textDecoration: 'none', '--c-core': `var(--${t.energy}-core)` }}>
                <div style={{ fontFamily: 'var(--font-data)', fontSize: 14, color: `var(--${t.energy}-core)`, flex: 'none' }}>{t.n}</div>
                <div>
                  <h3 className="display-s" style={{ color: 'var(--tend-page)' }}>{tendify(t.title)}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.55, color: 'color-mix(in srgb, var(--tend-page) 74%, transparent)', marginTop: 12 }}>{t.body}</p>
                  <span className="pk-topic-cta">Add to a programme →</span>
                </div>
              </a>
            ))}
          </div>
          <p className="caption" style={{ color: 'color-mix(in srgb, var(--tend-page) 55%, transparent)', marginTop: 24 }}>Facilitation topics are sequenced to your group and shaped with you.</p>
        </div>
      </section>

      {/* COMPARISON */}
      <section className="section" id="compare">
        <div className="wrap">
          <SectionHead eyebrow="At a glance" title="Which format fits your team?" lead="A quick comparison of the ways to bring TEND to a group. Every one of them starts with each person completing TEND." />
          <div className="card" style={{ marginTop: 'clamp(28px,4vw,44px)', overflow: 'hidden' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)' }}>
              <thead>
                <tr style={{ background: 'var(--surface-sunk)' }}>
                  {['Package', 'Duration', 'Format', 'Best for'].map((h, i) => (
                    <th key={h} style={{ textAlign: 'left', padding: '16px 22px', fontFamily: 'var(--font-data)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', fontWeight: 500, borderBottom: '1px solid var(--rule)' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[['TEND Keynote', '60 minutes', 'Stage', 'Framing a room or event'], ['TEND Workshop · 4h', 'Half day', 'In person', 'A team, working session'], ['TEND Workshop · 8h', 'Full day', 'In person', 'A team, deep immersion'], ['TEND Leadership Lab', '2 hours', 'With your team', 'A team Compass and a 30-day plan'], ['Learning programme', '3 to 6 months', 'Blended', 'Lasting change at scale']].map((row, ri) => (
                  <tr key={ri} style={{ borderBottom: ri < 4 ? '1px solid var(--rule)' : 0 }}>
                    {row.map((c, ci) => (
                      <td key={ci} style={{ padding: '16px 22px', fontSize: 15.5, color: ci === 0 ? 'var(--tend-ink)' : 'var(--text-secondary)', fontWeight: ci === 0 ? 600 : 400 }}>{c}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* ENQUIRE CTA */}
      <section className="section section-sunk center" id="enquire">
        <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 }}>Not sure where to start?</h2>
          <p className="lead" style={{ marginTop: 16 }}>Tell us about your team and we will shape it with you, or start with TEND Bearing yourself.</p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap' }}>
            <a className="btn btn-ink btn-lg" href="journey.html">Start a conversation<span className="btn-arrow">→</span></a>
            <a className="btn btn-outline btn-lg" href="index.html#bearing">Start TEND Bearing</a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

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