/* global React */
const CB_TILES = [
  { code: "ACE", title: "US eManifest", desc: "Filed before you dispatch. PARS barcodes generated in-app, printed to the rate con." },
  { code: "ACI", title: "Canada eManifest", desc: "Southbound returns filed automatically on the return leg. Drivers never touch a portal." },
  { code: "PARS / PAPS", title: "Barcodes, bonded", desc: "Auto-numbered, auto-linked to the shipment, auto-sent to the broker. Gone from your todo." },
  { code: "CBSA", title: "Compliance", desc: "Trusted Trader flags, bond balances, FAST lane eligibility — in the load record, not in your email." },
];

function CrossBorder() {
  return (
    <section className="section cb" id="crossborder">
      <div className="cb__head">
        <div>
          <div className="section__num">05</div>
          <span className="eyebrow" style={{ color: "var(--blue-2)" }}>Cross-border Canada ⇄ US</span>
          <h2 className="display h2" style={{ marginTop: "1rem" }}>The border is a routing decision. Not a second platform.</h2>
        </div>
        <p className="lead" style={{ textAlign: "right" }}>Nobody else bundles eManifest into the TMS this deeply. Specialists own the portals. We own the shipment.</p>
      </div>
      <div className="cb__strip">
        {CB_TILES.map((t, i) => (
          <Reveal key={i} className="cb__tile" delay={i * 60}>
            <div className="code">{t.code}</div>
            <div>
              <h3>{t.title}</h3>
              <p style={{ marginTop: "0.5rem" }}>{t.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { CrossBorder });