/* Professor's Transport additional sections: Warehousing, Testimonials, News, Rentals */

function FleetShowcase() {
  const fleet = [
  { unit: "3002", img: "images/truck-3002.png" },
  { unit: "3003", img: "images/truck-3003.png" },
  { unit: "3006", img: "images/truck-3006.png" },
  { unit: "3007", img: "images/truck-3007.png" }];

  return (
    <section className="section fleet" id="fleet">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num"></div>
 <h2 className="h-section">A modern fleet, <span className="hl-accent">always growing.</span></h2>
 </div>
 <p className="sec-head__lead">Every truck on a Professor's bill of lading is on a Professor's truck. Owned, maintained and continuously upgraded four units shown from across fleet.


          </p>
 </div>

 <div className="fleet__grid">
 {fleet.map((t) =>
          <article className="fleet__card" key={t.unit}>
 <img src={t.img} alt={`Professor's Transport unit ${t.unit}`} loading="lazy" />
 </article>
          )}
 </div>
 </div>
 </section>);

}

function Warehousing() {
  const services = [
  { n: "01", title: "Cross-docking", body: "Inbound trailers unloaded and reloaded for outbound the same day. Minimal storage, maximum velocity." },
  { n: "02", title: "Container destuffing", body: "Sea-container destuffing, sorting and palletizing for inland distribution." },
  { n: "03", title: "Order picking", body: "Single-piece, case and full-pallet picking. Accuracy-rated and barcode-verified." },
  { n: "04", title: "Storage", body: "Secure short- and long-term storage. Ambient, climate-controlled and bonded space available." },
  { n: "05", title: "Inventory management", body: "Real-time visibility through the shipper portal. Cycle counts and replenishment alerts." },
  { n: "06", title: "Distribution services", body: "Outbound fulfillment to retail, e-commerce and DC networks across Canada and the US." }];

  return (
    <section className="section wh" id="warehousing">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num">03 / Warehousing</div>
 <h2 className="h-section">Warehousing & <em>fulfillment</em>, under the same roof.</h2>
 </div>
 <p className="sec-head__lead">
 Six warehousing services that integrate directly with our trucking so the
 handoff from dock to trailer to door is one team, one system, one bill of lading.
 </p>
 </div>
 <div className="wh__grid">
 {services.map((s) =>
          <article className="wh__item" key={s.n}>
 <div className="wh__num">{s.n}</div>
 <h3>{s.title}</h3>
 <p>{s.body}</p>
 </article>
          )}
 </div>

 <div className="wh__rentals">
 <div className="wh__rentals__head">
 <div className="sec-head__num">+ Rentals</div>
 <h3 className="h-card">Don't just ship rent the equipment.</h3>
 </div>
 <div className="wh__rentals__list">
 <div className="wh__rental">
 <strong>Flatbed rentals</strong>
 <span>53′ flatbeds & step decks for daily, weekly or monthly use.</span>
 </div>
 <div className="wh__rental">
 <strong>Dry van rentals</strong>
 <span>Late-model 53′ dry vans with FSMA-compliant interiors.</span>
 </div>
 <div className="wh__rental">
 <strong>Trailer storage</strong>
 <span>Secure on-site trailer storage at Vaughan and Moncton.</span>
 </div>
 <div className="wh__rental">
 <strong>GTA truck & trailer parking</strong>
 <span>Gated, monitored truck and trailer parking in the GTA.</span>
 </div>
 </div>
 </div>
 </div>
 </section>);

}

function Testimonials() {
  const quotes = [
  {
    body: "Professor's has been handling our outbound for more than two years and the service has been exceptionally reliable. They genuinely try to understand our business and adjust when our needs change easy to deal with, and never the friction we've had with other carriers.",
    who: "Logistics Manager",
    company: "National beverage shipper",
    tag: ""
  },
  {
    body: "Our inbound freight is high-value, temperature-controlled and hazardous. On-time delivery isn't a nice-to-have, it's the whole job. Professor's has been a valued partner and a pleasure to work with calm, accurate, and they pick up the phone.",
    who: "Transportation Planner",
    company: "Consumer goods manufacturer",
    tag: ""
  }];

  return (
    <section className="section reviews">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num"></div>
 <h2 className="h-section">Shippers who keep <em>coming back.</em></h2>
 </div>
 <p className="sec-head__lead">We work with professional partners and suppliers to ensure successful project completion these are two of them, in their own words.


 </p>
 </div>

 <div className="reviews__grid">
 {quotes.map((q, i) =>
          <figure className="review" key={i}>
 <div className="review__mark">"</div>
 <blockquote>{q.body}</blockquote>
 <figcaption>
 <div className="review__who">
 <strong>{q.who}</strong>
 <span>{q.company}</span>
 </div>
 <div className="review__tag">{q.tag}</div>
 </figcaption>
 </figure>
          )}
 </div>
 </div>
 </section>);

}

function News() {
  const posts = (window.BLOG_POSTS || []).slice(0, 3);

  return (
    <section className="section news">
 <div className="container">
 <div className="sec-head">
 <div>
 <div className="sec-head__num"></div>
 <h2 className="h-section">From the <em>dispatch desk.</em></h2>
 </div>
 <p className="sec-head__lead">Notes, guides and updates on Canadian freight, cross-border policy, equipment and careers written by the planners and drivers who do the work.


 </p>
 </div>

 <div className="news__grid">
 {posts.map((p, i) =>
          <a className="news-card" key={i} href={`post.html?post=${p.slug}`}>
 <div className="news-card__media">
 <img src={p.img} alt={p.title} className="news-card__img" loading="lazy" />
 <div className="news-card__tag">{p.tag}</div>
 </div>
 <h3>{p.title}</h3>
 <p>{p.excerpt}</p>
 <span className="news-card__link">
 Read more <Icon.arrowDiag size={14} />
 </span>
 </a>
          )}
 </div>

 <div style={{ marginTop: 32, textAlign: "center" }}>
 <a href="blog.html" className="btn btn--ghost">View blog <Icon.arrow /></a>
 </div>
 </div>
 </section>);

}

Object.assign(window, { FleetShowcase, Warehousing, Testimonials, News });