// site/page-ymtd.jsx — You Make The Difference index + article view.
// Mirrors the blog page structure: `#ymtd` shows the index of all
// Lunch & Learn posts; `#ymtd/<slug>` shows a single post. Post data
// lives in site/ymtd-posts.jsx (window.YMTD_POSTS), pulled from the
// live fairs.com YMTD landing page so the content matches verbatim.

function PageYMTD({ onNav }) {
  const [hash, setHash] = React.useState(typeof location !== 'undefined' ? location.hash : '');
  React.useEffect(() => {
    const onHash = () => setHash(location.hash);
    window.addEventListener('hashchange', onHash);
    window.addEventListener('popstate', onHash);
    return () => {
      window.removeEventListener('hashchange', onHash);
      window.removeEventListener('popstate', onHash);
    };
  }, []);

  const parts = (hash || '').replace(/^#/, '').split('/');
  const slug = parts.length > 1 ? parts.slice(1).join('/') : null;
  const post = slug ? YMTD_POSTS.find(p => p.slug === slug) : null;

  if (slug && !post) return <YMTDNotFound onNav={onNav} slug={slug} />;
  return post ? <YMTDArticle post={post} onNav={onNav} /> : <YMTDIndex onNav={onNav} />;
}

// ─── Index view ─────────────────────────────────────────────
function YMTDIndex({ onNav }) {
  const featured = YMTD_POSTS[0];
  const rest = YMTD_POSTS.slice(1);
  const goToPost = (slug) => onNav('ymtd/' + slug);

  return (
    <div>
      <PageHero
        eyebrow="Resources · You Make the Difference"
        title="The You Make The Difference"
        titleAccent="Lunch and Learn archive."
        lead="A monthly live stream series for Fair Boards, Ag Societies, and volunteer-led organizations — practical playbooks from award-winning advocate Ian Hill on leadership, volunteers, and growing a healthy organization. Every session is archived below, free to watch on demand."
        cowSize={200}
      />

      {/* Grant program */}
      <section style={{ background: S.cream2, padding: '96px 64px', position: 'relative', overflow: 'hidden' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div className="ymtd-grant-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <SectionEyebrow>The Grant</SectionEyebrow>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36,
                lineHeight: 1.06, letterSpacing: '-0.025em', color: S.ink,
                margin: '14px 0 16px',
              }}>
                <em style={{ fontStyle: 'italic', color: S.red, fontWeight: 500 }}>You Make THE Difference</em> National Grant <span style={{ opacity: 0.55, fontSize: '0.7em', fontWeight: 500 }}>powered by Fairs.com</span>
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: S.ink, opacity: 0.78, margin: '0 0 24px' }}>
                The 'You Make THE Difference National Grant' was designed to empower fair boards with actionable strategies to overcome challenges and thrive in a dynamic environment.
              </p>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  ['Address Volunteer Shortages',     'Proven methods to recruit, retain, and motivate dedicated volunteers and build a reliable team.'],
                  ['Enhance Financial Sustainability','Innovative approaches to secure funding, boost financial resilience, and plan for long-term success.'],
                  ['Combat Leadership Fatigue',       'Tools and support to effectively manage responsibilities, prevent burnout, and create a collaborative, healthy board environment.'],
                ].map(([label, body], i) => (
                  <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{
                      flexShrink: 0, marginTop: 4,
                      width: 22, height: 22, borderRadius: 999, background: S.red,
                      color: S.ink, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}>{i + 1}</span>
                    <div style={{ fontSize: 16, lineHeight: 1.5, color: S.ink }}>
                      <strong style={{ fontWeight: 700 }}>{label}:</strong> {body}
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            {/* Vimeo video embed — matches the live YMTD page */}
            <div style={{ position: 'relative' }}>
              <div style={{
                position: 'relative', borderRadius: 16, overflow: 'hidden',
                border: `1.5px solid ${S.ink}`, boxShadow: `8px 8px 0 0 ${S.red}`,
                transform: 'rotate(0.5deg)', background: S.ink,
              }}>
                <div style={{ position: 'relative', paddingTop: '56.25%' }}>
                  <iframe
                    title="You Make THE Difference, Ian Hill"
                    src="https://player.vimeo.com/video/1051621046?h=bd213c8a78&title=0&byline=0&portrait=0"
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                    allow="autoplay; fullscreen; picture-in-picture"
                    allowFullScreen
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How The Grant Works */}
      <section style={{ background: S.cream, padding: '96px 64px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionEyebrow>How the grant worked</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '14px auto 12px', maxWidth: 800 }}>
              A comprehensive training program <em style={{ fontStyle: 'italic', color: S.red }}>for state fair boards.</em>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, margin: '0 auto', maxWidth: 680 }}>
              Awarded state fair board associations received a comprehensive training program which included:
            </p>
          </div>
          <div className="ymtd-grant-works" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              ['In-Person Training',           'The tour traveled through each awarded state for up to six days, delivering tailored training for every fair board and volunteer through a series of face-to-face events.', 'users'],
              ['Follow-Up Support Portal',     "After the face-to-face events, the learning moved online for 30 days so boards had the support they needed to implement what they'd learned. The learning portal remains available indefinitely to train future leaders.", 'monitor'],
              ['$1,000 Implementation Funding','Offset the cost of planning and logistics that state boards incurred to bring the National Tour to their state.', 'wallet'],
            ].map(([t, body, icon], i) => {
              const tilts = [-0.4, 0.4, -0.3];
              return (
                <div key={i} style={{
                  background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 16, padding: 28,
                  boxShadow: `4px 4px 0 0 ${i === 1 ? S.red : S.ink}`, transform: `rotate(${tilts[i]}deg)`,
                  position: 'relative', overflow: 'hidden',
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12, background: S.red,
                    color: S.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.1em',
                    marginBottom: 16,
                  }}>0{i + 1}</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.02em', color: S.ink, margin: '0 0 10px' }}>{t}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.78, margin: 0 }}>{body}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Featured post */}
      {featured && (
        <section style={{ background: S.cream2, padding: '72px 64px', position: 'relative' }}>
          <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
          <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
            <div style={{ marginBottom: 32 }}>
              <SectionEyebrow>From the archive</SectionEyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px 0 0' }}>
                The most recent <em style={{ fontStyle: 'italic', color: S.red }}>Lunch and Learn.</em>
              </h2>
            </div>
            <button onClick={() => goToPost(featured.slug)} style={{
              display: 'block', width: '100%', textAlign: 'left', fontFamily: 'inherit',
              cursor: 'pointer', background: 'transparent', border: 0, padding: 0,
            }}>
              <div className="ymtd-featured" style={{
                background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 18, overflow: 'hidden',
                boxShadow: `8px 8px 0 0 ${S.red}`, display: 'grid', gridTemplateColumns: '1fr 1fr',
              }}>
                <div style={{ position: 'relative', minHeight: 360, background: S.cream3 }}>
                  {featured.image && (
                    <img src={featured.image} alt={featured.imageAlt || featured.title}
                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
                  )}
                  <div style={{ position: 'absolute', top: 16, left: 16, transform: 'rotate(-4deg)', background: S.red, color: S.ink, padding: '6px 12px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                    On Demand · {featured.category}
                  </div>
                </div>
                <div style={{ padding: 44 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                    ★ {featured.eyebrow}
                  </div>
                  <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.025em', color: S.ink, margin: '14px 0 14px' }}>
                    {featured.title}
                  </h2>
                  {featured.summary && (
                    <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, margin: '0 0 24px' }}>
                      {featured.summary}
                    </p>
                  )}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: `1px dashed ${S.border}`, paddingTop: 18 }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.06em' }}>
                      {featured.date} · with {featured.speaker}
                    </div>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: S.red, fontWeight: 700, fontSize: 16 }}>
                      Watch session <Ico name="arrowRight" size={14} strokeWidth={2.4} />
                    </div>
                  </div>
                </div>
              </div>
            </button>
          </div>
        </section>
      )}

      {/* All sessions grid */}
      <section style={{ background: S.cream, padding: '72px 64px 96px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ marginBottom: 32, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: 0 }}>
              All <em style={{ fontStyle: 'italic', color: S.red }}>sessions</em>
            </h2>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              {YMTD_POSTS.length} on demand
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, alignItems: 'stretch' }}>
            {rest.map((a, i) => (
              <button key={a.slug} onClick={() => goToPost(a.slug)} style={{
                background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 16,
                overflow: 'hidden', boxShadow: `4px 4px 0 0 ${i % 3 === 1 ? S.red : S.ink}`,
                cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', padding: 0,
                display: 'flex', flexDirection: 'column', height: '100%',
              }}>
                <div style={{ position: 'relative', width: '100%', height: 200, background: S.cream2, flex: '0 0 auto', borderBottom: `1px solid ${S.border}` }}>
                  {a.image && (
                    <img src={a.image} alt={a.imageAlt || a.title}
                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
                  )}
                  <div style={{ position: 'absolute', top: 10, left: 10, transform: 'rotate(-3deg)', background: S.ink, color: S.cream, padding: '4px 10px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', zIndex: 1 }}>
                    On Demand
                  </div>
                </div>
                <div style={{ padding: 22, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                    {a.eyebrow}
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, lineHeight: 1.3,
                    color: S.ink, margin: '8px 0 12px', letterSpacing: '-0.02em',
                    display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
                    overflow: 'hidden', minHeight: '3.9em',
                  }}>{a.title}</h3>
                  <p style={{
                    fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, margin: '0 0 16px',
                    display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
                    overflow: 'hidden', flex: 1,
                  }}>{a.summary}</p>
                  <div style={{ borderTop: `1px dashed ${S.border}`, paddingTop: 12, fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.06em', display: 'flex', justifyContent: 'space-between', marginTop: 'auto' }}>
                    <span>{a.date}</span>
                    <span style={{ color: S.red, fontWeight: 700 }}>Watch →</span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip onNav={onNav} />
    </div>
  );
}

// ─── Article view (single Lunch & Learn session) ────────────
function YMTDArticle({ post, onNav }) {
  const otherPosts = YMTD_POSTS.filter(p => p.slug !== post.slug).slice(0, 3);

  return (
    <div>
      <style>{`
        .ymtd-body { font-family: var(--font-display); font-size: 16px; line-height: 1.65; color: ${S.ink}; }
        .ymtd-body p { margin: 0 0 1.25em; }
        .ymtd-body p:last-child { margin-bottom: 0; }
        .ymtd-body strong { font-weight: 700; }
        .ymtd-body em { font-style: italic; }
      `}</style>

      {/* Article hero */}
      <section style={{ background: S.cream, padding: '64px 64px 24px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 820, margin: '0 auto' }}>
          <button onClick={() => onNav('ymtd')} style={{
            background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
            color: S.ink, opacity: 0.65, fontFamily: 'inherit', fontSize: 16, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 24,
          }}>
            <Ico name="chevronLeft" size={14} strokeWidth={2.2} /> All sessions
          </button>
          <SectionEyebrow>{post.eyebrow}</SectionEyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 56, lineHeight: 1.08,
            letterSpacing: '-0.03em', color: S.ink, margin: '14px 0 18px',
          }}>{post.title}</h1>
          {post.summary && (
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: S.ink, opacity: 0.78, margin: '0 0 24px' }}>
              {post.summary}
            </p>
          )}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            <span>{post.date}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>With {post.speaker}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span style={{ background: S.ink, color: S.cream, padding: '4px 10px', borderRadius: 4 }}>On Demand</span>
          </div>
        </div>
      </section>

      {/* Hero image */}
      {post.image && (
        <section style={{ background: S.cream, padding: '24px 64px 48px' }}>
          <div style={{ maxWidth: 1100, margin: '0 auto' }}>
            <img src={post.image} alt={post.imageAlt || post.title}
              style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 16, border: `1.5px solid ${S.ink}`, boxShadow: `6px 6px 0 0 ${S.red}` }} />
          </div>
        </section>
      )}

      {/* Body + outcomes + speaker card */}
      <section style={{ background: S.cream, padding: '24px 64px 96px' }}>
        <div className="ymtd-article-body" style={{ maxWidth: 980, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 56, alignItems: 'start' }}>
          <div>
            <div className="ymtd-body" dangerouslySetInnerHTML={{ __html: post.body }} />

            {post.outcomes && post.outcomes.length > 0 && (
              <div style={{
                marginTop: 40, padding: 28,
                background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 16,
                boxShadow: `4px 4px 0 0 ${S.ink}`,
              }}>
                <SectionEyebrow>What you'll learn</SectionEyebrow>
                <ul style={{ listStyle: 'none', margin: '14px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {post.outcomes.map((t, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <span style={{
                        flexShrink: 0, marginTop: 2,
                        width: 22, height: 22, borderRadius: 999, background: S.red,
                        color: S.ink, fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      }}>{i + 1}</span>
                      <span style={{ fontSize: 16, lineHeight: 1.5, color: S.ink }}>{t}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            <div style={{ marginTop: 56, paddingTop: 32, borderTop: `1px dashed ${S.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <button onClick={() => onNav('ymtd')} style={{
                background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
                color: S.red, fontFamily: 'inherit', fontSize: 16, fontWeight: 700,
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <Ico name="chevronLeft" size={14} strokeWidth={2.4} /> Back to all sessions
              </button>
              <StubBtn size="md" onClick={() => onNav('contact')}>Book a demo</StubBtn>
            </div>
          </div>

          {/* Sidebar */}
          <aside className="ymtd-aside" style={{ position: 'sticky', top: 96 }}>
            <div style={{
              background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 14,
              boxShadow: `4px 4px 0 0 ${S.red}`, padding: 22,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 8 }}>
                ★ Featuring
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: S.ink, letterSpacing: '-0.015em', lineHeight: 1.2 }}>
                {post.speaker}
              </div>
              {post.speakerBio && (
                <div style={{ marginTop: 8, fontSize: 16, lineHeight: 1.5, color: S.ink, opacity: 0.78 }}>
                  {post.speakerBio}
                </div>
              )}
              <div style={{ borderTop: `1px dashed ${S.border}`, marginTop: 16, paddingTop: 14, fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.06em' }}>
                Hosted by Fairs.com
              </div>
            </div>
            <div style={{
              marginTop: 16,
              background: S.ink, color: S.cream,
              border: `1.5px solid ${S.ink}`, borderRadius: 14,
              padding: 22, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: -40, right: -40, width: 140, height: 140, borderRadius: '50%', background: S.red, opacity: 0.22, filter: 'blur(30px)' }} />
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 6 }}>
                  ★ More sessions
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: 1.3, letterSpacing: '-0.015em', marginBottom: 14 }}>
                  Every <em style={{ fontStyle: 'italic', color: S.red }}>Lunch and Learn</em> is archived and free to watch.
                </div>
                <StubBtn size="sm" onClick={() => onNav('ymtd')}>Browse the archive</StubBtn>
              </div>
            </div>
          </aside>
        </div>
      </section>

      {/* Related */}
      {otherPosts.length > 0 && (
        <section style={{ background: S.cream2, padding: '72px 64px', position: 'relative' }}>
          <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
          <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
            <div style={{ marginBottom: 32 }}>
              <SectionEyebrow>Keep learning</SectionEyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px 0 0' }}>
                More <em style={{ fontStyle: 'italic', color: S.red }}>Lunch and Learns.</em>
              </h2>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
              {otherPosts.map((p, i) => {
                const tilts = [-0.4, 0.4, -0.3];
                return (
                  <button key={p.slug} onClick={() => onNav('ymtd/' + p.slug)} style={{
                    background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 14,
                    overflow: 'hidden', boxShadow: `4px 4px 0 0 ${i === 1 ? S.red : S.ink}`,
                    transform: `rotate(${tilts[i]}deg)`, cursor: 'pointer',
                    textAlign: 'left', fontFamily: 'inherit', padding: 0, display: 'block',
                  }}>
                    <div style={{ position: 'relative', width: '100%', height: 160, background: S.cream3 }}>
                      {p.image && (
                        <img src={p.image} alt={p.imageAlt || p.title}
                          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
                      )}
                    </div>
                    <div style={{ padding: 20 }}>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.red, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                        {p.eyebrow}
                      </div>
                      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, lineHeight: 1.3, color: S.ink, margin: '6px 0 0', letterSpacing: '-0.015em' }}>{p.title}</h3>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
        </section>
      )}

      <CTAStrip onNav={onNav} />
    </div>
  );
}

// ─── Slug not found fallback ────────────────────────────────
function YMTDNotFound({ onNav, slug }) {
  return (
    <section style={{ background: S.cream, padding: '160px 64px', position: 'relative', textAlign: 'center', minHeight: '60vh' }}>
      <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
      <div style={{ position: 'relative', maxWidth: 640, margin: '0 auto' }}>
        <SectionEyebrow>Session not found</SectionEyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.025em', color: S.ink, margin: '12px 0 16px' }}>
          We couldn't find <em style={{ fontStyle: 'italic', color: S.red }}>that session.</em>
        </h1>
        <p style={{ fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.72, margin: '0 0 32px' }}>
          The slug <code style={{ background: S.cream2, padding: '2px 6px', borderRadius: 4 }}>{slug}</code> doesn't match any session on file.
        </p>
        <StubBtn onClick={() => onNav('ymtd')}>Back to all sessions</StubBtn>
      </div>
    </section>
  );
}

Object.assign(window, { PageYMTD });