// site/page-case-studies.jsx — Case Studies index + article.
// Routing: `#case-studies` shows the index; `#case-studies/<slug>` shows one
// full study. Study data lives in site/case-studies-posts.jsx
// (window.CASE_STUDIES), transcribed verbatim from the 2025 case-study doc.
// The "More voices" strip below the studies reuses real fairs.com testimonial
// quotes (operator names match the live site).

const CS_TESTIMONIALS = [
  { quote: "We had a wonderful experience with Fairs.com's electronic ticketing system last year. The setup process was straightforward, and the equipment performed flawlessly throughout our event. We were so pleased with the overall experience that we are expanding the use of Fairs.com this year by adding online camping registration.", name: 'Chris Yunker', role: 'Fair Manager', fair: "St Joe's County Grange Fair" },
  { quote: "Our experience with the team at Fairs.com was absolutely top-notch! From the start, their passion for helping fairs succeed really showed. They didn't just 'set it and forget it', they rolled up their sleeves and worked right alongside us, even when we were fighting through some serious techno stress.", name: 'Nic Hall', role: 'Fair Manager', fair: 'Midland County Fair' },
  { quote: "Fairs.com made our transition to digital ticketing smooth and stress-free. Between the hands-on support, user-friendly tools, and responsive customer service, the entire process was easier than we ever expected. We look forward to continuing the partnership and would highly recommend Fairs.com to any fair considering making the move to online ticketing.", name: 'Dan Foster', role: 'President', fair: 'Windsor Fair' },
  { quote: "The biggest advantage of working with the team at Fairs.com is the personalized support. I don't get kicked to an automated chatbot or offshore support team. I can always speak with my account manager who is actively monitoring my events. I sleep better at night knowing I have a partner who is just as invested in our success as we are.", name: 'Derek Rowe', role: 'President', fair: 'Seneca County Fair' },
  { quote: "Fairs.com support has been outstanding. We can pick up the phone and call to discuss questions on reports and to get assistance on the set-up of the ticket platforms!", name: 'Steve Patterson', role: 'Fair Manager', fair: 'Hendricks County 4-H Fair' },
  { quote: "The team at Fairs.com has been so supportive of our efforts to create a first-class experience for our fairgoers here in Putnam County. From custom ticket packages to tailored solutions for our sponsors, we can always count on the team at Fairs.com to ensure we have the solutions we need to execute our vision.", name: 'Krista Snodgrass', role: 'President', fair: 'Putnam County Fair Board' },
  { quote: "If you're looking for a digital ticketing partner, especially if it will be your first time going digital, there is no better option than the team at Fairs.com. They made the process so simple and easy. … They went so far as to have a member of their team come to our fair to ensure all of our fair staff and volunteers were experts on the process of selling and scanning tickets.", name: 'Heather Downs', role: 'Office Manager', fair: 'Lenawee County Fair' },
  { quote: "Fairs.com has been a godsend! They handed us the modern website and social media marketing services we desperately needed to reach our fairgoers where they are: online. We simply didn't have the resources or expertise, and it freed us to do other things. [Fairs.com] has been a true partner for us as we take our fair to the next level.", name: 'Crystal Holthaus', role: 'President', fair: 'Hamilton County Fair' },
];

