/* From The Atelier — dark editorial blog section.
 * One featured article card linking to the full blog post page.
 * Add more entries to POSTS to grow into a list later.
 */

const POSTS = [
  {
    href: "https://the-baker-atelier-blog-post-04f08759-e8ul2ryhg-acanna.vercel.app",
    tag: "GCC Hospitality",
    date: "14 Jan 2026",
    read: "11 min read",
    title: "Best Pastry Consultants in the GCC: A Complete Guide for Hospitality Brands (2025–2026)",
    desc: "A practical field guide to commissioning pastry and bakery expertise across the Gulf — what a consultant actually delivers, how to evaluate one, and the return to expect over an engagement.",
    slotId: "blog-featured-photo",
    mark: "A",
  },
];

function Blog(){
  const post = POSTS[0];
  return (
    <section className="ml-blog" id="blog" aria-label="From the Atelier — latest insights">
      <div className="ml-blog-inner">
        <header className="ml-blog-head">
          <p className="ml-blog-eyebrow">From the Atelier</p>
          <h2 className="ml-blog-h">Latest <em>insights</em> for hospitality brands.</h2>
        </header>

        <a className="ml-blog-card" href={post.href} target="_blank" rel="noopener" aria-label={post.title}>
          <div className="ml-blog-media">
            <span className="ml-blog-tag">{post.tag}</span>
            <img className="ml-blog-cover" src="assets/blog-gcc-cover.jpg" alt="Chocolate sauce poured over choux pastry" loading="lazy" />
          </div>
          <div className="ml-blog-content">
            <div className="ml-blog-meta">{post.date}<i></i>{post.read}</div>
            <h3 className="ml-blog-title">{post.title}</h3>
            <p className="ml-blog-desc">{post.desc}</p>
            <span className="ml-blog-readmore">
              Read article
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true"><path d="M1 5h12M9 1l4 4-4 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="square"/></svg>
            </span>
          </div>
        </a>

        <div className="ml-blog-foot">
          <span className="ml-blog-foot-rule"></span>
          <span className="ml-blog-foot-label">More insights publishing through 2026</span>
        </div>
      </div>
    </section>
  );
}

window.Blog = Blog;