/* CoursePage — קורס פורצי כספות: hero → CourseCinema (course-cinema.jsx) → הרשמה → שאלות */
const CRS_WA = window.CRS_WA;
const CRS_INCLUDED = [
  { icon: 'shield-check', b: 'תרגול על כספות אמיתיות', d: 'כל מודול נגמר בידיים על כספת — לא סימולציות.' },
  { icon: 'wrench', b: 'ערכת כלים בסיסית', d: 'הציוד הנדרש לקריאות הראשונות — כלול במחיר.' },
  { icon: 'award', b: 'תעודת הסמכה בסיום', d: 'תעודת טכנאי כספות חתומה ומוכרת בענף.' },
  { icon: 'users', b: 'קבוצה קטנה וליווי צמוד', d: 'כל משתתף מקבל זמן אמיתי מול המדריך.' },
  { icon: 'phone-call', b: 'זמינות אחרי הקורס', d: 'וואטסאפ פתוח לשאלות מהקריאות הראשונות בשטח.' },
  { icon: 'briefcase', b: 'הפניית לקוחות ראשונים', d: 'עומס שחורג מהיכולת שלי — עובר לבוגרים.' },
];

function CoursePage() {
  const { SectionHeader, Button, Accordion, Input } = window.DS;
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    if (!window.gsap) return;
    const words = document.querySelectorAll('.crs-hero-title .word');
    gsap.fromTo(words, { opacity: 0, y: 60, rotateX: -60 }, { opacity: 1, y: 0, rotateX: 0, duration: 1.1, ease: 'expo.out', stagger: .09, delay: .15 });
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (busy) return;
    const fd = new FormData(e.target);
    setBusy(true);
    window.sendLead({ 'שם': fd.get('name') || '', 'טלפון': fd.get('phone') || '', 'מקור': 'קורס פורצי כספות' })
      .then(() => setSent(true)).catch(() => window.location.assign('https://wa.me/972543312367'))
      .finally(() => setBusy(false));
  };

  const titleWords = ['קורס', 'פורצי', 'כספות'];

  return (
    <main className="course-page" data-screen-label="Course / קורס פורצי כספות">
      <section className="crs-hero">
        <div className="crs-hero-inner container">
          <nav className="crumb" aria-label="פירורי לחם" style={{ justifyContent: 'center' }}><a href="index.html">ראשי</a><span>/</span><span>קורס פורצי כספות</span></nav>
          <h1 className="crs-hero-title">
            {titleWords.map((w, i) => <React.Fragment key={i}><span className={'word' + (i === 2 ? ' accent' : '')}>{w}</span>{i < titleWords.length - 1 ? ' ' : ''}</React.Fragment>)}
          </h1>
          <p className="crs-hero-desc">עשר שנים של פריצה שקטה, מניפולציה ותיקון כספות — עכשיו בהכשרה אחת למנעולנים וטכנאים שרוצים להתמחות בתחום המבוקש והמשתלם בענף.</p>
          <div className="crs-hero-actions">
            <Button variant="whatsapp" size="lg" href={CRS_WA} target="_blank" icon={<img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="18" height="18" />}>לפרטים בוואטסאפ</Button>
            <Button variant="outline" size="lg" href="#crs-enroll" icon={<window.LIcon name="chevron-down" size={16} />}>מחיר והרשמה</Button>
          </div>
        </div>
      </section>

      <window.CourseCinema />

      <section className="section crs-enroll" id="crs-enroll" data-screen-label="Course / Enroll">
        <div className="container crs-enroll-grid">
          <div data-reveal>
            <SectionHeader tone="dark" title="מקום בקבוצה קטנה — כדי שבאמת תדעו לעשות את זה" description="השאירו פרטים ונחזור אליכם עם כל המידע: תאריכים, משך ההכשרה ותנאי תשלום." />
            {!sent ? (
              <form onSubmit={submit} className="hero-lead-form" style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 28, maxWidth: 420 }}>
                <Input label="שם מלא" name="name" placeholder="ישראל ישראלי" required />
                <Input label="טלפון" name="phone" type="tel" placeholder="050-000-0000" required inputMode="tel" />
                <Button type="submit" size="lg" variant="gold" disabled={busy}>{busy ? 'שולח…' : 'שריינו לי מקום'}</Button>
              </form>
            ) : (
              <p style={{ marginTop: 24, color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19 }}>הפרטים אצלי — אחזור אליכם בהקדם. <window.LIcon name="check" size={18} style={{ color: 'var(--gold-500)' }} /></p>
            )}
          </div>
          <div className="crs-enroll-price" data-reveal data-reveal-delay=".1">
            <span className="crs-price-flag"><window.LIcon name="flame" size={13} />מחזור קרוב — המקומות מוגבלים</span>
            <b className="crs-price-title">המסלול המלא</b>
            <span className="crs-price-sub">6 מודולים · תרגול על כספות אמיתיות · תעודת הסמכה</span>
            <div className="crs-price-line"><small>עלות ההכשרה</small><b>בשיחה אישית</b></div>
            <span className="crs-price-note">תנאי תשלום נוחים · שיחת ההיכרות ללא התחייבות</span>
            <span className="crs-price-divider">מה כלול במסלול</span>
            <ul className="crs-enroll-list">
              {CRS_INCLUDED.map((it) => <li key={it.b}><window.LIcon name={it.icon} size={16} /><span><b>{it.b}</b><small>{it.d}</small></span></li>)}
            </ul>
            <div className="crs-price-foot">
              <img src="assets/photos/shalom-vault-thumbsup.jpg" alt="שלום — מדריך הקורס" />
              <div><b>שלום · המדריך</b><span>10+ שנות פריצה ותיקון כספות בשטח</span></div>
              <a href={CRS_WA} target="_blank" rel="noopener" aria-label="לפרטים בוואטסאפ"><img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="20" height="20" /></a>
            </div>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Course / 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: 'משך מדויק ותאריכים נמסרים בפנייה אישית בוואטסאפ או בטופס — תלוי בגודל הקבוצה הקרובה.' },
              { q: 'מתרגלים על כספות אמיתיות?', a: 'כן — כל מודול כולל תרגול מעשי על כספות אמיתיות, לא רק תאוריה.' },
              { q: 'מקבלים תעודה בסוף?', a: 'כן, תעודת סיום קורס טכנאי כספות בחתימת שלום.' },
            ]} />
          </div>
        </div>
      </section>
    </main>
  );
}
window.CoursePage = CoursePage;