// ServicesPage.jsx - TBS Digital Labs Website
Object.assign(window, {
  ServicesPage: function({ onNavigate }) {
    const t = darkTheme;
    var overview = typeof SERVICES_OVERVIEW !== 'undefined' ? SERVICES_OVERVIEW : [];

    return (
      <div style={{ background: t.bg, minHeight: '100svh' }}>
        <DsBackdropSection slug="geometric-facets" 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 }}>What we do</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('Plan, build, grow', 'grow', 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 }}>
              TBS Digital Labs works with founders and businesses to get strategy right, build the things that need building, and get in front of the right people.
            </p>
            <div data-ds-enter style={{ ['--ds-enter-delay']: '380ms', marginTop: 32 }}>
              <button type="button" onClick={function () { onNavigate('work'); }} 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 28px', borderRadius: 2, minHeight: 44 }}>
                <span>See our work</span>
              </button>
            </div>
          </div>
        </DsBackdropSection>

        <section style={{ padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <div data-ds-reveal style={{ marginBottom: 40 }}>
              <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 4.5vw, 52px)', color: t.fg, lineHeight: 1.12, marginBottom: 16 }}>
                Strategy, creative, media
              </h2>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7 }}>
                Everything connected. Built to help businesses grow without the usual disconnect between planning, production, and execution.
              </p>
            </div>
            <div data-ds-reveal="fade">
              <DsAccordion
                items={overview}
                defaultOpen={0}
                onItemNavigate={onNavigate}
                linkLabel="View service"
              />
            </div>
          </div>
        </section>

        <section style={{ background: t.bgMid, padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <DsProseSplit
              heading={dsHighlight('Built inside media, focused on growth', 'growth', t.hl)}
              image="red-glow"
            >
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, margin: 0 }}>
                TBS Digital Labs was founded by a team that spent more than a decade building and running an independent media platform from 2013. That background shapes how we think about strategy, content, media, and creative: we don&apos;t separate the thinking from the execution.
              </p>
            </DsProseSplit>
          </div>
        </section>

        <DsSocialProof heading="Trusted by founders building for the long term" />

        <DsServiceCta
          heading="Not sure where to start?"
          body="Most clients come to us knowing something isn\u2019t working, but not always knowing exactly what. Book a call and you\u2019ll leave knowing what needs to change."
          onNavigate={onNavigate}
        />
      </div>
    );
  },
});