// ═══════════════════════════════════════════════════════════
// Leftshifted - News & Insights Pages
// ═══════════════════════════════════════════════════════════

const articlesData = [
  {
    slug: 'choosing-first-ai-use-case',
    title: 'How to choose your first AI use-case without setting fire to a budget.',
    date: '06 May 2026', read: '4 min read', category: 'AI Strategy',
    bg: 'var(--ls-ultramarine-blue)',
    intro: 'Most organisations pick their first AI use-case the wrong way. They start with what\'s technically exciting rather than what\'s commercially valuable. Here\'s how to avoid that trap.',
    body: [
      'The conversation usually starts the same way. A senior leader reads about AI, attends a conference, or gets pressure from the board. They come back and ask the data team to "do something with AI." The team picks the most interesting technical challenge - natural language processing, computer vision, a complex recommendation engine - and six months later, there\'s a demo that nobody uses.',
      'The problem isn\'t the technology. It\'s the selection criteria. The best first AI use-case isn\'t the most impressive one. It\'s the one that pays for itself fastest.',
      'We recommend starting with three questions: Where are we losing money today? Where are decisions being made on gut feel instead of data? Where would a 10% improvement in accuracy have the biggest commercial impact?',
      'The answers to these questions usually point to something unglamorous - demand forecasting, pricing optimisation, churn prediction, fraud detection. These aren\'t the use-cases that win innovation awards. But they\'re the ones that fund everything else.',
    ],
  },
  {
    slug: 'durable-data',
    title: '"Durable" data: what we mean, and why it matters more than your stack.',
    date: '21 Apr 2026', read: '6 min read', category: 'Data Strategy',
    bg: 'var(--ls-midnight-navy)',
    intro: 'We use the word "durable" a lot at Leftshifted. It\'s not a buzzword - it\'s a design principle. Here\'s what it means in practice.',
    body: [
      'Every data team we\'ve worked with has inherited something fragile. A pipeline that breaks when a source schema changes. A dashboard that nobody trusts because the numbers don\'t match finance. A model that was trained once, deployed, and never monitored.',
      'Fragile data infrastructure doesn\'t just waste money - it destroys trust. And once a leadership team stops trusting the data, every conversation becomes political rather than analytical.',
      'Durable data is data infrastructure built to last. It means pipelines that handle schema drift gracefully. Dashboards that reconcile to source systems automatically. Models that are monitored, retrained, and versioned.',
      'It also means documentation that exists, governance that\'s proportionate, and a team that understands what they\'ve built. When we leave, the lights stay on.',
    ],
  },
  {
    slug: 'honest-data-assessment',
    title: 'An honest assessment of your data, in two weeks.',
    date: '02 Apr 2026', read: '3 min read', category: 'Discovery',
    bg: 'var(--ls-blue-10)',
    intro: 'Most organisations don\'t need a six-month data strategy. They need someone to tell them the truth about where they are - quickly, clearly, and without an agenda.',
    body: [
      'We created our Discovery service because we kept meeting leaders who\'d been told different things by different vendors. One said they needed a data lake. Another said they needed a CDP. A third said they needed to hire a Chief Data Officer.',
      'The truth was usually simpler. They had good data in bad places, reasonable people doing unreasonable workarounds, and no clear picture of what "good" looked like for their organisation.',
      'Discovery takes two weeks. We interview key stakeholders, audit your data estate, and deliver a clear, jargon-free report that tells you: where you are, what\'s possible, and what to do first.',
      'It\'s not a sales exercise. Sometimes the honest answer is "you don\'t need us." We\'d rather tell you that upfront than sell you a project you don\'t need.',
    ],
  },
  {
    slug: 'data-team-hiring',
    title: 'Why your first data hire shouldn\'t be a data scientist.',
    date: '18 Mar 2026', read: '5 min read', category: 'Team Building',
    bg: 'var(--ls-ultramarine-blue)',
    intro: 'The most common mistake in building a data team is hiring for the role you think you need rather than the role that will actually move things forward.',
    body: [
      'When organisations decide to "invest in data," the first job spec they write is usually for a data scientist. It makes sense on paper - data science is where the value is, right?',
      'Not exactly. A data scientist without clean data, reliable pipelines, and clear business questions is an expensive person waiting for infrastructure to exist.',
      'Your first data hire should be someone who can do three things: understand the business, wrangle messy data, and communicate findings to non-technical stakeholders. That\'s usually a senior analytics engineer or a data analyst with engineering skills.',
      'Once the foundations are in place - clean data, trusted dashboards, a culture of data-informed decisions - then hire the data scientist. They\'ll be productive from day one instead of spending six months cleaning spreadsheets.',
    ],
  },
];

