/* global React */
const RES = [
  { kind: "Guide · 42 pages", title: "Canadian IFTA without the quarterly scramble", meta: "For controllers · 18 min read", big: true },
  { kind: "Checklist", title: "HOS Canada vs. HOS US — the cheatsheet your drivers actually read", meta: "PDF · 2 pages" },
  { kind: "Changelog", title: "CBSA CARM R2 — what's actually changing for carriers in April 2026", meta: "Updated weekly" },
  { kind: "Playbook", title: "Detention without an argument", meta: "12 min read" },
  { kind: "Spec", title: "WhatsApp-as-TMS — our opinion, written down", meta: "Architecture doc" },
  { kind: "Calculator", title: "Do you actually need an ELD upgrade? A 5-question test", meta: "Interactive" },
];

function Resources() {
  return (
    <section className="section" id="resources">
      <div className="section__top">
        <div className="section__num">09</div>
        <div className="section__label">
          <span className="eyebrow">Canadian resources hub</span>
          <h2 className="display h2">Written for operators. Not for SEO.</h2>
        </div>
      </div>
      <div className="resources-grid">
        {RES.map((r, i) => (
          <a key={i} href="#" className={`res-card ${r.big ? "res-card--big" : ""}`} onClick={(e) => e.preventDefault()} style={r.big ? { gridRow: "span 2" } : {}}>
            <div>
              <div className="kind">{r.kind}</div>
              <h3>{r.title}</h3>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="meta">{r.meta}</span>
              <span style={{ color: "var(--blue-2)" }}>→</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Resources });