const ITEMS = [
  { num: "01", name: "Real Estate", desc: "Market briefs & listings, without leaking client data" },
  { num: "02", name: "Financial Advisors", desc: "Portfolio summaries that stay compliant & reviewed" },
  { num: "03", name: "Fractional C-Suite", desc: "Board updates & plans with real escalation paths" },
  { num: "04", name: "Higher Education", desc: "Course & research workflows with academic integrity" },
  { num: "05", name: "Communities", desc: "Moderation & programming that respects members" },
  { num: "06", name: "Technology", desc: "Agent patterns, evals & the responsible defaults" },
];

export default function Contents() {
  return (
    <section className="section contents" id="contents">
      <div className="wrap">
        <span className="spec reveal">The founding library</span>
        <h2 className="reveal">Six practices, written by people who built their careers on them.</h2>
        <div className="toc reveal">
          {ITEMS.map((x) => (
            <a href="#get" key={x.num}>
              <span className="num">{x.num}</span>
              <span className="name">{x.name}</span>
              <span className="desc">{x.desc}</span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}