const AUTHORS = [
  { tile: "RE", name: "Real Estate & Finance", role: "Market briefs, compliant summaries", status: "confirmed", label: "Co-author confirmed" },
  { tile: "CS", name: "Fractional C-Suite", role: "Strategy & board workflows", status: "confirmed", label: "Co-author confirmed" },
  { tile: "TE", name: "Technology & RAAI", role: "Agent patterns & safe defaults", status: "confirmed", label: "Co-author confirmed" },
  { tile: "HE", name: "Higher Education", role: "Teaching & research integrity", status: "tba", label: "To be announced" },
  { tile: "CO", name: "Communities", role: "Moderation & member programs", status: "tba", label: "To be announced" },
];

export default function Authors() {
  return (
    <section className="section authors" id="authors">
      <div className="wrap">
        <span className="spec reveal">Who’s writing this</span>
        <h2 className="reveal">Practitioners, one per vertical.</h2>
        <p className="lede reveal">
          Each chapter is owned by someone who does that work for a living. Names go up as
          co-authors confirm.
        </p>
        <div className="auth-grid">
          {AUTHORS.map((a) => (
            <div className="auth reveal" key={a.tile}>
              <div className="mono-tile">{a.tile}</div>
              <h3>{a.name}</h3>
              <div className="role">{a.role}</div>
              <div className={`status ${a.status}`}>
                <i></i>
                {a.label}
              </div>
            </div>
          ))}
          <div className="auth auth-join reveal">
            <div>
              <div className="spec" style={{ marginBottom: "8px" }}>Your name?</div>
              <p>Contribute a workflow after launch and earn a byline in the guide.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}