/* global React */
const COMPETITORS = [
  { name: "Axon", tag: "Switch from", note: "Legacy on-prem" },
  { name: "TransPlus", tag: "Switch from", note: "Heavy, old UI" },
  { name: "Truckbase", tag: "Switch from", note: "Anti-WhatsApp" },
  { name: "Tailwind", tag: "Switch from", note: "US-first" },
  { name: "Avaal Express", tag: "Switch from", note: "GTA competitor" },
  { name: "Rose Rocket", tag: "Switch from", note: "Broker-centric" },
  { name: "Aiksphere", tag: "Switch from", note: "Regional" },
  { name: "ITS Dispatch", tag: "Switch from", note: "Carrier-lite" },
];

function SwitchFrom() {
  return (
    <section className="section" id="switch">
      <div className="switch-from">
        <div className="switch-from__head">
          <div>
            <div className="section__num">07</div>
            <span className="eyebrow" style={{ color: "var(--blue-2)" }}>Migration — done for you</span>
            <h2 className="display h2" style={{ marginTop: "1rem" }}>Already on something else? We'll move you in a weekend.</h2>
          </div>
          <p style={{ color: "var(--muted)", maxWidth: "34ch" }}>Side-by-side comparisons, data migration scripts, and a Canadian team that's done this before.</p>
        </div>
        <div className="switch-from__grid">
          {COMPETITORS.map((c, i) => (
            <a key={i} href="#" className="switch-card" onClick={(e) => e.preventDefault()}>
              <div className="tag">{c.tag}</div>
              <div className="name">{c.name}</div>
              <div style={{ fontSize: "0.8rem", color: "var(--muted)" }}>{c.note}</div>
              <div className="arrow">→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SwitchFrom });