/* Professor's Transport — Blog index + single post pages */

function PageBlog() {
  const posts = window.BLOG_POSTS || [];
  const [featured, ...rest] = posts;

  return (
    <PageShell current="blog">
      <PageHero
        crumb={<span>Blog</span>}
        eyebrow="From the dispatch desk"
        title="Freight notes, *written by the people who haul it.*"
        lede="Guides on quoting and cross-border freight, plain-English industry takes, and the occasional careers note — all from the planners and drivers who do the work."
        meta={[
          ["Topics", "Freight 101 · Industry · Careers"],
          ["Updated", "Regularly"],
          ["Written by", "Our dispatch team"],
        ]}
      />

      {featured &&
      <section className="section" style={{ paddingBottom: 0 }}>
        <div className="container">
          <a className="blog-feature" href={`post.html?post=${featured.slug}`}>
            <div className="blog-feature__media">
              <img src={featured.img} alt={featured.title} loading="lazy" />
              <span className="blog-feature__tag">{featured.tag}</span>
            </div>
            <div className="blog-feature__body">
              <div className="blog-feature__label">Featured</div>
              <h2>{featured.title}</h2>
              <p>{featured.excerpt}</p>
              <div className="blog-feature__meta">
                <span>{featured.readTime}</span>
                <span className="blog-feature__cta">Read article <Icon.arrow /></span>
              </div>
            </div>
          </a>
        </div>
      </section>
      }

      <section className="section">
        <div className="container">
          <div className="sec-head" style={{ marginBottom: 40 }}>
            <div>
              <div className="sec-head__num">All articles</div>
              <h2 className="h-section">More from the <em>desk.</em></h2>
            </div>
          </div>

          <div className="news__grid">
            {rest.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>
      </section>

      <CTABanner
        title="Have a lane that needs *moving?*"
        lede="Skip the reading — tell us about your freight and a planner will come back with a firm rate."
        primary={{ label: "Get a quote", href: "contact.html" }}
        secondary={{ label: "View services", href: "services.html" }}
      />
    </PageShell>);
}

function PagePost() {
  const params = new URLSearchParams(window.location.search);
  const slug = params.get("post");
  const posts = window.BLOG_POSTS || [];
  const post = posts.find((p) => p.slug === slug) || posts[0];
  const related = posts.filter((p) => p.slug !== post.slug).slice(0, 2);

  React.useEffect(() => {
    if (post) document.title = `${post.title} — Professor's Transport`;
  }, [post]);

  if (!post) {
    return (
      <PageShell current="blog">
        <section className="section"><div className="container"><h1 className="h-section">Article not found.</h1><p className="lead"><a href="blog.html">Back to the blog →</a></p></div></section>
      </PageShell>);
  }

  return (
    <PageShell current="blog">
      <article className="post">
        <div className="container post__head">
          <nav className="phero__crumb">
            <a href="index.html">Home</a><span className="sep">/</span>
            <a href="blog.html">Blog</a><span className="sep">/</span>
            <span>{post.tag}</span>
          </nav>
          <div className="post__tag">{post.tag}</div>
          <h1 className="post__title">{post.title}</h1>
          <div className="post__meta">
            <span>Professor's Transport</span>
            <span className="dot">·</span>
            <span>{post.readTime}</span>
          </div>
        </div>

        <div className="container post__hero">
          <img src={post.img} alt={post.title} />
        </div>

        <div className="post__body container">
          {post.body.map((blk, i) => {
            if (blk.type === "h") return <h2 key={i}>{blk.text}</h2>;
            if (blk.type === "list")
              return (
                <ul key={i} className="post__list">
                  {blk.items.map((it, j) => <li key={j}>{it}</li>)}
                </ul>);
            return <p key={i}>{blk.text}</p>;
          })}

          <div className="post__share">
            <span>Share</span>
            <a href="#" aria-label="Share on LinkedIn">in</a>
            <a href="#" aria-label="Share by email">@</a>
            <a href="blog.html" className="post__back">← All articles</a>
          </div>
        </div>
      </article>

      {related.length > 0 &&
      <section className="section" style={{ background: "var(--surface-3)" }}>
        <div className="container">
          <div className="sec-head" style={{ marginBottom: 40 }}>
            <div>
              <div className="sec-head__num">Keep reading</div>
              <h2 className="h-section">Related <em>articles.</em></h2>
            </div>
          </div>
          <div className="news__grid">
            {related.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>
      </section>
      }

      <CTABanner
        title="Ready to move *real freight?*"
        lede="A real planner answers within two hours. Tell us about your lane."
        primary={{ label: "Get a quote", href: "contact.html" }}
        secondary={{ label: "Call dispatch", href: "tel:+14375351330" }}
      />
    </PageShell>);
}

Object.assign(window, { PageBlog, PagePost });