// InsightsPage.jsx - TBS Digital Labs Website

Object.assign(window, {

  InsightsPage: function InsightsPage({ onNavigate, postSlug }) {

    const t = darkTheme;

    var posts = typeof DS_INSIGHTS !== 'undefined' && Array.isArray(DS_INSIGHTS) ? DS_INSIGHTS : [];

    var [activeCategory, setActiveCategory] = React.useState('All');



    var article = postSlug ? posts.find(function (p) { return p.slug === postSlug; }) : null;



    var categories = ['All'];

    posts.forEach(function (p) {

      (p.categories || []).forEach(function (c) {

        if (categories.indexOf(c) < 0) categories.push(c);

      });

    });



    var filtered = activeCategory === 'All'

      ? posts

      : posts.filter(function (p) {

        return (p.categories || []).indexOf(activeCategory) >= 0;

      });



    function formatDate(iso) {

      try {

        return new Date(iso).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' });

      } catch (e) {

        return '';

      }

    }



    if (article) {

      var primaryCat = (article.categories && article.categories[0]) || 'Insights';

      return (

        <div style={{ background: t.bg, minHeight: '100svh' }}>

          <section className="ds-page-hero-pad" style={{ background: t.heroBg, backgroundColor: t.bg, paddingBottom: 'clamp(32px, 5vw, 48px)' }}>

            <div className="ds-content-wrap">

              <button

                type="button"

                onClick={function () { onNavigate('insights'); }}

                className="ds-link"

                style={{

                  fontFamily: "'Rethink Sans', sans-serif",

                  fontSize: 16,

                  fontWeight: 500,

                  color: t.a2,

                  background: 'none',

                  border: 'none',

                  cursor: 'pointer',

                  padding: 0,

                  marginBottom: 24,

                  minHeight: 44,

                }}

              >

                {'\u2190'} Back to Insights

              </button>

              <div data-ds-enter style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>

                <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 }}>{primaryCat}</span>

              </div>

              <h1 data-ds-enter className="ds-hero-h1" style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(28px, 5vw + 8px, 64px)', color: t.fg, lineHeight: 1.1, letterSpacing: '-0.02em', marginBottom: 16 }}>

                {article.title}

              </h1>

              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 20px', fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg3 }}>

                <span>{article.author}</span>

                <span aria-hidden="true">&middot;</span>

                <time dateTime={article.date}>{formatDate(article.date)}</time>

                {article.readingTime ? (

                  <>

                    <span aria-hidden="true">&middot;</span>

                    <span>{article.readingTime}</span>

                  </>

                ) : null}

              </div>

              {article.featuredImage ? (

                <div style={{ marginTop: 32, borderRadius: 2, overflow: 'hidden', border: '1px solid ' + t.border2 }}>

                  <img

                    src={article.featuredImage}

                    alt={article.featuredImageAlt || article.title}

                    loading="eager"

                    decoding="async"

                    style={{ width: '100%', height: 'auto', display: 'block', maxHeight: 480, objectFit: 'cover' }}

                  />

                </div>

              ) : null}

            </div>

          </section>



          <section style={{ padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>

            <div className="ds-content-wrap">

              <div

                className="ds-article"

                dangerouslySetInnerHTML={{ __html: article.content }}

              />

            </div>

          </section>



          <DsServiceCta

            heading={dsHighlight('Like our thinking? Let\u2019s put it to work.', 'to work', t.hl)}

            buttonLabel="Get in touch"

            onNavigate={onNavigate}

          />

        </div>

      );

    }



    return (

      <div style={{ background: t.bg, minHeight: '100svh' }}>

        <DsBackdropSection slug="neon-trails" 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 }}>News &amp; Insights</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('Perspectives from inside the work', 'inside the work', 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 }}>

              Welcome to our thinking hub for all things brand, media, tech, and digital. Written by the team at TBS Digital Labs, based on brain waves we&apos;ve had from building, testing, and doing work for clients. It&apos;s insight based on what we&apos;re actually seeing, not what&apos;s trending on LinkedIn.

            </p>

          </div>

        </DsBackdropSection>



        <section style={{ padding: 'var(--ds-section-pad-y) var(--ds-page-gutter)' }}>

          <div className="ds-content-wrap">

            {posts.length === 0 ? (

              <div style={{ background: t.bgCard, border: '1px solid ' + t.border2, borderRadius: 2, padding: 'clamp(32px, 5vw, 48px)', textAlign: 'center' }}>

                <p style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg3, lineHeight: 1.6, margin: 0 }}>

                  Run <code style={{ color: t.a2 }}>npm run import:insights</code> to load articles from the insights archive.

                </p>

              </div>

            ) : (

              <>

                <div data-ds-reveal style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>

                  {categories.map(function (cat) {

                    var active = activeCategory === cat;

                    return (

                      <button

                        key={cat}

                        type="button"

                        onClick={function () { setActiveCategory(cat); }}

                        style={{

                          fontFamily: "'Rethink Sans', sans-serif",

                          fontSize: 14,

                          fontWeight: active ? 600 : 400,

                          color: active ? t.onAccent : t.fg2,

                          background: active ? t.a1 : t.bgCard,

                          border: '1px solid ' + (active ? t.a1 : t.border2),

                          borderRadius: 2,

                          padding: '8px 14px',

                          cursor: 'pointer',

                          minHeight: 44,

                        }}

                      >

                        {cat}

                      </button>

                    );

                  })}

                </div>



                <div className="ds-insights-grid" data-ds-stagger>

                  {filtered.map(function (p) {

                    var cat = (p.categories && p.categories[0]) || 'Insights';

                    return (

                      <article

                        key={p.slug}

                        data-ds-reveal

                        className="ds-card-lift"

                        style={{

                          background: t.bgCard,

                          border: '1px solid ' + t.border2,

                          borderRadius: 2,

                          overflow: 'hidden',

                          display: 'flex',

                          flexDirection: 'column',

                          cursor: 'pointer',

                        }}

                        onClick={function () { onNavigate('insights', p.slug); }}

                        onKeyDown={function (e) {

                          if (e.key === 'Enter' || e.key === ' ') {

                            e.preventDefault();

                            onNavigate('insights', p.slug);

                          }

                        }}

                        role="button"

                        tabIndex={0}

                        aria-label={'Read: ' + p.title}

                      >

                        {p.featuredImage ? (

                          <div style={{ aspectRatio: '16/9', overflow: 'hidden', background: t.bgMid }}>

                            <img

                              src={p.featuredImage}

                              alt=""

                              loading="lazy"

                              decoding="async"

                              style={{ width: '100%', height: '100%', objectFit: 'cover' }}

                            />

                          </div>

                        ) : null}

                        <div style={{ padding: 'clamp(20px, 3vw, 28px)', flex: 1, display: 'flex', flexDirection: 'column' }}>

                          <div style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 14, fontWeight: 500, color: t.a2, marginBottom: 10 }}>{cat}</div>

                          <h2 style={{ fontFamily: "'Funnel Display', sans-serif", fontWeight: 300, fontSize: 'clamp(20px, 2.5vw, 26px)', color: t.fg, lineHeight: 1.2, margin: '0 0 12px' }}>{p.title}</h2>

                          <p style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 16, color: t.fg2, lineHeight: 1.6, margin: '0 0 16px', flex: 1 }}>{p.excerpt}</p>

                          <div style={{ fontFamily: "'Rethink Sans', sans-serif", fontSize: 14, color: t.fg3 }}>

                            {formatDate(p.date)}

                            {p.readingTime ? ' \u00b7 ' + p.readingTime : ''}

                          </div>

                        </div>

                      </article>

                    );

                  })}

                </div>

              </>

            )}

          </div>

        </section>



        <DsServiceCta

          heading={dsHighlight('Like our thinking? Let\u2019s put it to work.', 'to work', t.hl)}

          buttonLabel="Get in touch"

          onNavigate={onNavigate}

        />

      </div>

    );

  },

});