/* ServicePage — פריצה שקטה: process timeline + gallery + FAQ */
function ServicePage() {
  const { SectionHeader, Button, Badge, Accordion, Testimonial } = window.DS;

  React.useEffect(() => {
    if (!window.gsap) return;
    const prog = document.querySelector('.steps .progress');
    if (prog) {
      gsap.to(prog, {
        height: '100%', ease: 'none',
        scrollTrigger: { trigger: '.steps', start: 'top 70%', end: 'bottom 55%', scrub: .6 },
      });
    }
    gsap.utils.toArray('.step').forEach((el, i) => {
      gsap.fromTo(el, { autoAlpha: 0, y: 30 }, {
        autoAlpha: 1, y: 0, duration: .9, ease: 'expo.out',
        scrollTrigger: { trigger: el, start: 'top 82%', once: true },
      });
    });
  }, []);

  return (
    <main data-screen-label="Service / פריצה שקטה">
      <section className="page-head">
        <div className="bg"><img src="assets/photos/work-lock-bypass.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 style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 22 }}>
            <Badge variant="gold-dark">ללא גרימת נזק</Badge>
            <Badge variant="gold-dark">דיסקרטיות מלאה</Badge>
            <Badge variant="gold-dark">בכל הארץ</Badge>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container grid-2" style={{ alignItems: 'start' }}>
          <div>
            <div data-reveal><SectionHeader kicker="שלב אחר שלב" title="איך זה עובד" /></div>
            <div className="steps">
              <div className="progress"></div>
              <div className="step">
                <div className="step-num">1</div>
                <div><h4>שולחים תמונה בוואטסאפ</h4><p>תמונה של הכספת ושל אזור המנעול — ואני כבר יודע עם מה אני מתמודד ומה להביא.</p></div>
              </div>
              <div className="step">
                <div className="step-num">2</div>
                <div><h4>הצעת מחיר סגורה מראש</h4><p>מחיר אחד, לפני שאני יוצא אליכם. בלי הפתעות ובלי "תוספות בשטח".</p></div>
              </div>
              <div className="step">
                <div className="step-num">3</div>
                <div><h4>פתיחה כירורגית</h4><p>עבודה על מנגנון הנעילה עצמו — בלי דיסק ובלי הרס. ברוב המקרים תוך פחות משעה.</p></div>
              </div>
              <div className="step">
                <div className="step-num">4</div>
                <div><h4>הכספת חוזרת לעבודה</h4><p>מחליף מנגנון או מקודד מחדש לפי הצורך — ואתם חוזרים להשתמש בכספת באותו יום.</p></div>
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gap: 18 }}>
            <div data-reveal style={{ position: 'relative', borderRadius: 'var(--radius-sm)', overflow: 'hidden' }}>
              <img src="assets/photos/work-keypad-install.jpg" alt="עבודה על מנגנון נעילה דיגיטלי של כספת" style={{ width: '100%', aspectRatio: '4/3.4', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'var(--overlay-photo)' }}></div>
              <span style={{ position: 'absolute', bottom: 12, insetInlineStart: 14, color: '#fff', fontWeight: 600, fontSize: 14 }}>עבודה על המנגנון — לא על הפלדה</span>
            </div>
            <div data-reveal><Testimonial quote="הייתי בטוח שצריך להחליף את כל הכספת. שלום פתח, קודד מחדש, והכל עובד. חצי מהמחיר שחשבתי." name="דני ל." role="ראשון לציון" /></div>
          </div>
        </div>
      </section>

      <section className="section sec-alt">
        <div className="container" style={{ maxWidth: 'var(--container-narrow)' }}>
          <div data-reveal><SectionHeader align="center" kicker="שקיפות מלאה" title="שאלות על פריצה שקטה" /></div>
          <div style={{ marginTop: 32 }} data-reveal>
            <Accordion items={[
              { q: 'מה אם אי אפשר לפתוח בלי נזק?', a: 'במקרים נדירים שבהם אין ברירה, אני אומר את זה מראש — ומתקן את הכספת אחרי הפתיחה: מנגנון חדש, סתימת קידוחים וצביעה.' },
              { q: 'איך אני יודע שזה חוקי?', a: 'פתיחה מתבצעת רק לבעלים — עם הצגת תעודה מזהה והוכחת בעלות. כך אני שומר עליכם ועל עצמי.' },
              { q: 'כמה זה עולה?', a: 'תלוי בסוג המנגנון. שולחים תמונה בוואטסאפ ומקבלים מחיר סגור לפני שאני יוצא.' },
            ]} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 40, flexWrap: 'wrap' }} data-reveal>
            <Button variant="whatsapp" size="lg" href="https://wa.me/972543312367?text=%D7%94%D7%99%D7%99%20%D7%A9%D7%9C%D7%95%D7%9D%2C%20%D7%A6%D7%A8%D7%99%D7%9A%20%D7%A4%D7%AA%D7%99%D7%97%D7%AA%20%D7%9B%D7%A1%D7%A4%D7%AA" target="_blank" icon={<img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="18" height="18" />}>שלחו תמונה של הכספת</Button>
            <Button size="lg" href="contact.html">קבלו הצעה</Button>
          </div>
        </div>
      </section>
    </main>
  );
}
window.ServicePage = ServicePage;