/* HomePage — hero, services, about, video, clients, testimonials, FAQ, CTA band.
   הסקשנים המשותפים (וידאו, תעודות, חוגה, טופס, CTA) חיים ב-SharedSections.jsx */

function HomePage() {
  const { SectionHeader, Badge, Stat, Button, ServiceCard, Testimonial, Accordion, Input } = window.DS;

  return (
    <main id="page-home">
      {/* HERO — cinematic full-bleed photo, fading into one continuous dark canvas that carries stats/clients/form */}
      <section className="hero" data-screen-label="Home / Hero">
        <div className="hero-red">
          <div className="hero-red-inner">
            <h1 className="hero-headline" data-reveal>טכנאי כספות<br /><span className="accent">מוסמך ומקצועי.</span></h1>
            <ul className="hero-checklist" data-reveal data-reveal-delay=".06">
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span><strong>עוסק בכספות בלבד</strong></li>
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span>ללא גרימת נזק</li>
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span>מחירים תחרותיים</li>
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span>מענה מהיר בוואטסאפ</li>
            </ul>
            <window.HeroVideoCard />
            {/* Google reviews — compact strip + single belt of real Maps reviews */}
            <div className="hero-reviews" data-reveal data-reveal-delay=".06">
              <div className="hero-reviews-cta">
                <Button variant="whatsapp" size="lg" href="https://wa.me/972543312367" target="_blank" icon={<img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="18" height="18" />}>שלחו הודעה לשלום בוואטסאפ</Button>
                <span className="urgent-wrap">
                  <Button variant="primary" size="lg" href="tel:0543312367" icon={<span className="urgent-dot"></span>}>לשירותי חירום התקשרו עכשיו</Button>
                </span>
                <span className="cta-247"><i></i>מוקד זמין 24/7</span>
              </div>
              <div className="hero-reviews-head">
                <svg className="hero-reviews-glogo" width="26" height="26" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg>
                <b className="hero-reviews-score">4.9</b>
                <span className="hero-reviews-stars" aria-hidden="true">
                  {[0, 1, 2, 3, 4].map((i) => (
                    <svg key={i} width="17" height="17" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>
                  ))}
                </span>
                <span className="hero-reviews-label">ביקורות בגוגל</span>
              </div>
              <div className="wa-marquee">
                <div className="wa-track">
                  {[0, 1].map((dup) => (
                    <React.Fragment key={dup}>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#AB47BC' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוחה פרטית · באר שבע</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני חודש</span></span></div></div><p>נזקקתי לשירות פריצת כספת ולאחר שדיברתי עם שלום הרגשתי בטוחה להזמין אותו. בעל מקצוע הוגן, ישר ואיכותי — תוך דקות פרץ לנו את הכספת במחיר הוגן מאוד. אמליץ עליו לכל מכיריי, יישר כוח</p></div>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#EF6C00' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוחה פרטית</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני שבועיים</span></span></div></div><p>ננעלה לי הכספת והזמנתי את שלום! שירות מצויין ואדיב ומחיר הוגןןן ממליצה בחום😍</p></div>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#26A69A' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוח פרטי</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני חודשיים</span></span></div></div><p>השתמשתי בשירות הפריצה. שרות מעולה, מענה מהיר לבעיה, אמינות ומחיר מצוין</p></div>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#5C6BC0' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוח עסקי · דרום</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני 3 חודשים</span></span></div></div><p>כספות השלום זה הכי מקצועי ואמין בכל אזור הדרום. ממליץ מאוד!</p></div>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#EC407A' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוחה פרטית</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני 4 חודשים</span></span></div></div><p>שירות מקצועי, אדיב ומהיר. ממליצה בחום!!</p></div>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#78909C' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוח פרטי</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני חצי שנה</span></span></div></div><p>מומלץ מאד</p></div>
                      <div className="g-rev"><svg className="g-rev-glogo" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path></svg><div className="g-rev-head"><span className="g-rev-avatar" style={{ background: '#8D6E63' }} aria-hidden="true">ל</span><div><b className="g-rev-name">לקוח פרטי</b><span className="g-rev-meta"><span className="g-rev-stars" aria-hidden="true">{[0, 1, 2, 3, 4].map((s) => (<svg key={s} width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"></path></svg>))}</span><span className="g-rev-time">לפני שנה</span></span></div></div><p>הטכנאי הכי טוב ומקצועי! מהיר ובמחיר סביר. אני ממליץ לכולם!</p></div>
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="hero-flow">
          <div className="hero-about-band" data-reveal data-reveal-delay=".04">
            <div className="hero-about-avatars">
              <img src="assets/photos/shalom-vault-thumbsup.jpg" alt="שלום, טכנאי כספות מוסמך, ליד דלת כספת כבדה פתוחה" loading="lazy" />
              <img src="assets/photos/work-onsite.jpg" alt="עבודת שטח על כספת בבית לקוח" loading="lazy" />
              <img src="assets/photos/work-keypad-install.jpg" alt="התקנת מנעול דיגיטלי חדש על כספת" loading="lazy" />
              <img src="assets/photos/shalom-open-safe.jpg" alt="פתיחת כספת נעולה ללא נזק" loading="lazy" />
              <img src="assets/photos/work-lock-bypass.jpg" alt="פריצה שקטה — עבודה על מנגנון הנעילה של הכספת" loading="lazy" />
            </div>
            <div className="hero-about-row">
              <h3 className="hero-about-headline">
                <span className="bright">מתמחים בתחום אחד בלבד — כספות.</span>
              </h3>
              <p className="hero-about-desc">אנחנו לא מנעולנים — 100% מהזמן, הידע וההשתלמויות מוקדשים לכספות ולמנגנוני הנעילה שלהן. וותק וניסיון של למעלה מ־10 שנים בתחום הזה בלבד מאפשר לי לתת שירות מקצועי שמנעולן כללי לא יכול לתת.</p>
            </div>
          </div>
          {/* Clients — logos belt on the dark canvas */}
          <div className="hero-clients-panel" data-reveal>
            <p className="hero-clients-kicker hero-clients-kicker--center">רשתות, משרדי ממשלה ועסקים בכל הארץ</p>
            <div className="hero-clients-marquee">
              <div className="hero-clients-track">
                {[8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17].map((n, i) => (
                  <img key={i} className="hero-client-logo" src={'https://skillcard.co.il/wp-content/uploads/2023/09/Screenshot_' + n + '.png'} alt="לוגו לקוח" loading="lazy" />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CERTIFICATIONS — shared band */}
      <window.CertsBand />

      {/* SERVICES — shared dark dial */}
      <window.ServicesDial anchorFirst />

      {/* LEAD FORM — shared band */}
      <window.LeadFormBand />

      {/* SAFE SALES — locker stripes */}
      <section className="section sale-sec" data-screen-label="Home / Safe sales">
        <div className="container">
          <div data-reveal>
            <SectionHeader align="center" title="כספת חדשה? יש לי בדיוק את המתאימה."
              description="חדשות ומשומשות משופצות עם אחריות — כולל ייעוץ, שינוע והתקנה מקצועית עם עיגון לפי תקן." />
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }} data-reveal>
            <Button variant="primary" size="lg" href="catalog.html" icon={<window.LIcon name="chevron-left" size={16} />}>לקטלוג המלא</Button>
          </div>
        </div>
      </section>

      {/* COURSE CINEMA — full-screen scrub landing section (shared with course.html) */}
      <window.CourseCinema enrollHref="course.html#crs-enroll" />

      {/* FAQ */}
      <section className="section sec-alt faq-sec" data-screen-label="Home / FAQ">
        <div className="container" style={{ maxWidth: 'var(--container-narrow)' }}>
          <div data-reveal><SectionHeader align="center" title="לפני שמתקשרים" /></div>
          <div style={{ marginTop: 36 }} data-reveal>
            <Accordion items={[
              { q: 'האם פריצת כספת גורמת נזק?', a: 'פריצה שקטה מתבצעת ללא גרימת נזק ומאפשרת המשך שימוש בכספת, במידה ומתאפשר. זו המומחיות שלי.' },
              { q: 'האם אתם עובדים לפי תקן?', a: 'כן — תקן משטרת ישראל, דרישות משרד הביטחון, חברות הביטוח ונוהל 150 של משרד הבריאות לכספות נרקוטיקה.' },
              { q: 'כמה מהר מגיעים?', a: 'ברוב המקרים באותו יום, בכל הארץ. הכי מהיר — הודעה בוואטסאפ עם תמונה של הכספת.' },
              { q: 'אילו מנגנוני נעילה אתם מתקינים?', a: 'קומבינציות מכניות MP ו-MP פרפר, מנעולי מפתח, מנעולים דיגיטליים וביומטריים כגון KABA.' },
            ]} />
          </div>
        </div>
      </section>

      {/* SERVICE AREAS — GEO map for local SEO */}
      <section className="section areas-sec" data-screen-label="Home / Service areas">
        <div className="container">
          <div data-reveal>
            <SectionHeader align="center" title="מגיעים אליכם — בכל הארץ"
              description="הבסיס באשקלון — השירות בכל הארץ, ברוב המקרים באותו יום." />
          </div>
          <div className="areas-grid">
            <div className="areas-map" data-reveal>
              <iframe title="מפת אזורי שירות — כספות השלום, אשקלון" loading="lazy" referrerPolicy="no-referrer-when-downgrade"
                src="https://www.openstreetmap.org/export/embed.html?bbox=33.60%2C29.45%2C36.60%2C33.40&amp;layer=mapnik&amp;marker=31.6688%2C34.5743"></iframe>
            </div>
            <ul className="areas-list" data-reveal data-reveal-delay=".08">
              <li><b><window.LIcon name="map-pin" size={15} /> אשקלון והדרום</b><span>אשקלון, אשדוד, שדרות, נתיבות, קרית גת, באר שבע</span></li>
              <li><b><window.LIcon name="map-pin" size={15} /> שפלה</b><span>רחובות, נס ציונה, ראשון לציון, רמלה, לוד</span></li>
              <li><b><window.LIcon name="map-pin" size={15} /> גוש דן והמרכז</b><span>תל אביב, רמת גן, בני ברק, חולון, בת ים, פתח תקווה</span></li>
              <li><b><window.LIcon name="map-pin" size={15} /> ירושלים והסביבה</b><span>ירושלים, מודיעין, בית שמש, מעלה אדומים</span></li>
              <li><b><window.LIcon name="map-pin" size={15} /> שרון וצפון</b><span>נתניה, רעננה, כפר סבא, חדרה, חיפה והקריות</span></li>
            </ul>
          </div>
          <p style={{ marginTop: 20, textAlign: 'center', fontSize: 13.5, color: 'var(--text-muted)' }}>לא מצאתם את האזור שלכם? מתקשרים — מגיעים.</p>
        </div>
      </section>

      {/* CTA BAND — shared */}
      <window.CTABand />

      {/* BLOG / GUIDES */}
      <section className="section guides-sec" data-screen-label="Home / Guides">
        <div className="container">
          <div data-reveal>
            <SectionHeader align="center" title="המדריכים של שלום"
              description="מה שלמדתי בעשר שנים של כספות בלבד — מחירים אמיתיים, דרישות החוק ומה לעשות כשהכספת לא נפתחת." />
          </div>
          <div className="blog-grid" style={{ marginTop: 34 }} data-reveal>
            {(window.BLOG_INDEX || []).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">
                  <b>{p.title}</b>
                  <p>{p.excerpt}</p>
                  <span className="blog-card-meta">{p.date} · {p.mins} דקות קריאה</span>
                </span>
              </a>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 30 }} data-reveal>
            <Button variant="secondary" size="lg" href="blog.html" icon={<window.LIcon name="chevron-left" size={16} />}>לכל המדריכים</Button>
          </div>
        </div>
      </section>

      
    </main>
  );
}
window.HomePage = HomePage;