/* global React */
const FEATURES = [
  { n: "01", name: "Dispatch", glyph: "→", desc: "Drag-and-drop board. WhatsApp-native assignment. Exceptions before you ask." },
  { n: "02", name: "Invoicing", glyph: "$", desc: "Auto-built from the load. QuickBooks sync in CAD. Detention billed without arguing." },
  { n: "03", name: "Settlement", glyph: "¤", desc: "Driver pay on load close. Deductions, advances, bonuses — all in the settlement." },
  { n: "04", name: "Tracking", glyph: "◎", desc: "ELD, phone GPS, or WhatsApp live-location. Customers see a clean link, not a login." },
  { n: "05", name: "Customer Portal", glyph: "◧", desc: "Shippers book, watch and pay from one URL. Branded. No onboarding required." },
  { n: "06", name: "ELD / HOS", glyph: "◷", desc: "Plug into Geotab, Samsara, Motive, ISAAC. HOS Canada-aware out of the box." },
  { n: "07", name: "BI / Analytics", glyph: "◆", desc: "Lane profitability, driver P&L, detention leakage. Canadian units. Boardroom ready." },
  { n: "08", name: "AI Copilot", glyph: "✴", desc: "Match loads to drivers. Predict late pickups. Write the customer email before you do." },
];

function Features() {
  return (
    <section className="section" id="features">
      <div className="section__top">
        <div className="section__num">03</div>
        <div className="section__label">
          <span className="eyebrow">The product · eight pillars</span>
          <h2 className="display h2">Everything a TMS should be. Nothing it shouldn't.</h2>
        </div>
      </div>
      <div className="features">
        {FEATURES.map((f, i) => (
          <Reveal as="a" href="#" onClick={(e) => e.preventDefault()} key={i} className="feature" delay={i * 40}>
            <div className="feature__num">{f.n}</div>
            <div className="feature__glyph">{f.glyph}</div>
            <div>
              <div className="feature__name">{f.name}</div>
              <div className="feature__desc">{f.desc}</div>
            </div>
            <svg className="feature__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M7 17 L17 7 M8 7 h9 v9" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Features });