/* Professor's Transport Careers page */

function PageCareers() {
 const [applyFor, setApplyFor] = React.useState(null);
 const paths = [
 {
 tag: "Company Driver",
 h: "Etobicoke & Brampton, ON",
 body: "Steady miles, late-model trucks, weekly settlements. Run reset on home weekends. Local, regional and long-haul boards available.",
 points: [
 "Competitive mileage pay",
 "Newer, well-maintained tractors",
 "Pet & rider friendly",
 "Two years verifiable experience required",
 ],
 cta: "Apply Company Driver",
 },
 {
 tag: "Lease Purchase",
 h: "Own your truck in 36 months",
 body: "A no-money-down path to ownership. Flexible terms, walk-away clause, and our freight book to keep you running. Best for veteran drivers ready to operate.",
 points: [
 "Zero down, no credit minimum",
 "36-month flexible term",
 "Walk-away clause no penalty",
 "Maintenance program included",
 "Industry-leading fuel program",
 "We provide the freight",
 ],
 cta: "Apply Lease Purchase",
 },
 {
 tag: "Owner Operator",
 h: "Plate with Professor's",
 body: "Bring your truck. We bring the freight, the lanes, the fuel program and the back-office. Run your business, we'll keep the trailer full.",
 points: [
 "Industry-leading percentage",
 "Fuel program & discount network",
 "Full back-office support",
 "Permit & plate assistance",
 "Owner-operator only freight desk",
 ],
 cta: "Apply Owner Operator",
 },
 {
 tag: "Corporate",
 h: "Office & dispatch roles",
 body: "Planners, safety, accounting, sales, customs and cross-border specialists. Hybrid schedule available out of the Etobicoke head office.",
 points: [
 "Dispatch & planning",
 "Safety & compliance",
 "Cross-border / customs",
 "Accounting & finance",
 "Sales & account management",
 "IT & systems",
 ],
 cta: "View open roles",
 },
 ];

 return (
 <PageShell current="careers">
 <PageHero
 crumb={<span>Careers</span>}
 eyebrow="Drive for Professor's"
 title="Three ways *in* behind the wheel, one in the office."
 lede="We're hiring company drivers, lease-purchase candidates, owner-operators and corporate staff out of our Etobicoke and Brampton, Ontario terminals."
 meta={[
 ["Driver paths", "3"],
 ["Office roles", "Open"],
 ["Home terminals", "Etobicoke + Brampton"],
 ["Class 1/A required", "All driver paths"],
 ]}
 />

 <section className="section">
 <div className="container">
 <SectionHead
 num="01 / Career paths"
 title="Pick the way *in* that fits."
 lede="Four distinct paths. Pay, terms, and equipment differ the one constant is that you're working with a Canadian asset-based carrier that knows how to keep drivers running."
 />
 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}} className="paths-grid">
 {paths.map((p,i) => (
 <div className="path" key={i}>
 <span className="path__tag">{p.tag}</span>
 <h3 className="path__h">{renderHeadline(p.h)}</h3>
 <p className="path__body">{p.body}</p>
 <ul className="path__list">
 {p.points.map((pt,j) => <li key={j}>{pt}</li>)}
 </ul>
 <div className="path__cta">
 <button type="button" className="btn btn--primary" onClick={() => setApplyFor(p.tag === "Corporate" ? "Corporate" : p.tag)}>{p.cta} <Icon.arrow /></button>
 </div>
 </div>
 ))}
 </div>
 </div>
 </section>

 <section className="section" style={{background:"var(--surface-2)"}}>
 <div className="container">
 <SectionHead
 num="02 / Why drivers stay"
 title="Why drivers *stay* on the seat."
 lede="A few of the reasons drivers tell us they stick around, in their own words."
 />
 <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:1, background:"var(--border)", border:"1px solid var(--border)", borderRadius:"var(--radius-lg)", overflow:"hidden"}}>
 {[
 { n: "01", h: "Dispatch picks up.", p: "Real planners, 24/7. When you're stuck at a yard at 3 a.m., someone answers the phone." },
 { n: "02", h: "Home time you can plan.", p: "Predictable rotation. Bid your home weekends in advance and we'll honour the bid." },
 { n: "03", h: "Equipment that runs.", p: "A modern, well-maintained fleet. Maintenance is preventative, not reactive." },
 { n: "04", h: "Weekly settlements.", p: "Direct deposit Fridays. No detention games. Layover, breakdown and reset pay built in." },
 { n: "05", h: "No micromanaging.", p: "Trip planning is yours. We tell you the appointment, you tell us the route." },
 { n: "06", h: "Two yards, one team.", p: "Etobicoke and Brampton dispatchers know each other. Cross-deployment is seamless." },
 ].map(r => (
 <div key={r.n} style={{background:"var(--surface)", padding:"32px 28px", display:"flex", flexDirection:"column", gap:8}}>
 <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em", color:"var(--muted)"}}>{r.n}</div>
 <h3 className="h-card" style={{fontSize:18, lineHeight:1.2}}>{r.h}</h3>
 <p style={{margin:0, fontSize:14, color:"var(--ink-2)", lineHeight:1.5}}>{r.p}</p>
 </div>
 ))}
 </div>
 </div>
 </section>

 <CTABanner
 title="Ready to *drive* for Professor's?"
 lede="Send us your CVOR abstract and a recent paystub. We'll have a recruiter call within 24 hours. Class 1/A and two years verifiable experience required for all driver paths."
 primary={{ label: "Start an application", onClick: () => setApplyFor("Company Driver") }}
 secondary={{ label: "Call recruiting", href: "tel:+14375351330" }}
 />

 <ApplyModal open={!!applyFor} position={applyFor || "Company Driver"} onClose={() => setApplyFor(null)} />
 </PageShell>);
}

Object.assign(window, { PageCareers });