/* BlogPage — אינדקס המדריכים. הכרטיסים מ-window.BLOG_INDEX (SiteChrome). */
function BlogPage() {
  const { SectionHeader } = window.DS;
  const posts = window.BLOG_INDEX || [];
  return (
    <main data-screen-label="Blog / Index">
      <section className="page-head">
        <div className="bg"><img src="assets/photos/work-onsite.jpg" alt="" fetchpriority="high" decoding="async" /></div>
        <div className="container page-head-inner">
          <nav className="crumb" aria-label="פירורי לחם"><a href="index.html">ראשי</a><span>/</span><span>מדריכים</span></nav>
          <SectionHeader as="h1" tone="dark" kicker="המדריכים של שלום" title="מדריכי כספות — בלי קיצורי דרך"
            description="מה שלמדתי בעשר שנים של כספות בלבד: מחירים אמיתיים, דרישות החוק, ומה לעשות כשהכספת לא נפתחת." />
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="blog-grid" data-reveal>
            {posts.map((p) => (
              <a className="blog-card" key={p.file} href={p.file}>
                <span className="blog-card-photo"><img src={'assets/photos/' + p.photo} alt={p.title} loading="lazy" decoding="async" /></span>
                <span className="blog-card-body">
                  <span className="blog-card-tag">{p.tag}</span>
                  <b>{p.title}</b>
                  <p>{p.excerpt}</p>
                  <span className="blog-card-meta">{p.date} · {p.mins} דקות קריאה</span>
                </span>
              </a>
            ))}
          </div>
          <p style={{ textAlign: 'center', marginTop: 36, color: 'var(--text-muted)', fontSize: 14.5 }} data-reveal>יש שאלה שמגיע לה מדריך? <a href="contact.html" style={{ color: 'var(--maroon-700)', fontWeight: 700 }}>ספרו לי</a> — אני כותב על מה ששואלים אותי בוואטסאפ.</p>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { BlogPage });