/* CX Defense — Insights index. Pulls real articles from window.ARTICLES
   (defined in articles.jsx, loaded before this file). */
const { Nav, Rule, PageHero, CTA, Footer } = window;

function App() {
  const ARTICLES = window.ARTICLES;
  const ORDER = window.ARTICLE_ORDER;
  const featId = ORDER[0];
  const feat = ARTICLES[featId];
  const rest = ORDER.slice(1);

  return (
    <div className="site">
      <Nav active="insights.html" />
      <PageHero label="Insights" title="Notes from the <em>practice</em>">
        What we learn building and defending real infrastructure — grounded in current threat reporting, written plainly, and tied to the work we actually do.
      </PageHero>
      <Rule />
      <section className="section">
        <a className="post-featured" href={'insight-' + featId + '.html'}>
          <div className="pf-img" style={{ backgroundImage: `url(${feat.img})` }}></div>
          <div className="pf-body">
            <div className="post-meta">{feat.kind} · {feat.date} · {feat.read}</div>
            <h3 dangerouslySetInnerHTML={{ __html: feat.title }}></h3>
            <p>{feat.dek}</p>
            <div className="post-foot">Read the analysis →</div>
          </div>
        </a>
        <div className="post-grid">
          {rest.map(id => {
            const a = ARTICLES[id];
            return (
              <a className="post" href={'insight-' + id + '.html'} key={id}>
                <div className="post-meta">{a.kind} · {a.date}</div>
                <h3 dangerouslySetInnerHTML={{ __html: a.title }}></h3>
                <p>{a.dek}</p>
                <div className="post-foot">{a.read} →</div>
              </a>
            );
          })}
        </div>
        <p style={{ textAlign: 'center', marginTop: 40, fontSize: 12, color: 'var(--text-faint)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
          New field notes are published as the work allows. Write to us if you'd like them by email.
        </p>
      </section>
      <Rule />
      <CTA title="Have a question the essays don't <em>answer?</em>"
        actions={<a href="contact.html" className="btn btn-primary">Speak With Us</a>}>
        The fastest way to get a real answer is to ask the engineers directly.
      </CTA>
      <Footer />
    </div>
  );
}

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