/* Professor's Transport — About page */

function PageAbout() {
  const team = [
    {
      initials: "R",
      img: "images/team-raj.png",
      name: "Raj",
      role: "Dispatch Manager",
      bio: "Keeps the fleet moving and the phone answered. Raj plans lanes, solves problems on the road, and is the voice most customers know.",
    },
    {
      initials: "JS",
      img: "images/team-jasmeet.png",
      name: "Jasmeet Singh",
      role: "Automation Specialist",
      bio: "Builds the systems behind the scenes tracking, telematics, fuel management and the tools that keep dispatch fast and shippers informed.",
    },
  ];

  return (
    <PageShell current="about">
      <PageHero
        crumb={<span>About</span>}
        eyebrow="About Professor's Transport"
        title="A Canadian carrier built on *people and algorithms.*"
        lede="We're a family-run, asset-based carrier moving heavy freight across Canada and into the US lower 48. Owned trucks, real drivers, and a dispatch desk that picks up the phone."
        meta={[
          ["Type", "Asset-based carrier"],
          ["Based", "Etobicoke + Brampton, ON"],
          ["Reach", "Canada + US 48"],
          ["Dispatch", "24/7 live"],
        ]}
      />

      <section className="section">
        <div className="container">
          <div className="sec-head" style={{ marginBottom: 40 }}>
            <div>
              <div className="sec-head__num">The team</div>
              <h2 className="h-section">The people <em>behind the wheel.</em></h2>
            </div>
            <p className="sec-head__lead">
              A small, accountable team means the person you talk to is the person who gets it done.
              Here are two of the people keeping your freight on schedule.
            </p>
          </div>

          <div className="team-grid">
            {team.map((m, i) =>
            <article className="team-card" key={i}>
                <div className="team-card__avatar">
                  {m.img ? <img src={m.img} alt={m.name} /> : m.initials}
                </div>
                <div className="team-card__body">
                  <div className="team-card__role">{m.role}</div>
                  <h3 className="team-card__name">{m.name}</h3>
                  <p className="team-card__bio">{m.bio}</p>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>

      <CTABanner
        title="Want to talk to a *real* person?"
        lede="No phone trees, no brokers. Reach our dispatch desk directly, any hour."
        primary={{ label: "Contact us", href: "contact.html" }}
        secondary={{ label: "View services", href: "services.html" }}
      />
    </PageShell>);
}

Object.assign(window, { PageAbout });