function PageCaseStudies({ 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 study = slug ? CASE_STUDIES.find(c => c.slug === slug) : null;

  if (slug && !study) return <CaseStudiesNotFound onNav={onNav} slug={slug} />;
  return study ? <CaseStudiesArticle study={study} onNav={onNav} /> : <CaseStudiesIndex onNav={onNav} />;
}

// ─── Index ──────────────────────────────────────────────────
function CaseStudiesIndex({ onNav }) {
  const featured = CASE_STUDIES[0];
  const go = (slug) => onNav('case-studies/' + slug);

  return (
    <div>
      <PageHero
        eyebrow="Resources · Case Studies"
        title="Real results"
        titleAccent="from fairs using Fairs.com."
        lead="In-depth stories from fairs across the country, told through the words of the operators and board members who lived them, and the numbers that prove it out."
        cowSize={220}
      />

      {/* Featured study */}
      <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: 28 }}>
            <SectionEyebrow>Featured study</SectionEyebrow>
          </div>
          <button onClick={() => go(featured.slug)} style={{
            display: 'block', width: '100%', textAlign: 'left', fontFamily: 'inherit',
            cursor: 'pointer', background: 'transparent', border: 0, padding: 0,
          }}>
            <div className="cs-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: '1.05fr 1fr',
            }}>
              <div style={{ position: 'relative', minHeight: 380, background: S.cream3 }}>
                <img src={featured.hero} alt={featured.heroAlt || featured.fair}
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                <div style={{ position: 'absolute', left: 20, bottom: 18, color: S.cream }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.9, textShadow: '0 1px 6px rgba(0,0,0,0.6)' }}>{featured.location}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 36, marginTop: 4, letterSpacing: '-0.025em', textShadow: '0 2px 10px rgba(0,0,0,0.55)' }}>{featured.fair}</div>
                </div>
              </div>
              <div style={{ padding: 44 }}>
                <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.025em', color: S.ink, margin: '0 0 16px' }}>{featured.title}</h2>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: S.ink, opacity: 0.78, margin: '0 0 24px' }}>{featured.summary}</p>
                {featured.metrics && (
                  <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', paddingTop: 18, paddingBottom: 22, borderTop: `1px dashed ${S.border}`, borderBottom: `1px dashed ${S.border}`, marginBottom: 22 }}>
                    {featured.metrics.slice(0, 3).map(([n, l], i) => (
                      <div key={i} style={{ maxWidth: 150 }}>
                        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 28, color: S.red, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: S.mute, letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 6, lineHeight: 1.3 }}>{l}</div>
                      </div>
                    ))}
                  </div>
                )}
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: S.red, fontWeight: 700, fontSize: 15 }}>
                  Read the full study <Ico name="arrowRight" size={15} strokeWidth={2.4} />
                </div>
              </div>
            </div>
          </button>
        </div>
      </section>

      {/* All studies */}
      <section style={{ background: S.cream, padding: '72px 64px 88px', 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 }}>
            <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 }}>case studies</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, alignItems: 'stretch' }}>
            {CASE_STUDIES.map((cs, i) => (
              <button key={cs.slug} onClick={() => go(cs.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}` }}>
                  <img src={cs.hero} alt={cs.heroAlt || cs.fair}
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ padding: 22, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: S.mute, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                    {cs.location}
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, color: S.ink, margin: '6px 0 10px', letterSpacing: '-0.02em' }}>{cs.fair}</h3>
                  <p style={{
                    fontSize: 14, lineHeight: 1.55, color: S.ink, opacity: 0.74, margin: '0 0 16px',
                    display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical',
                    overflow: 'hidden', flex: 1,
                  }}>{cs.summary}</p>
                  <div style={{ borderTop: `1px dashed ${S.border}`, paddingTop: 12, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', display: 'flex', justifyContent: 'flex-end', marginTop: 'auto' }}>
                    <span style={{ color: S.red, fontWeight: 700 }}>Read →</span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* More voices */}
      <section style={{ background: S.cream2, padding: '80px 64px', position: 'relative' }}>
        <div className="has-grain" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 44 }}>
            <SectionEyebrow>More voices</SectionEyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.05, letterSpacing: '-0.025em', color: S.ink, margin: '12px auto 0', maxWidth: 720 }}>
              What fair teams say about <em style={{ fontStyle: 'italic', color: S.red }}>working with us.</em>
            </h2>
          </div>
          <div className="cs-voices" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 22 }}>
            {CS_TESTIMONIALS.map((t, i) => (
              <figure key={i} style={{
                margin: 0, background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 14,
                boxShadow: `4px 4px 0 0 ${i % 2 === 0 ? S.ink : S.red}`, padding: 26,
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: S.red, lineHeight: 1, marginBottom: 8 }}>“</div>
                <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, lineHeight: 1.55, color: S.ink, opacity: 0.86, flex: 1 }}>
                  {t.quote}
                </blockquote>
                <figcaption style={{ marginTop: 16, paddingTop: 14, borderTop: `1px dashed ${S.border}` }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: S.ink }}>{t.name}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: S.mute, letterSpacing: '0.06em', marginTop: 2 }}>{t.role} · {t.fair}</div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

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

// ─── Article (one full study) ───────────────────────────────
function CaseStudiesArticle({ study, onNav }) {
  const others = CASE_STUDIES.filter(c => c.slug !== study.slug);

  return (
    <div>
      <style>{`
        .cs-body { font-family: var(--font-display); font-size: 16px; line-height: 1.65; color: ${S.ink}; }
        .cs-body p { margin: 0 0 1.25em; }
        .cs-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; margin: 1.8em 0 0.5em; color: ${S.ink}; }
        .cs-body h2:first-child { margin-top: 0; }
        .cs-body ul { margin: 0 0 1.25em; padding-left: 1.3em; }
        .cs-body li { margin: 0 0 0.5em; }
        .cs-body strong { font-weight: 700; }
        .cs-body blockquote {
          border-left: 3px solid ${S.red};
          margin: 1.6em 0; padding: 0.2em 0 0.2em 1.3em;
          font-style: italic; font-size: 18px; line-height: 1.5; color: ${S.ink};
        }
        .cs-body blockquote cite { display: block; margin-top: 0.6em; font-style: normal; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: ${S.mute}; }
      `}</style>

      {/* Hero */}
      <section style={{ background: S.cream, padding: '56px 64px 40px', position: 'relative' }}>
        <div className="has-grain light" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
          <button onClick={() => onNav('case-studies')} style={{
            background: 'transparent', border: 0, padding: 0, cursor: 'pointer',
            color: S.ink, opacity: 0.65, fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 28,
          }}>
            <Ico name="chevronLeft" size={14} strokeWidth={2.2} /> All case studies
          </button>
          <div className="cs-hero-row" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <SectionEyebrow>Case study</SectionEyebrow>
              <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 36, lineHeight: 1.12, letterSpacing: '-0.025em', color: S.ink, margin: '14px 0 16px' }}>{study.title}</h1>
              <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.5, color: S.ink, opacity: 0.78, margin: '0 0 20px' }}>{study.summary}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                {study.logo && <img src={study.logo} alt={study.fair} style={{ height: 44, width: 'auto', display: 'block' }} />}
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: S.ink }}>{study.fair}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: S.mute, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{study.location}</div>
                </div>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <img src={study.hero} alt={study.heroAlt || study.fair}
                style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 16, border: `1.5px solid ${S.ink}`, boxShadow: `8px 8px 0 0 ${S.red}` }} />
            </div>
          </div>
        </div>
      </section>

      {/* Metrics strip */}
      {study.metrics && (
        <section style={{ background: S.ink, padding: '40px 64px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -80, right: -60, width: 260, height: 260, borderRadius: '50%', background: S.red, opacity: 0.16, filter: 'blur(40px)' }} />
          <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto' }}>
            <div className="cs-metrics" style={{ display: 'grid', gridTemplateColumns: `repeat(${study.metrics.length}, 1fr)`, gap: 24 }}>
              {study.metrics.map(([n, l], i) => (
                <div key={i} style={{ borderLeft: `2px solid ${S.red}`, paddingLeft: 16 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 36, color: S.cream, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(253,249,240,0.7)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 8, lineHeight: 1.4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Body + sidebar */}
      <section style={{ background: S.cream, padding: '56px 64px 72px' }}>
        <div className="cs-body-row" style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 56, alignItems: 'start' }}>
          <div>
            <div className="cs-body" dangerouslySetInnerHTML={{ __html: study.body }} />

            {/* Timeline */}
            {study.timeline && (
              <div style={{ marginTop: 40 }}>
                <SectionEyebrow>Onboarding &amp; preparation timeline</SectionEyebrow>
                <div style={{ position: 'relative', marginTop: 22, paddingLeft: 4 }}>
                  <div style={{ position: 'absolute', left: 92, top: 6, bottom: 6, width: 2, background: S.border }} />
                  {study.timeline.map(([date, title, desc], i) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '84px 32px 1fr', gap: 10, alignItems: 'flex-start', paddingBottom: i < study.timeline.length - 1 ? 26 : 0 }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: S.ink, textAlign: 'right', lineHeight: 1.3 }}>{date}</div>
                      <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 3 }}>
                        <span style={{ width: 13, height: 13, borderRadius: 999, background: i === study.timeline.length - 1 ? S.red : S.cream, border: `2px solid ${i === study.timeline.length - 1 ? S.red : S.ink}`, position: 'relative', zIndex: 1 }} />
                      </div>
                      <div>
                        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: S.ink, letterSpacing: '-0.01em' }}>{title}</div>
                        <div style={{ fontSize: 14, color: S.ink, opacity: 0.74, marginTop: 4, lineHeight: 1.5 }}>{desc}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Before / after compare */}
            {study.compare && (
              <div style={{ marginTop: 40 }}>
                <SectionEyebrow>Before &amp; after</SectionEyebrow>
                <div className="cs-compare" style={{ marginTop: 18, border: `1.5px solid ${S.ink}`, borderRadius: 14, overflow: 'hidden' }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.3fr 1.3fr 1.3fr', background: S.ink }}>
                    {study.compare.cols.map((c, i) => (
                      <div key={i} style={{ padding: '12px 16px', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: i === 2 ? S.red : S.cream }}>{c}</div>
                    ))}
                  </div>
                  {study.compare.rows.map((row, ri) => (
                    <div key={ri} style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.3fr 1.3fr 1.3fr', borderTop: `1px solid ${S.border}`, background: ri % 2 ? S.cream : S.cream2 }}>
                      {row.map((cell, ci) => (
                        <div key={ci} style={{
                          padding: '14px 16px', fontSize: 14, lineHeight: 1.4,
                          fontFamily: ci === 0 ? 'var(--font-display)' : 'inherit',
                          fontWeight: ci === 0 ? 700 : (ci === 3 ? 600 : 400),
                          color: ci === 3 ? S.red : S.ink, opacity: ci === 1 ? 0.7 : 1,
                          borderLeft: ci > 0 ? `1px solid ${S.border}` : 'none',
                        }}>{cell}</div>
                      ))}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Gallery */}
            {study.gallery && study.gallery.length > 0 && (
              <div className="cs-gallery" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: `repeat(${study.gallery.length}, 1fr)`, gap: 14 }}>
                {study.gallery.map((g, i) => (
                  <img key={i} src={g.src} alt={g.alt || study.fair}
                    style={{ width: '100%', height: 200, objectFit: 'cover', display: 'block', borderRadius: 12, border: `1.5px solid ${S.ink}` }} />
                ))}
              </div>
            )}

            {/* Standout quote */}
            {study.quote && (
              <div style={{ marginTop: 44, padding: '32px 36px', background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 16, boxShadow: `5px 5px 0 0 ${S.red}`, position: 'relative' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 44, color: S.red, lineHeight: 0.6 }}>“</div>
                <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 22, lineHeight: 1.45, color: S.ink, margin: '8px 0 16px' }}>{study.quote.text}</p>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: S.ink }}>{study.quote.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: S.mute, letterSpacing: '0.04em', marginTop: 2 }}>{study.quote.role}</div>
              </div>
            )}

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

          {/* Sidebar */}
          <aside className="cs-aside" style={{ position: 'sticky', top: 96, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ background: S.cream2, border: `1.5px solid ${S.ink}`, borderRadius: 14, boxShadow: `4px 4px 0 0 ${S.ink}`, padding: 22 }}>
              {study.logo && <img src={study.logo} alt={study.fair} style={{ height: 48, width: 'auto', display: 'block', marginBottom: 14 }} />}
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: S.ink, letterSpacing: '-0.015em', lineHeight: 1.2 }}>{study.fair}</div>
              <dl style={{ margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div>
                  <dt style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: S.mute, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Location</dt>
                  <dd style={{ margin: '2px 0 0', fontSize: 14, color: S.ink }}>{study.location}</dd>
                </div>
              </dl>
              <a href={study.website} target="_blank" rel="noopener noreferrer" style={{
                display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 16, paddingTop: 14,
                borderTop: `1px dashed ${S.border}`, fontSize: 14, fontWeight: 700, color: S.red, textDecoration: 'none',
              }}>
                Visit their site <Ico name="arrowUpRight" size={14} strokeWidth={2.4} />
              </a>
            </div>
            <div style={{ background: S.ink, color: S.cream, 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: 10, color: S.red, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 6 }}>★ Your fair next?</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.3, letterSpacing: '-0.015em', marginBottom: 14 }}>
                  See what a <em style={{ fontStyle: 'italic', color: S.red }}>real partner</em> can do for your season.
                </div>
                <StubBtn size="sm" onClick={() => onNav('contact')}>Book a demo</StubBtn>
              </div>
            </div>
          </aside>
        </div>
      </section>

      {/* Related */}
      {others.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: 28 }}>
              <SectionEyebrow>Keep reading</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 }}>fair stories.</em>
              </h2>
            </div>
            <div className="cs-related" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
              {others.map((p, i) => (
                <button key={p.slug} onClick={() => onNav('case-studies/' + p.slug)} style={{
                  background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 14,
                  overflow: 'hidden', boxShadow: `4px 4px 0 0 ${i === 0 ? S.ink : S.red}`,
                  cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', padding: 0, display: 'flex',
                }}>
                  <div style={{ position: 'relative', width: 140, flex: '0 0 auto', background: S.cream3 }}>
                    <img src={p.hero} alt={p.heroAlt || p.fair} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  </div>
                  <div style={{ padding: 20 }}>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: S.red, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase' }}>★ {p.location}</div>
                    <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, lineHeight: 1.25, color: S.ink, margin: '6px 0 0', letterSpacing: '-0.015em' }}>{p.fair}</h3>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </section>
      )}

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

// ─── Not found ──────────────────────────────────────────────
function CaseStudiesNotFound({ 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>Study 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 case study.</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 case study on file.
        </p>
        <StubBtn onClick={() => onNav('case-studies')}>Back to all case studies</StubBtn>
      </div>
    </section>
  );
}

Object.assign(window, { PageCaseStudies });