/* global React */
const INSIGHTS = [
  {
    date: "May 2026",
    kicker: "Field note",
    title: "The three AI ideas every owner-led firm should try first",
    desc: "Inbox triage, proposal drafts, and meeting notes. Boring on purpose — these are the ones that pay for themselves.",
  },
  {
    date: "Apr 2026",
    kicker: "Letter",
    title: "What we tell owners who don't have an AI strategy yet",
    desc: "You probably don't need one. You need three small projects and someone to run them.",
  },
  {
    date: "Mar 2026",
    kicker: "Field note",
    title: "How to evaluate an AI vendor in 30 minutes",
    desc: "Six questions, in plain language. If they can't answer them clearly, neither can their software.",
  },
];

window.InsightsList = function InsightsList() {
  return (
    <section className="insights" id="insights">
      <div className="section-inner">
        <header className="section-head">
          <EyebrowRow kicker="§ 03 — Insights" />
          <h2>Field notes from the work.</h2>
        </header>
        <ul className="insights-list">
          {INSIGHTS.map((i) => (
            <li key={i.title} className="insight">
              <div className="insight-meta">
                <Eyebrow>{i.kicker}</Eyebrow>
                <span className="insight-date">{i.date}</span>
              </div>
              <div className="insight-body">
                <h3>{i.title}</h3>
                <p>{i.desc}</p>
              </div>
              <TextLink href="#">Read</TextLink>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};