/* ---------------- INSIGHTS ---------------- */

const ARTICLES = [
  { tag: 'DEI', date: 'April 2021', t: 'What is Diversity, Equity & Inclusion (DEI) Anyway?', d: 'The greatest challenge to any change is resistance - unpacking the misconceptions behind executive resistance to DEI.', href: 'what-is-dei-anyway.html' },
  { tag: 'DEI', date: 'May 2021', t: 'The Business Case for Diversity, Equity & Inclusion', d: 'Data tells, stories sell: why embracing DEI strategies strengthens performance, innovation, and the bottom line.', href: 'business-case-for-dei.html' },
  { tag: 'Change', date: 'On LinkedIn', t: 'Pandemics & Protests: A Portal for Change', d: 'Reflections on a moment of upheaval - and the opening it created for lasting organizational change.', href: 'https://www.linkedin.com/pulse/pandemics-protests-portal-change-rachel-rudo-munyaradzi/', ext: true },
];

function PageHero() {
  return (
    <header className="page-hero">
      <div className="wrap">
        <div className="ph-inner reveal">
          <div className="breadcrumb"><a href="index.html">Home</a><span className="sep">/</span><span>Insights</span></div>
          <h1>Perspectives on people, performance &amp; <em>change.</em></h1>
          <p className="lede">Writing and reflections from two decades inside the work - on culture, leadership, inclusion, and the art of guiding organizations through change.</p>
        </div>
      </div>
    </header>
  );
}

function Grid() {
  return (
    <section className="block" style={{ paddingTop: 44 }}>
      <div className="wrap">
        <div className="ins-grid">
          {ARTICLES.map((a) => (
            <a className="ins reveal" key={a.t} href={a.href} target={a.ext ? '_blank' : undefined} rel={a.ext ? 'noopener noreferrer' : undefined}>
              <div className="thumb"><span className="tag">{a.tag}</span></div>
              <div className="body">
                <div className="ins-date">{a.date}</div>
                <h3>{a.t}</h3>
                <p>{a.d}</p>
                <span className="read">{a.ext ? 'Read on LinkedIn' : 'Read article'} <span className="btn-arrow">{I.arrow}</span></span>
              </div>
            </a>
          ))}
        </div>
        <div className="reveal" style={{ marginTop: 48, padding: '36px 40px', background: 'var(--paper-2)', border: '1px solid var(--line)', borderRadius: 'var(--radius)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18 }}>
          <div style={{ maxWidth: '52ch' }}>
            <h3 style={{ fontSize: 24 }}>More on LinkedIn.</h3>
            <p style={{ color: 'var(--ink-2)', fontSize: 16, marginTop: 8 }}>We share thinking on people strategy, leadership, and change throughout the year. Follow along, or subscribe below to get the occasional note by email.</p>
          </div>
          <a className="btn btn-primary" href="https://www.linkedin.com/in/rachel-r-munyaradzi/" target="_blank" rel="noopener noreferrer">Follow on LinkedIn {I.arrow}</a>
        </div>
      </div>
    </section>
  );
}

function InsightsPage() {
  return (
    <PageShell current="insights">
      <PageHero />
      <Grid />
      <CtaBand heading={'Turn insight into <em>action.</em>'} body="Reading is a start. When you’re ready to act on it, we’re here to help you build the plan." />
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<InsightsPage />);