/* BlogPostPage — עמוד מאמר. התוכן מ-window.POST (מוגדר ב-head של כל קובץ פוסט);
   ה-JSON-LD המקביל (BlogPosting עם articleBody מלא + FAQPage) יושב סטטית באותו head. */
function BlogPostPage() {
  const { SectionHeader, Button, Badge, Accordion } = window.DS;
  const P = window.POST || { blocks: [], faq: [], title: '' };
  const wa = 'https://wa.me/972543312367?text=' + encodeURIComponent(P.waText || 'היי שלום, קראתי את המדריך ואשמח להצעת מחיר');
  const waIcon = <img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="16" height="16" />;

  const seg = (x) => Array.isArray(x)
    ? x.map((s, j) => (typeof s === 'string' ? s : <a key={j} href={s.href}>{s.label}</a>))
    : x;

  const renderBlock = (b, i) => {
    if (b.t === 'h2') return <h2 key={i}>{b.x}</h2>;
    if (b.t === 'h3') return <h3 key={i}>{b.x}</h3>;
    if (b.t === 'p') return <p key={i}>{seg(b.x)}</p>;
    if (b.t === 'ul') return <ul key={i}>{b.items.map((it, j) => <li key={j}>{seg(it)}</li>)}</ul>;
    if (b.t === 'ol') return <ol key={i}>{b.items.map((it, j) => <li key={j}>{seg(it)}</li>)}</ol>;
    if (b.t === 'tip') return <aside className="post-tip" key={i}><b>טיפ של שלום: </b>{seg(b.x)}</aside>;
    if (b.t === 'table') return (
      <div className="post-table-wrap" key={i}>
        <table className="post-table">
          <thead><tr>{b.head.map((h, j) => <th key={j}>{h}</th>)}</tr></thead>
          <tbody>{b.rows.map((r, j) => <tr key={j}>{r.map((c, k) => <td key={k}>{c}</td>)}</tr>)}</tbody>
        </table>
        {b.note ? <p className="post-table-note">{b.note}</p> : null}
      </div>
    );
    if (b.t === 'cta') return (
      <div className="post-cta" key={i}>
        <p>{b.x}</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Button variant="whatsapp" size="lg" href={wa} target="_blank" icon={waIcon}>שלחו תמונה בוואטסאפ</Button>
          <Button variant="primary" size="lg" href="tel:0543312367"><span dir="ltr">054-331-2367</span></Button>
        </div>
      </div>
    );
    return null;
  };

  const related = (window.BLOG_INDEX || []).filter((p) => p.file !== P.file).slice(0, 2);

  return (
    <main data-screen-label={'Blog / ' + P.title}>
      <section className="page-head">
        <div className="bg"><img src={'assets/photos/' + P.photo} alt="" fetchpriority="high" decoding="async" /></div>
        <div className="container page-head-inner">
          <nav className="crumb" aria-label="פירורי לחם"><a href="index.html">ראשי</a><span>/</span><a href="blog.html">מדריכים</a><span>/</span><span>{P.crumb}</span></nav>
          <SectionHeader as="h1" tone="dark" kicker={P.kicker} title={P.title} description={P.subtitle} />
          <p className="post-meta">מאת <b>שלום — טכנאי כספות מוסמך</b> · {P.date} · {P.mins} דקות קריאה · עוסק בכספות בלבד</p>
        </div>
      </section>

      <section className="section">
        <article className="container post-body" data-reveal>
          {P.blocks.map(renderBlock)}
        </article>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <div data-reveal><SectionHeader align="center" kicker="שקיפות מלאה" title="שאלות נפוצות" /></div>
          <div style={{ marginTop: 30 }} data-reveal><Accordion items={P.faq} /></div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="section" style={{ background: 'var(--gray-100, #F3F3F5)', paddingBlock: 'clamp(44px, 6vw, 64px)' }}>
          <div className="container">
            <div data-reveal><SectionHeader align="center" kicker="קריאה נוספת" title="עוד מדריכים" /></div>
            <div className="blog-grid" style={{ marginTop: 32 }} data-reveal>
              {related.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>
          </div>
        </section>
      )}
    </main>
  );
}
Object.assign(window, { BlogPostPage });