/* Blog list page — reads from CMS posts, falls back to static data */

const _cmsPosts = window.__CMS__?.posts || [];

const POSTS_DEFAULT = [
  { id:'1', tag:"מדריך",  title:"איך לבחור גודל דגל נכון לעירייה?",                  excerpt:"5 שיקולים מקצועיים שכל אגף שיווק בעירייה צריך להכיר לפני הזמנת דגלי רחוב.", date:"12 בינואר 2026",    readTime:"5",  published:true },
  { id:'2', tag:"מבזק",   title:"מתחילים את 2026: ייצור מוגבר לאירועי יום העצמאות",  excerpt:"פתיחת קווי ייצור נוספים לקראת אירועי 78 למדינת ישראל. סדרות מוגבלות.",    date:"8 בינואר 2026",     readTime:"3",  published:true },
  { id:'3', tag:"פרויקט", title:"מאחורי הקלעים: מיתוג טקס פתיחת שנה באוניברסיטת ת",excerpt:"איך הקמנו מיתוג מלא לכנס פתיחת שנה אקדמית.",                              date:"22 בדצמבר 2025",  readTime:"7",  published:true },
  { id:'4', tag:"טכני",   title:"הדפסה דיגיטלית מול הדפסת משי: מה ההבדל?",            excerpt:"מבט מעמיק על שתי השיטות, היתרונות והחסרונות של כל אחת.",                   date:"10 בדצמבר 2025",  readTime:"6",  published:true },
  { id:'5', tag:"מדריך",  title:"מחיר דגל: מה משפיע ואיך לבקש הצעה מדויקת",          excerpt:"המדריך השלם להבנת תמחור דגלים — חומרים, גדלים, גימור וזמן ייצור.",          date:"1 בדצמבר 2025",   readTime:"8",  published:true },
  { id:'6', tag:"סיפור",  title:"20 שנה לרובין: הסיפור מאחורי המפעל",                 excerpt:"התחלנו במחסן קטן בחדרה. היום אנחנו אחד המפעלים הוותיקים בתחום בארץ.",   date:"20 בנובמבר 2025", readTime:"10", published:true },
];

const VARIANTS = ['stripes','warm','','light','','weave'];
const POSTS = (_cmsPosts.length > 0 ? _cmsPosts : POSTS_DEFAULT).filter(p => p.published !== false);

function BlogPage() {
  const [mobile, setMobile] = React.useState(false);
  useReveal();
  return (
    <React.Fragment>
      <TopBar />
      <Header current="blog.html" onMobileOpen={() => setMobile(true)} />
      <MobileMenu open={mobile} onClose={() => setMobile(false)} />
      <main>
        <section className="page-hero">
          <div className="container">
            <div className="breadcrumb">
              <a href="index.html">דף הבית</a><span className="sep">›</span><span>בלוג</span>
            </div>
            <h1>בלוג ומדריכים</h1>
            <p>טיפים, מדריכים מקצועיים, סיפורי לקוחות ומאחורי הקלעים של ייצור הדגלים והמיתוג בישראל.</p>
          </div>
        </section>
        <section className="section">
          <div className="container">
            <div className="blog-grid">
              {POSTS.map((p, i) => (
                <a key={p.id||p.title} href="#" className="blog-card reveal" style={{ transitionDelay:`${i*40}ms` }}>
                  {p.image
                    ? <img src={p.image} alt={p.title} style={{ width:'100%',height:200,objectFit:'cover',borderRadius:'12px 12px 0 0' }} />
                    : <div className={"ph "+(VARIANTS[i%VARIANTS.length])} data-label={`image · post-${i+1}`} />
                  }
                  <div className="blog-meta">
                    <span className="tag">{p.tag}</span>
                    <h3>{p.title}</h3>
                    <p>{p.excerpt}</p>
                    <div className="row">
                      <span>{p.date} · {p.readTime} דק׳</span>
                      <span className="read">קריאה ‹</span>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
        <FinalCTA />
      </main>
      <Footer />
      <StickyWhatsapp />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BlogPage />);