// HomePage.jsx - TBS Digital Labs Website

Object.assign(window, {
  HomePage: function({ onNavigate }) {
    const t = darkTheme;

    const howWeWork = [
      {
        title: 'Founder-level thinking',
        body: 'We work upstream. Before a single asset is made, we get clear on your narrative and the commercial case for each decision. More CMO, less marketing admin.',
      },
      {
        title: 'Media-trained execution',
        body: 'We grew up inside publishing. We know what earns attention and what people scroll past, because we\u2019ve been on both sides of it.',
      },
      {
        title: 'Systems over tactics',
        body: 'We build a connected system that grows with your business. Every piece moves towards a common goal: performance, customers, revenue and reputation. Not chains of one-off deliverables that go nowhere.',
      },
    ];

    return (
      <div>
        <DsBackdropSection slug="neon-hallway" variant="hero" className="ds-hero-viewport ds-home-hero-stack">
          <div className="ds-home-hero-inner">
            <div style={{ position: 'absolute', top: 'var(--ds-header-offset)', left: 0, width: 3, bottom: 0, background: t.a1, opacity: 0.45 }} className="ds-hero-accent-bar" />
            <div className="ds-content-wrap" style={{ position: 'relative', zIndex: 1 }}>
              <div data-ds-enter style={{ ['--ds-enter-delay']: '40ms', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
                <div data-ds-rule style={{ width: 32, height: 1, background: t.a2 }} />
                <span style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, fontWeight: 500, color: t.a2 }}>Digital-first consultancy</span>
              </div>
              <h1 data-ds-enter className="ds-hero-h1 ds-hero-h1--home" style={{ ['--ds-enter-delay']: '120ms', fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(34px, 6.5vw + 6px, 104px)', color: t.fg, lineHeight: 1.06, letterSpacing: '-0.025em', marginBottom: 16 }}>
                {dsHighlight('Built for brands playing the long game', 'long game', t.hl)}
              </h1>
              <p data-ds-enter className="ds-prose-wide" style={{ ['--ds-enter-delay']: '260ms', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 400, fontSize: 'clamp(16px, 2.2vw, 20px)', color: t.fg2, lineHeight: 1.65, marginBottom: 48, marginTop: 24 }}>
                TBS Digital Labs is a growth partner for ambitious founders and brands. We connect commercial strategy, media intelligence and creative production.
              </p>
              <div data-ds-enter style={{ ['--ds-enter-delay']: '380ms', display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center', marginBottom: 0 }}>
                <button type="button" onClick={function () { onNavigate('contact'); }} className="ds-btn-primary" style={{ boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: t.a1, color: t.onAccent, border: 'none', cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 600, fontSize: 16, padding: '14px clamp(20px, 4vw, 32px)', borderRadius: 2, minHeight: 44 }}><span>Book a brand audit</span></button>
                <button type="button" onClick={function () { onNavigate('work'); }} className="ds-btn-ghost" style={{ boxSizing: 'border-box', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'transparent', color: t.fg2, border: '1px solid ' + t.border, cursor: 'pointer', fontFamily: "'Rethink Sans', sans-serif", fontWeight: 400, fontSize: 16, padding: '13px clamp(20px, 4vw, 32px)', borderRadius: 2, minHeight: 44 }}>See our work</button>
              </div>
            </div>
          </div>
        </DsBackdropSection>

        <section style={{ background: t.inv.bg, padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <div data-ds-reveal style={{ marginBottom: 48 }}>
              <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 4.5vw, 52px)', color: t.inv.fg, lineHeight: 1.12, marginBottom: 20 }}>
                {dsHighlight('Strategy, media and execution in one place', 'one place', t.inv.hl)}
              </h2>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.inv.fg2, lineHeight: 1.7 }}>
                We start with your commercial logic. What you&apos;re building, what&apos;s blocking it, and what someone else may have oversold you on. Then we connect brand positioning, content, channels and performance into a system that builds revenue.
              </p>
            </div>
            <div className="ds-grid-pillars" data-ds-stagger>
              {howWeWork.map(function (item, i) {
                return (
                  <div key={i} data-ds-reveal className="ds-pillar-card" style={{ background: t.inv.cardBg, padding: 'clamp(32px, 6vw, 48px) clamp(24px, 4vw, 36px)', display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
                    <h3 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 26, color: t.inv.cardFg, lineHeight: 1.2, marginBottom: 16 }}>{item.title}</h3>
                    <p style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.inv.cardFg2, lineHeight: 1.7, flex: '1 1 auto', margin: 0 }}>{item.body}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        <section style={{ background: t.bg, padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <DsProseSplit
              heading={dsHighlight('Built by people who\'ve lived inside media', 'inside media', t.hl)}
              image="neon-trails"
              reverse
            >
              <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 news and opinion platform from 2013. We took that editorial experience and built something focused entirely on growth for scaling brands.
              </p>
            </DsProseSplit>
          </div>
        </section>

        <section style={{ background: t.bgMid, padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>
          <div className="ds-content-wrap">
            <div data-ds-reveal style={{ marginBottom: 32 }}>
              <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(24px, 4vw, 40px)', color: t.fg, lineHeight: 1.15, marginBottom: 12 }}>Who we work with</h2>
              <p className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.7, margin: 0 }}>
                Founders, executives and growing businesses who want strategy before spend and proof over promises.
              </p>
            </div>
            <DsSocialProof inline microLabel="Trusted by" />
          </div>
        </section>

        <DsBackdropSection slug="blue-smoke" variant="band" style={{ padding: 'var(--ds-section-pad-y-loose) var(--ds-page-gutter) max(48px, env(safe-area-inset-bottom))', textAlign: 'center' }}>
          <div className="ds-content-wrap" style={{ maxWidth: 'min(720px, 100%)', textAlign: 'center' }} data-ds-stagger>
            <h2 data-ds-reveal style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(32px, 5vw, 64px)', color: t.fg, lineHeight: 1.08, letterSpacing: '-0.02em', marginBottom: 24 }}>
              {dsHighlight('If attention is the game, let\u2019s help you win it', 'win it', t.hl)}
            </h2>
            <p data-ds-reveal className="ds-prose-wide" style={{ fontFamily: "'Rethink Sans', sans-serif", color: t.fg2, lineHeight: 1.65, marginBottom: 40, marginLeft: 'auto', marginRight: 'auto' }}>
              Book a call with us and get a straight read on where your audience, assets and budget are out of step.
            </p>
            <div data-ds-reveal>
              <button type="button" onClick={function () { 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: '16px clamp(24px, 5vw, 40px)', borderRadius: 2, minHeight: 44, maxWidth: '100%' }}><span>Start a conversation</span></button>
            </div>
          </div>
        </DsBackdropSection>
      </div>
    );
  },
});