/* Professor's Transport Contact page */

function PageContact() {
 return (
 <PageShell current="contact">
 <PageHero
 crumb={<span>Contact</span>}
 eyebrow="Talk to dispatch"
 title="A real planner answers *within 2 hours.*"
 lede="Two Ontario offices, one 24/7 dispatch desk, and one bilingual phone number. We never say no."
 meta={[
 ["Dispatch", "+14375351330"],
 ["Email", "dispatch@professorstransport.com"],
 ["Hours", "24/7 live"],
 ["Languages", "EN / FR"],
 ]}
 />

 <section className="section">
 <div className="container">
 <SectionHead
 num="01 / Offices"
 title="Two locations. *Same* dispatch desk."
 lede="Either office can quote, dispatch, and run a load. The number you call goes to the same team."
 />
 <div className="offices-grid" style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:32}}>
 <div className="office">
 <span className="office__badge">Head office</span>
 <h3 className="office__city">Etobicoke, Ontario</h3>
 <p className="office__addr">Head office<br/>Etobicoke, ON</p>
 <dl className="office__rows">
 <dt>Phone</dt><dd>+14375351330</dd>
 <dt>Email</dt><dd>dispatch@professorstransport.com</dd>
 <dt>Dispatch</dt><dd>24/7 live</dd>
 </dl>
 </div>
 <div className="office">
 <span className="office__badge" style={{background:"var(--accent)", color:"var(--accent-ink)"}}>Branch office</span>
 <h3 className="office__city">Brampton, Ontario</h3>
 <p className="office__addr">Branch office<br/>Brampton, ON</p>
 <dl className="office__rows">
 <dt>Phone</dt><dd>+14375351330</dd>
 <dt>Email</dt><dd>dispatch@professorstransport.com</dd>
 <dt>Dispatch</dt><dd>24/7 live</dd>
 </dl>
 </div>
 <div className="office">
 <span className="office__badge" style={{background:"var(--ink-2)", color:"var(--surface)"}}>Yard</span>
 <h3 className="office__city">Mississauga, Ontario</h3>
 <p className="office__addr">2705 Slough Street<br/>Mississauga, ON</p>
 <dl className="office__rows">
 <dt>Phone</dt><dd>+14375351330</dd>
 <dt>Use</dt><dd>Trailer drop & pickup</dd>
 <dt>Access</dt><dd>Secured yard</dd>
 </dl>
 </div>
 </div>
 </div>
 </section>

 <QuoteForm />

 <section className="section" style={{background:"var(--surface-2)"}}>
 <div className="container">
 <SectionHead
 num="03 / Certifications"
 title="Every certification, *visible.*"
 lede="The acronyms that matter when your freight has to cross a border or pass an audit. We carry all of them."
 />
 <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:16}}>
 {[
 ["C-TPAT", "US trusted-trader supply chain security"],
 ["PIP", "Partners in Protection Canadian counterpart"],
 ["FAST", "Free and Secure Trade expedited crossing"],
 ["CSA", "Customs Self-Assessment program"],
 ["ACE", "Automated Commercial Environment (US)"],
 ["ACI", "Advanced Commercial Information (Canada)"],
 ["HAZMAT / TDG", "Hazardous goods transport authority"],
 ["SmartWay", "EPA fuel-efficient carrier"],
 ].map(([k,v]) => (
 <div key={k} style={{background:"var(--surface)", border:"1px solid var(--border)", borderRadius:"var(--radius)", padding:"20px 22px"}}>
 <div style={{fontFamily:"var(--font-mono)", fontSize:13, fontWeight:500, letterSpacing:"0.04em", color:"var(--ink)", marginBottom:6}}>{k}</div>
 <div style={{fontSize:12, color:"var(--muted)", lineHeight:1.5}}>{v}</div>
 </div>
 ))}
 </div>
 </div>
 </section>

 <CTABanner
 title="Already have an account?"
 lede="Sign in to the shipper portal for live tracking, document downloads, and rate confirmations."
 primary={{ label: "Sign in to portal", href: "#" }}
 secondary={{ label: "Track a shipment", href: "#" }}
 />
 </PageShell>
 );
}

Object.assign(window, { PageContact });