const NewsPage = () => {
  return (
    <PageShell current="/news">
      <Section style={{ paddingTop: 80, paddingBottom: 40, textAlign: 'center' }}>
        <Eyebrow>News &amp; insights</Eyebrow>
        <h1 style={{
          font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)',
          marginTop: 20, textWrap: 'balance',
        }}>
          Things we've been thinking about
        </h1>
        <p style={{ font: 'var(--type-body-lg)', color: 'var(--fg-muted)', marginTop: 16 }}>
          Practical perspectives on data, AI, and building things that last.
        </p>
      </Section>

      <Section style={{ paddingTop: 0, paddingBottom: 100 }}>
        <div className="news-grid">
          {articlesData.map((article, i) => (
            <article key={article.slug} className="insight-card" onClick={() => navigate(`/news/${article.slug}`)} style={{ cursor: 'pointer' }}>
              <div className="insight-card__img" style={{ background: article.bg }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  mask: `url("${res('assets/brand/Union.svg')}") center / auto 180% no-repeat`,
                  WebkitMask: `url("${res('assets/brand/Union.svg')}") center / auto 180% no-repeat`,
                  background: article.bg === 'var(--ls-blue-10)' ? 'rgba(28,90,249,.25)' : 'rgba(255,255,255,.16)',
                }}></div>
              </div>
              <div className="insight-card__meta">
                <div className="insight-card__row">
                  <span>{article.date}</span><span>{article.read}</span>
                </div>
                <h4>{article.title}</h4>
                <span style={{ font: 'var(--type-caption)', color: 'var(--ls-ultramarine-blue)', marginTop: 'auto' }}>
                  {article.category}
                </span>
              </div>
            </article>
          ))}
        </div>
      </Section>
    </PageShell>
  );
};

// ── Individual Article ──────────────────────────────────
const ArticlePage = ({ slug }) => {
  const article = articlesData.find(a => a.slug === slug) || articlesData[0];
  const others = articlesData.filter(a => a.slug !== slug).slice(0, 3);

  return (
    <PageShell current="/news">
      {/* Hero */}
      <div className="article-hero" style={{ background: article.bg }}>
        <UnionOverlay opacity={0.08} />
        <div className="page-wrap" style={{ position: 'relative', zIndex: 1 }}>
          <a onClick={() => navigate('/news')} style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', color: 'rgba(255,255,255,.6)', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 24, cursor: 'pointer' }}>
            ← Back to insights
          </a>
          <div style={{ display: 'flex', gap: 16, marginBottom: 20, font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', color: 'rgba(255,255,255,.6)', textTransform: 'uppercase' }}>
            <span>{article.date}</span>
            <span>·</span>
            <span>{article.read}</span>
            <span>·</span>
            <span>{article.category}</span>
          </div>
          <h1 style={{
            font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)',
            color: article.bg === 'var(--ls-blue-10)' ? 'var(--fg-default)' : '#fff',
            maxWidth: 800, textWrap: 'balance',
          }}>
            {article.title}
          </h1>
        </div>
      </div>

      {/* Body */}
      <Section style={{ paddingTop: 60, paddingBottom: 80 }}>
        <div className="article-body">
          <p className="article-intro">{article.intro}</p>
          {article.body.map((para, i) => (
            <p key={i} className="article-para">{para}</p>
          ))}
        </div>
      </Section>

      {/* More articles */}
      <Section style={{ paddingTop: 0, paddingBottom: 100 }}>
        <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 60 }}>
          <h3 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-h)', marginBottom: 32 }}>
            More insights
          </h3>
          <div className="home-insights">
            {others.map(a => (
              <article key={a.slug} className="insight-card" onClick={() => navigate(`/news/${a.slug}`)} style={{ cursor: 'pointer' }}>
                <div className="insight-card__img" style={{ background: a.bg }}>
                  <div style={{
                    position: 'absolute', inset: 0,
                    mask: `url("${res('assets/brand/Union.svg')}") center / auto 180% no-repeat`,
                    WebkitMask: `url("${res('assets/brand/Union.svg')}") center / auto 180% no-repeat`,
                    background: a.bg === 'var(--ls-blue-10)' ? 'rgba(28,90,249,.25)' : 'rgba(255,255,255,.16)',
                  }}></div>
                </div>
                <div className="insight-card__meta">
                  <div className="insight-card__row"><span>{a.date}</span><span>{a.read}</span></div>
                  <h4>{a.title}</h4>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Section>
    </PageShell>
  );
};

Object.assign(window, { NewsPage, ArticlePage, articlesData });
