// WorkPage.jsx - TBS Digital Labs Website
Object.assign(window, {
  WorkPage: function({ onNavigate }) {
    const t = darkTheme;
    const [hovered, setHovered] = React.useState(null);

    const cases = [
      {
        logoKey: 'shws',
        client: 'Southern Highlands\nWildlife Sanctuary',
        type: 'PR',
        headline: 'From grassroots rescue to scaled organisation.',
        result: 'Secured ABC features and built 10 additional website pages with consistent, high-quality content, broadening focus beyond individual updates.',
        metrics: [{ val: 'ABC', label: 'National Coverage' }, { val: '10', label: 'New Content Pages' }],
        accent: t.a2,
        links: [
          { label: 'Sanctuary website', href: 'https://southernhighlandswildlifesanctuary.org.au/' },
          { label: 'ABC News: sanctuary coverage', href: 'https://www.abc.net.au/news/2025-08-22/wombat-carer-plans-southern-highlands-sanctuary/105563994' },
        ],
      },
      {
        logoKey: 'motocoach',
        client: 'MotoCoach\nElite Racing',
        type: 'Brand Strategy | Web',
        headline: 'Race-ready launch: identity through live site before opening weekend.',
        result: 'Naming, visual identity, guidelines, and a responsive site shipped under deadline, so comms had one story for early earned coverage and owned channels.',
        metrics: [{ val: 'Race-ready', label: 'Full stack live before round one' }, { val: 'One narrative', label: 'Press + social briefed from the same system' }],
        accent: t.a1,
        links: [
          { label: 'ADB: launch coverage', href: 'https://adbmag.com.au/editorial/motocoach-elite-racing-launches-with-strong-debut-at-bellbird/' },
          { label: 'MotoCoach programs', href: 'https://motocoach.com.au/' },
          { label: 'Team: Instagram', href: 'https://www.instagram.com/motocoacheliteracing/' },
        ],
      },
      {
        logoKey: 'solentive',
        client: 'Solentive',
        type: 'Strategic Messaging',
        headline: 'A defined voice to shorten the sales cycle.',
        result: 'Competitor mapping, defined tone of voice, and strategic messaging, positioning Solentive to communicate consistently and target mid-market organisations with confidence.',
        metrics: [{ val: 'TOV', label: 'Defined' }, { val: 'Mid-market', label: 'Targeting Unlocked' }],
        accent: t.a2,
        links: [
          { label: 'Solentive', href: 'https://www.solentive.com/' },
          { label: 'Client stories', href: 'https://www.solentive.com/success-stories' },
        ],
      },
      {
        logoKey: 'national-justice-project',
        client: 'National\nJustice Project',
        type: 'Strategy | Campaigns | Paid Media',
        headline: '693% ROI on EOFY ads; 4.6% on-page donation conversion.',
        result: 'NJP needed one coordinated comms engine: we set strategy, audience architecture, and narrative away from trauma-led asks toward systemic change and “policing the police,” with website, SEO, and media work to lift awareness. For EOFY we produced a five-week matched-giving rollout (EDMs, social, PR, creative) and optimized paid media, while cleaning MailChimp so donors dropped out of repeat-ask journeys after converting—with donor segments opening at 34.8%. We also planned and launched Call It Out, extending a register that had already collected nearly 1,000 reports.',
        metrics: [{ val: '693%', label: 'ROI on EOFY ad spend' }, { val: '4.6%', label: 'Donation conversion' }],
        accent: t.a1,
        links: [
          { label: 'National Justice Project', href: 'https://www.justice.org.au/' },
          { label: 'Call It Out', href: 'https://callitout.com.au/' },
        ],
      },
      {
        logoKey: 'gcma',
        client: 'GCMA',
        type: 'PR Thought Leadership',
        headline: 'Multi-market PR ahead of the Lumyn launch.',
        result: 'A thought leadership campaign covering policy, gender positioning, AI, and longevity, placed across multiple publications ahead of the product launch.',
        metrics: [{ val: '4', label: 'Topic Areas' }, { val: 'Multi', label: 'Market Coverage' }],
        accent: t.a2,
        links: [
          { label: 'Global Centre for Modern Ageing', href: 'https://www.gcma.net.au/' },
          { label: 'Lumyn', href: 'https://www.lumyn.net.au/' },
        ],
      },
      {
        logoKey: 'aristotle-metadata',
        client: 'Aristotle Metadata',
        type: 'Personal Brand PR',
        headline: 'Top-tier authority in 6 weeks.',
        result: 'Secured placements in The Mandarin, SMH/The Age, and Canberra Times for CEO Sam Spencer, establishing Aristotle Metadata as a credible voice ahead of book publishing.',
        metrics: [{ val: '3', label: 'Tier-One Outlets' }, { val: '6wk', label: 'Timeframe' }],
        accent: t.a1,
        links: [
          { label: 'Aristotle Metadata', href: 'https://aristotlemetadata.com/' },
          { label: 'The Mandarin: author page', href: 'https://www.themandarin.com.au/author/samspencer/' },
        ],
      },
      {
        logoKey: 'dowson-turco',
        client: 'Dowson Turco',
        type: 'PR Advocacy',
        headline: 'National media on LGBTQ+ rights and estate law.',
        result: 'Strong national media coverage across SMH, The Age, and Brisbane Times, focused on LGBTQ+ hate crime positioning and wills and estate disputes.',
        metrics: [{ val: 'SMH', label: 'The Age + More' }, { val: 'National', label: 'Coverage' }],
        accent: t.a2,
        links: [
          { label: 'Dowson Turco Lawyers', href: 'https://dowsonturco.com.au/' },
        ],
      },
    ];

    return (
      <div style={{ background: t.bg, minHeight: '100svh' }}>
        <DsBackdropSection slug="lit-cubes" variant="hero" className="ds-page-hero-pad ds-page-hero-fill">
          <div className="ds-content-wrap">
            <div data-ds-enter style={{ ['--ds-enter-delay']: '40ms', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div data-ds-rule style={{ width: 24, height: 1, background: t.a2 }} />
              <span style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 500, color: t.a2 }}>Client results</span>
            </div>
            <h1 data-ds-enter className="ds-hero-h1" style={{ ['--ds-enter-delay']: '120ms', fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5.25vw + 8px, 80px)', color: t.fg, lineHeight: 1.08, letterSpacing: '-0.02em' }}>
              {dsHighlight('Strategy in. Results out.', 'Results out.', t.hl)}
            </h1>
            <p data-ds-enter className="ds-prose-wide" style={{ ['--ds-enter-delay']: '260ms', fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, lineHeight: 1.65, marginTop: 24 }}>
              Every project here started with a specific problem and a decision about how to solve it. The results followed from that.
            </p>
          </div>
        </DsBackdropSection>

        <section className="ds-section-follow-hero" style={{ paddingLeft: 'var(--ds-page-gutter)', paddingRight: 'var(--ds-page-gutter)', paddingBottom: 'var(--ds-section-pad-y-loose)' }}>
          <div className="ds-content-wrap" style={{ display: 'flex', flexDirection: 'column', gap: 2 }} data-ds-stagger>
            {cases.map((c, i) => {
              var L = typeof DS_CASE_STUDY_LOGO !== 'undefined' && c.logoKey ? DS_CASE_STUDY_LOGO[c.logoKey] : null;
              return (
              <div key={i} data-ds-reveal className="ds-card-lift" onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
                style={{ background: hovered === i ? t.bgHover : t.bgCard, border: `1px solid ${t.border2}`, borderRadius: 2, padding: 'clamp(24px, 4vw, 40px)' }}>
                <div className="ds-work-row">
                <div>
                  {L && typeof DsLogoMark !== 'undefined' ? (
                    <div className="ds-work-logo" style={{ marginBottom: 12 }}>
                      <DsLogoMark logoKey={c.logoKey} variant="work" />
                    </div>
                  ) : L ? (
                    <div
                      className="ds-case-study-logo-cell ds-case-study-logo-cell--work"
                      style={{
                        ['--ds-csl-scale']: String(L.scale != null ? L.scale : 1),
                        ['--ds-csl-y']: (L.y != null ? L.y : 0) + 'px',
                      }}
                    >
                      <img
                        className={
                          typeof dsLogoImgClass === 'function'
                            ? dsLogoImgClass(L)
                            : 'ds-case-study-logo-img' +
                              (L.invertOnDarkCard ? ' ds-case-study-logo-img--on-dark' : '')
                        }
                        src={L.src}
                        alt={L.alt}
                        style={Object.assign(
                          { maxHeight: (L.maxH != null ? L.maxH : 34) + 'px' },
                          L.round
                            ? {
                                width: (L.maxH != null ? L.maxH : 34) + 'px',
                                height: (L.maxH != null ? L.maxH : 34) + 'px',
                                borderRadius: '50%',
                                objectFit: 'cover',
                              }
                            : {}
                        )}
                        loading="lazy"
                        decoding="async"
                      />
                    </div>
                  ) : null}
                  <div style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 600, color: c.accent, marginBottom: 14 }}>{c.type}</div>
                  <div style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 20, color: t.fg, lineHeight: 1.25, whiteSpace: 'pre-line' }}>{c.client}</div>
                </div>
                <div>
                  <div style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 400, fontSize: 20, color: t.fg, marginBottom: 10, lineHeight: 1.3 }}>{c.headline}</div>
                  <p style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, marginBottom: 0 }}>{c.result}</p>
                  {Array.isArray(c.links) && c.links.length > 0 ? (
                    <nav aria-label={`Supporting links for ${String(c.client).replace(/\n/g, ' ')}`} style={{ marginTop: 14 }}>
                      <div style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 600, color: t.fg3, marginBottom: 8 }}>Supporting links</div>
                      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexWrap: 'wrap', gap: '10px 18px' }}>
                        {c.links.map((ln, li) => (
                          <li key={li} style={{ margin: 0 }}>
                            <a
                              href={ln.href}
                              target="_blank"
                              rel="noopener noreferrer"
                              aria-label={`${ln.label} (opens in new tab)`}
                              className="ds-link"
                              style={{
                                fontFamily: "'Rethink Sans', sans-serif",
                                fontSize: 16,
                                fontWeight: 500,
                                color: c.accent,
                                textDecoration: 'none',
                              }}
                            >
                              {ln.label}
                            </a>
                          </li>
                        ))}
                      </ul>
                    </nav>
                  ) : null}
                </div>
                <div className="ds-work-metrics" style={{ display: 'flex', flexDirection: 'column', gap: 16, minWidth: 0 }}>
                  {c.metrics.map((m, j) => (
                    <div key={j}>
                      <div style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 26, color: c.accent, lineHeight: 1 }}>{m.val}</div>
                      <div style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg3, marginTop: 4, lineHeight: 1.35, hyphens: 'none' }}>{m.label}</div>
                    </div>
                  ))}
                </div>
                </div>
              </div>
              );
            })}
          </div>
        </section>

        <DsBackdropSection slug="red-wall" variant="band" style={{ padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter) max(48px, env(safe-area-inset-bottom))', textAlign: 'center' }}>
          <div style={{ maxWidth: 540, margin: '0 auto' }} data-ds-stagger>
            <h2 data-ds-reveal style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5vw, 40px)', color: t.fg, marginBottom: 16, lineHeight: 1.1 }}>{dsHighlight('Like our thinking? Let\u2019s put it to work.', 'to work', t.hl)}</h2>
            <div data-ds-reveal>
              <button type="button" onClick={() => onNavigate('contact')} className="ds-btn-primary" style={{ background: t.a1, color: t.onAccent, border: 'none', cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 600, fontSize: 16, padding: '14px 36px', borderRadius: 2, minHeight: 44 }}><span>Talk to us</span></button>
            </div>
          </div>
        </DsBackdropSection>
      </div>
    );
  }
});