מנורת הכנסת

<div class="knesset-menorah-interactive" dir="rtl">

<!-- מתג ההחלפה בין איור לצילום -->
<div class="menorah-controls">
<span id="menorah-label-sketch" class="menorah-active-label">איור ותרשים</span>
<label class="menorah-switch">
<input type="checkbox" id="menorah-view-toggle">
<span class="menorah-slider"></span>
</label>
<span id="menorah-label-photo">צילום מציאותי</span>
</div>

<!-- מעטפת התמונות והנקודות הלחיצות -->
<div class="menorah-image-wrapper" id="menorah-wrapper">
<img id="menorah-img-sketch" src="YOUR_SKETCH_IMAGE_URL.jpg" alt="תרשים מנורת הכנסת">
<img id="menorah-img-photo" src="YOUR_PHOTO_IMAGE_URL.jpg" alt="צילום מנורת הכנסת">

<!-- הנקודות יוזרקו לכאן על ידי ה-JavaScript -->
<div id="menorah-hotspots-layer"></div>
</div>

<!-- קרדיטים מתחלפים -->
<div class="menorah-credits">
<strong>קרדיט:</strong> <span id="menorah-credits-text">איור: תמר הירדני &copy;</span>
</div>

<!-- חלון קופץ (Modal) מסך מלא להסברים -->
<div id="menorah-modal" class="menorah-modal">
<div class="menorah-modal-content">
<div class="menorah-modal-header">
<h3 id="menorah-modal-title">כותרת</h3>
<button id="menorah-modal-close" class="menorah-close-btn">&times;</button>
</div>
<div id="menorah-modal-body" class="menorah-modal-body">
<!-- תוכן הסצנה יוזרק לכאן -->
</div>
</div>
</div>

</div>

<style>
/* --- עיצוב בסיסי מותאם למובייל (Mobile First) --- */
.knesset-menorah-interactive {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
background: #fefefe;
padding: 15px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
color: #333;
}

.menorah-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 20px;
font-weight: 600;
color: #888;
}

.menorah-active-label {
color: #a31d4e;
transition: color 0.3s ease;
}

/* כפתור Toggle */
.menorah-switch {
position: relative;
display: inline-block;
width: 60px;
height: 32px;
}
.menorah-switch input {
opacity: 0;
width: 0;
height: 0;
}
.menorah-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #a31d4e;
transition: .4s;
border-radius: 34px;
}
.menorah-slider:before {
position: absolute;
content: "";
height: 24px; width: 24px;
left: 4px; bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
input:checked + .menorah-slider {
background-color: #2b6cb0;
}
input:checked + .menorah-slider:before {
transform: translateX(28px);
}

/* תמונות ומעטפת */
.menorah-image-wrapper {
position: relative;
width: 100%;
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.menorah-image-wrapper img {
width: 100%;
height: auto;
display: block;
}
#menorah-img-photo {
position: absolute;
top: 0; left: 0;
opacity: 0;
pointer-events: none; /* מאפשר לחיצה על הנקודות דרך התמונה */
transition: opacity 0.5s ease-in-out;
}
#menorah-hotspots-layer {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 10;
}

/* נקודות אינטראקטיביות (Hotspots) */
.menorah-hotspot {
position: absolute;
width: 6vw;
height: 6vw;
min-width: 25px;
min-height: 25px;
max-width: 45px;
max-height: 45px;
background: rgba(163, 29, 78, 0.25);
border: 2px solid #a31d4e;
border-radius: 50%;
transform: translate(50%, -50%); /* ב-RTL מיקום מתבצע מימין, אך אנו נשתמש ב-left ב-JS. נתקן בהתאם */
cursor: pointer;
animation: menorahPulse 2s infinite;
transition: all 0.2s ease;
}
.menorah-hotspot:hover, .menorah-hotspot:active {
background: rgba(163, 29, 78, 0.6);
transform: translate(50%, -50%) scale(1.15);
animation: none;
}
@keyframes menorahPulse {
0% { box-shadow: 0 0 0 0 rgba(163, 29, 78, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(163, 29, 78, 0); }
100% { box-shadow: 0 0 0 0 rgba(163, 29, 78, 0); }
}

/* מצב צילום - התאמת צבעי הנקודות */
.photo-mode .menorah-hotspot {
background: rgba(255, 255, 255, 0.2);
border-color: #fff;
animation: menorahPulseLight 2s infinite;
}
.photo-mode .menorah-hotspot:hover {
background: rgba(255, 255, 255, 0.5);
}
@keyframes menorahPulseLight {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.menorah-credits {
margin-top: 15px;
font-size: 13px;
text-align: center;
color: #666;
}

/* מודל פופ-אפ מסך מלא */
.menorah-modal {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
padding: 15px;
box-sizing: border-box;
}
.menorah-modal.show-modal {
opacity: 1;
pointer-events: auto;
}
.menorah-modal-content {
background: #fff;
width: 100%;
max-width: 600px;
max-height: 85vh;
border-radius: 12px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.menorah-modal.show-modal .menorah-modal-content {
transform: translateY(0);
}
.menorah-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eaeaea;
background: #fafafa;
border-radius: 12px 12px 0 0;
}
.menorah-modal-header h3 {
margin: 0;
color: #a31d4e;
font-size: 22px;
}
.photo-mode-modal .menorah-modal-header h3 {
color: #2b6cb0;
}
.menorah-close-btn {
background: none;
border: none;
font-size: 36px;
line-height: 1;
color: #888;
cursor: pointer;
padding: 0;
}
.menorah-close-btn:hover { color: #222; }

.menorah-modal-body {
padding: 20px;
overflow-y: auto;
font-size: 16px;
line-height: 1.6;
color: #444;
}
.menorah-modal-body p { margin-top: 0; margin-bottom: 15px; }
.menorah-modal-body p:last-child { margin-bottom: 0; }
.menorah-modal-body blockquote {
background: #f7f9fa;
border-right: 4px solid #a31d4e;
margin: 15px 0;
padding: 12px 15px;
font-style: italic;
color: #555;
}
.photo-mode-modal .menorah-modal-body blockquote {
border-right-color: #2b6cb0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {

// מערך הסצנות מתוך ויקיפדיה. x,y הם מיקומים באחוזים על גבי התמונה.
const scenes = [
// --- קנה מרכזי ---
{
title: "מלחמת עמלק ברפידים", x: 50, y: 9,
content: `<p>בראש קנה זה מוצג תבליט המתאר את קורות מלחמת עמלק ברפידים (שמות י"ז, י'–י"ד):</p>
<blockquote>"וְהָיָה כַּאֲשֶׁר יָרִים מֹשֶׁה יָדוֹ וְגָבַר יִשְׂרָאֵל, וְכַאֲשֶׁר יָנִיחַ יָדוֹ וְגָבַר עֲמָלֵק... וַיַּחֲלֹשׁ יְהוֹשֻׁעַ אֶת עֲמָלֵק וְאֶת עַמּוֹ לְפִי חָרֶב. וַיֹּאמֶר ה' אֶל מֹשֶׁה: כְּתֹב זֹאת זִכָּרוֹן בַּסֵּפֶר... כִּי מָחֹה אֶמְחֶה אֶת זֵכֶר עֲמָלֵק מִתַּחַת הַשָּׁמָיִם."</blockquote>
<p>התבליט מציג את משה רבנו עומד, כששתי ידיו מונפות אל על והן נתמכות על ידי אהרן וחור. ייחודו של קרב זה: לא כוחו הפיזי של צבא הוא שהכריע, אלא יכולתו של משה להחזיק את ידיו באוויר.</p>
<p>מלחמת עמלק נחשבת לאירוע מכונן כיוון שעמלק נתפס כאויב האולטימטיבי המופיע בכל דור. המסר המופיע במשנה: "וכי ידיו של משה עושות מלחמה... כל זמן שהיו ישראל מסתכלים כלפי מעלה ומשעבדין את לבם לאביהם שבשמים, היו מתגברים, ואם לאו - היו נופלין."</p>`
},
{
title: "לוחות הברית", x: 50, y: 21,
content: `<p>לוחות הברית מוצגים במנורת הכנסת בדמות שני לוחות זהים בעלי קצה עליון מעוגל. הלוחות, שעליהם נכתבו עשרת הדיברות, מייצגים את עיקרי האמונה והמוסר היהודיים.</p>
<p>הכיתוב על הלוחות הוא שתי תיבות ראשונות בלבד מתוך הדיבר כולו. ברקע לוחות הברית נראות להבות אש, המסמלות את הסנה הבוער, ייצוג של ראשית התגלות האל לדור שיצא ממצרים.</p>`
},
{
title: "רות המואביה ורחל אמנו", x: 50, y: 32,
content: `<p>רות המואביה מוצגת מחזיקה ערימת שיבולים, והיא מסמלת את האשה הזרה שנטמעה בעם ישראל והפכה למייסדת שושלת מלכי יהודה. היא אוחזת פמוט בו שלושה נרות, המסמלים את שלושת הדורות שיעברו ממנה ועד דוד המלך, שמרומז בכתר המעטר את הפמוט.</p>
<p>למרגלותיה נראית רחל אמנו כורעת ומתייפחת, כביטוי לפסוק:</p>
<blockquote>"קוֹל בְּרָמָה נִשְׁמָע נְהִי בְּכִי תַמְרוּרִים, רָחֵל מְבַכָּה עַל בָּנֶיהָ מֵאֲנָה לְהִנָּחֵם..." (ירמיהו ל"א)</blockquote>
<p>רות ורחל מייצגות כאן את העצמאות והמלוכה מחד, ואת הגלות והשעבוד מאידך.</p>`
},
{
title: "חזון העצמות היבשות", x: 50, y: 44,
content: `<p>חזון העצמות היבשות מעוצב בדמות מלאך גדול עוטה גלימה, הנוצר מארבע רוחות שמתאחדות. המלאך עובר מעל שלדים וחלקי עצמות המתרוממים מן הקרקע (יחזקאל ל"ז):</p>
<blockquote>"כֹּה אָמַר ה', הִנֵּה אֲנִי פֹתֵחַ אֶת קִבְרוֹתֵיכֶם וְהַעֲלֵיתִי אֶתְכֶם מִקִּבְרוֹתֵיכֶם עַמִּי וְהֵבֵאתִי אֶתְכֶם אֶל אַדְמַת יִשְׂרָאֵל."</blockquote>
<p>החזון נבחר כ"אירוע מפתח" כיוון שהוא מתאר את אחרית הימים, תחיית המתים, וחזרתו של העם כולו לארץ ישראל.</p>`
},
{
title: "מרד גטו ורשה", x: 50, y: 54,
content: `<p>תבליט המרד מתאר דמויות רבות המייצגות את היהודים בגטו: לוחמים חמושים, יהודי זקן עם ספר תורה, אשה מתה שתינוקה נשמט, קשישה מבכה ילד מת ועוד.</p>
<p>מעל כולם נראית דמות אדם שידיו פרוסות בתפילה ועל חזהו מגן דוד. בפינה השמאלית נראה לוחם מניף קת רובה – זהו דיוקן עצמי של האמן אלקן, שניצל מהתופת אך איבד רבים ממשפחתו. הבחירה במרד נועדה לפאר את הגבורה שהיא, לדבריו, "ההצדקה המוסרית לתחייה".</p>`
},
{
title: "שמע ישראל", x: 50, y: 66,
content: `<p>תפילת שמע ישראל נחשבת לתפילה הידועה ביותר בספר התפילה היהודי, והיא מבטאת את האמונה באל אחד ובבחירתו בעם ישראל: <strong>"שְׁמַע יִשְׂרָאֵל ה' אֱלֹהֵינוּ ה' אֶחָד"</strong>.</p>
<p>התפילה מופיעה על הקנה המרכזי במנורת הכנסת כביטוי לבשורה המונותאיסטית. אלקן הציב אותה במרכז כאלמנט שכל אברי המנורה מתנקזים אליו.</p>`
},
{
title: "הקמת מדינת ישראל", x: 50, y: 82,
content: `<p>בבסיס המנורה הציב אלקן את מלחמת העצמאות והקמת מדינת ישראל, כביטוי לדבר המשמעותי האחרון שאירע לעם ישראל. בתבליט נראים חלוצים עמלים על אדמת טרשים, מסתתים אבנים, חורשים, בונים גשרים ומניחים יסודות.</p>
<p>המיקום בבסיס סותר לכאורה את ההיגיון שעל האירוע האחרון להופיע בראש, אך אלקן ביקש לבטא רעיון ציוני: מדינת ישראל היא מקור האור והבסיס הקורן על המנורה כולה.</p>`
},

// --- קנה חיצוני שמאלי ---
{
title: "הנביא ישעיהו", x: 12, y: 14,
content: `<p>הנביא ישעיהו חי זמן קצר לפני ירמיהו, אך נבואותיו מרובות בפסוקי נחמה, ובתיאורי אחרית הימים (ישעיהו י"א):</p>
<blockquote>"וְגָר זְאֵב עִם כֶּבֶשׂ, וְנָמֵר עִם גְּדִי יִרְבָּץ... וְשִׁעֲשַׁע יוֹנֵק עַל חֻר פָּתֶן..."</blockquote>
<p>בתבליט מתואר ישעיהו עומד פרוס ידיים ומאחוריו קרני אור. למרגלותיו התגשמות חזונו: זאב מחבק כבש ותינוק משתעשע עם נחש ליצירת אידיליה. הוא מוצב בניגוד מוחלט לנביא ירמיהו שבקנה הנגדי.</p>`
},
{
title: "רבן יוחנן בן זכאי", x: 12, y: 26,
content: `<p>רבן יוחנן בן זכאי (ריב"ז) מסמל ניצחון לא כוחני. הלה נפגש עם שר הצבא הרומי אספסיאנוס ושכנעו להציל את ההנהגה היהודית ("תן לי יבנה וחכמיה").</p>
<p>בתבליט הוא מתואר עומד וידיו פרוסות כלפי ירושלים החרבה שעמודיה שבורים. הוא מוגן בידי קשת אבן איתנה עם חכמי ישראל הניצולים בדרכם ליבנה. המשותף למכבים (קנה נגדי) ולריב"ז הוא הניצחון, והניגוד הוא בדרך ההידברות לעומת מלחמה.</p>`
},
{
title: "תור הזהב בספרד", x: 12, y: 37,
content: `<p>תור הזהב מציין את הפריחה התרבותית של יהודי ספרד (המאות ה-9 עד ה-13). התקופה מוצגת בדמותו של הרמב"ם האוחז את ספר 'היד החזקה' שכתב, וספר פילוסופיה של אריסטו.</p>
<p>לצד אריסטו מופיע ינשוף (האמת שבשכל), ולצד הרמב"ם יונה (האמת שבאמונה). לצדם רבי יהודה הלוי, מגדולי המשוררים, מנגן בנבל. תור הזהב ניצב מול 'החסידות' (קנה נגדי) כהנגדה בזרמי המחשבה.</p>`
},
{
title: "גולי בבל", x: 12, y: 48,
content: `<p>גולי בבל מתוארים כשהם יושבים ובוכים על נהרות בבל, ככתוב בתהלים:</p>
<blockquote>"עַל נַהֲרוֹת בָּבֶל שָׁם יָשַׁבְנוּ גַּם בָּכִינוּ בְּזָכְרֵנוּ אֶת צִיּוֹן" (קל"ז, א')</blockquote>
<p>על הארץ לרגליהם מוטלים כלי נגינה, ברקע בנייני הפאר של בבל. המשותף להם ול"שבי ציון" (בקנה הנגדי) הוא הגלות בקשר של היפוך – יציאה לגלות אל מול השיבה לארץ.</p>`
},

// --- קנה אמצעי שמאלי ---
{
title: "עזרא הסופר", x: 25, y: 14,
content: `<p>עזרא הסופר, שעמד בראש שבי ציון, נודע בתקנותיו הדתיות שכללו בין היתר את גירוש הנשים הנוכריות וחובת קריאת התורה. בתבליט נראה עזרא עומד גבוה מעל העם, ומקריא ממגילה גדולה את חוקי התורה.</p>
<p>אחד מן הקהל מגיב לדברים במועל יד, בהתאם לתיאור התנ"כי. עזרא מייצג את התורה כספר חוקים ותקנות ונתפס כקפדן, בניגוד מוחלט להלל הזקן בקנה הנגדי.</p>`
},
{
title: "איוב", x: 25, y: 26,
content: `<p>איוב הוא הדמות הטראגית האולטימטיבית שאושרו נשלל ממנו כמבחן אמונה. הוא מתואר איש שבור השוכב על הקרקע ותומך את ראשו בידו, מוקף ברעיו אך בודד במאבקו להבין סוגיות של שכר ועונש.</p>
<p>הבדל משמעותי בינו לבין רבי חנינא (קנה נגדי) הוא שאיוב מתייסר ושואל (ולבסוף ניצל), בעוד רבי חנינא קיבל עליו את הדין באש ללא ערעור.</p>`
},
{
title: "התלמוד הבבלי", x: 25, y: 37,
content: `<p>התלמוד הבבלי הוא ספר היסוד בהלכה. בניגוד לקבלה, התלמוד אינו עוסק ברוחניות ומיסטיקה אלא בעניינים "טכניים" במטרה להגדיר דרך הלכתית מעשית.</p>
<p>אלקן הציג את התלמוד בדמות חכם השוקד על ספר, ואגודלו מונף באוויר בתנועת ה"פלפול". לימינו אדם מתדפק על גדר עץ עשויה כלונסאות המסמלת את גדר התורה וההסתגרות מהתבוללות ("ועשו סייג לתורה").</p>`
},
{
title: "ספרות האגדה", x: 25, y: 45,
content: `<p>ספרות האגדה (המדרש) עוסקת בסיפורים ומשלים המוסיפים נדבך פרשני ורגשי לכתוב בתורה. היא מוצגת בדמותו של שלמה המלך עטוי כתר, היושב בכרם גפנים ואוחז בקרן השפע.</p>
<p>ספר שיר השירים המיוחס לשלמה נתפס כאלגוריה מדרשית. האגדה באה כהשלמה מאזנת לנוקשות של ספרות ההלכה המוצגת בקנה הנגדי.</p>`
},

// --- קנה פנימי שמאלי ---
{
title: "דוד המלך", x: 38, y: 14,
content: `<p>דוד הצעיר מוצג לאחר שניצח את הענק גלית. הוא מניף באוויר את ראשו הכרות, ומאחוריו נבל עליו תלויים גלימת המלכות והכתר. למרגלותיו מוטל הפגיון של גלית.</p>
<p>דוד מסמל את "ניצחונה של האמת הפשוטה על עוצמתו של השריון". בניגוד לבר כוכבא שהכזיב במרד (מוצג בקנה הנגדי), דוד ניצח והקים שושלת נצחית.</p>`
},
{
title: "העפלה", x: 38, y: 25,
content: `<p>ההעפלה היא עלייתם החשאית של יהודים לארץ בתקופת המנדט הבריטי. המעפילים נראים שטים באונייה בין הגלים ומביעים ביטחון ושמחה, כשאחד מהם מטיל עוגן.</p>
<p>ברקע נראה נציג היישוב המנהיג את האונייה. העפלה היא ביטוי למעשה היהודי האקטיבי, היוזם גאולה ואינו ממתין פאסיבית לחסדי שמיים כמו ה"משיחיות" (בקנה הנגדי).</p>`
},
{
title: "אברהם אבינו", x: 38, y: 33,
content: `<p>אברהם מתואר במנורה כאיש זקן ששערו מקיף את כתפיו. הוא יושב בישיבה מזרחית על הארץ, וזרועותיו מונפות לצדדים כאות הכנעה מלאה וקבלת צו האל בקריאת "הנני!".</p>
<p>אברהם פעל בהשלמה וציות עיוור (כמו בעקדת יצחק), ודמותו ניצבת כנגד זו של יעקב נכדו (בקנה הנגדי) המייצג מאבק והתגוששות עם כוחות אלוהיים.</p>`
},

// --- קנה פנימי ימני ---
{
title: "בר כוכבא", x: 62, y: 14,
content: `<p>שמעון בר כוכבא שעמד בראש מרד ענק כנגד הרומאים, מוצג כבריון עטוי שריון בעת גסיסתו לאחר שהמרד דוכא באכזריות. מאחוריו נראה כוכב שביט המסמל את שמו (מתוך הנבואה "דָּרַךְ כּוֹכָב מִיַּעֲקֹב").</p>
<p>פגיונו מוטל לצדו ועל קסדתו תבליט של אריה. למרות שרבי עקיבא כינה אותו "מלך המשיח", הוא הכזיב במלחמתו ונכשל, ומוצג בהנגדה לדוד המלך.</p>`
},
{
title: "משיחיות", x: 62, y: 25,
content: `<p>המשיחיות היא האמונה בביאת המשיח שיביא לגאולה שמימית באחרית הימים. היא מתוארת במנורה בדמות שני אנשים הנושאים ידיהם בציפייה אל ירושלים הבנויה, המוארת בקרני שמש.</p>
<p>גישה זו נתפסת כאמונה יהודית מסורתית ופאסיבית התלויה בהחלטת האל בלבד, בניגוד לעשייה הפעילה של ה"העפלה" והציונות המודרנית.</p>`
},
{
title: "יעקב והמלאך", x: 62, y: 33,
content: `<p>יעקב העירום נראה מתגושש עם מלאך ה', אירוע בו זכה לכינוי 'ישראל' (בראשית ל"ב): "כִּי שָׂרִיתָ עִם אֱלֹהִים וְעִם אֲנָשִׁים וַתּוּכָל".</p>
<p>אירוע זה מסמל את אופיו כלוחם המעז להיאבק ולעמוד מול כוחות איתנים. הוא ניצב כניגוד לסבו אברהם אבינו המייצג גישה של השלמה, פסיביות והכנעה מוחלטת.</p>`
},

// --- קנה אמצעי ימני ---
{
title: "הלל הזקן", x: 75, y: 14,
content: `<p>הלל הזקן נחשב לחכם הסבלני והמקל מבין חז"ל. התבליט מתאר את הגוי שבא לשמאי ונדחה, ואז בא להלל וביקש ללמוד תורה על רגל אחת.</p>
<p>הלל השיב: <strong>"מה ששנוא עליך - לחברך אל תעשה - זו היא כל התורה כולה"</strong>. התבליט מציג את הלל תומך בנוכרי שעומד פיזית על רגל אחת, ומייצג גישה של אהבת אדם, מול הקפדנות של עזרא הסופר.</p>`
},
{
title: "רבי חנינא בן תרדיון", x: 75, y: 26,
content: `<p>תנא ואחד מעשרת הרוגי מלכות שהועלה על המוקד באשמת לימוד תורה. בתבליט מתואר רבי חנינא קשור למוקד וגווילי תורה קשורים לחזהו. באוויר "פורחות" האותיות א' וש' (אש), כמאמרו המפורסם בעת שריפתו.</p>
<p>רבי חנינא מקבל עליו את הדין כ"קידוש השם שאין עמו ערעור", והוא ניצב בניגוד לאיוב שבקנה הנגדי אשר שאל והתייסר בסוגיית הגמול.</p>`
},
{
title: "קבלה", x: 75, y: 37,
content: `<p>הקבלה מייצגת את עולם המיסטיקה והרוחניות היהודית. היא מיוצגת במנורה בדמות מקובל השקוע בהרהורים ועטוף מכף רגל ועד ראש.</p>
<p>לימינו האות ש' בתוך מעגל (סמל השכינה בשבי), ומשמאל אותיות השם המפורש במסגרת משולש המבטא את השילוש הרוחני (נפש, רוח, נשמה). תורת הסוד משלימה את הפן המעשי של התלמוד שממולה.</p>`
},
{
title: "ספרות ההלכה", x: 75, y: 45,
content: `<p>ספרות ההלכה והדין הנוקשה מוצגים במנורה דרך האירוע הקשה שבו שני בני אהרן נדב ואביהוא, הומתו מאש האל.</p>
<p>אהרן מביט בבניו, ותגובתו הייתה שתיקה והשלמה מוחלטת: <strong>"וַיִּדֹּם אַהֲרֹן"</strong>. סצנה זו מבטאת את סמכות ההלכה בבחינת "יקוב הדין את ההר", כנגד הגמישות של ספרות האגדה בקנה הנגדי.</p>`
},

// --- קנה חיצוני ימני ---
{
title: "הנביא ירמיהו", x: 88, y: 14,
content: `<p>ירמיהו, נביא החורבן, חי בירושלים בימי נפילתה. הוא מוצג כשהוא צועק ומתאבל על העיר החרבה. ידיו מושטות אל על, אחת מהן קפוצה לאגרוף, וברקע נראים מגדליה המנותצים של ירושלים.</p>
<p>בניגוד חריף אליו עומד בקנה הנגדי הנביא ישעיהו, המנבא נבואות אידיליות, שלום ונחמה מרהיבות.</p>`
},
{
title: "המכבים", x: 88, y: 26,
content: `<p>המכבים בני חשמונאי מסמלים את היהודי העומד בכוח הזרוע מול אויביו. הם מתוארים כגיבורי חיל בלהט הקרב, מניפים כלי מלחמה (אחד מניף פטיש, "מקבת").</p>
<p>למרגלותיהם שוכב האח אלעזר שנהרג בקרב, ואחריו מגן עם סמל מגן דוד. המכבים ניצבים במנורה כמייצגי המלחמה והכוח, בניגוד לרבן יוחנן בן זכאי המייצג הידברות.</p>`
},
{
title: "תנועת החסידות", x: 88, y: 37,
content: `<p>החסידות מצדדת בעבודת ה' בשמחה ורגש אישי. מוצגת בדמות חסיד השקוע ב"דבקות" בגן פורח. למרגלותיו קנקן "משקה" (להתוועדות) וכלי מיתר.</p>
<p>ברקע לשמאלו שני חסידים בריקוד המייצג את "עִבְדוּ אֶת ה' בְּשִׂמְחָה". תנועת החסידות הרגשית עומדת מול תור הזהב בספרד שהתאפיין בפילוסופיה ושכלתנות.</p>`
},
{
title: "שבי ציון", x: 88, y: 48,
content: `<p>בראש העולים שבי ציון ניצב נחמיה בגאון מעל משקמי ירושלים כשאוחז במגילת ההרשאה שקיבל מלך פרס.</p>
<p>בין הבונים שילב אלקן פרט אנכרוניסטי בכוונה - חלוץ בן העלייה השנייה אוחז נשק ומגן על ירושלים, כדי לקשור את הבונים של אז לאלו של היום. שבי ציון מהווים את ההיפוך המוחלט לגולי בבל היושבים ובוכים בגלותם.</p>`
}
];

const wrapperLayer = document.getElementById('menorah-hotspots-layer');
const toggleInput = document.getElementById('menorah-view-toggle');
const photoImage = document.getElementById('menorah-img-photo');
const labelSketch = document.getElementById('menorah-label-sketch');
const labelPhoto = document.getElementById('menorah-label-photo');
const textCredit = document.getElementById('menorah-credits-text');

const modal = document.getElementById('menorah-modal');
const modalTitle = document.getElementById('menorah-modal-title');
const modalBody = document.getElementById('menorah-modal-body');
const btnClose = document.getElementById('menorah-modal-close');

// הזרקת 29 הנקודות הלחיצות לקוד באמצעות JavaScript
scenes.forEach(scene => {
const spot = document.createElement('div');
spot.className = 'menorah-hotspot';

// ציון המיקום (בכיווניות RTL, 'left' מחושב מצד שמאל פיזית)
spot.style.left = scene.x + '%';
spot.style.top = scene.y + '%';
spot.setAttribute('title', scene.title);
spot.setAttribute('aria-label', scene.title);

spot.addEventListener('click', (e) => {
e.preventDefault();
modalTitle.innerText = scene.title;
modalBody.innerHTML = scene.content;
modal.classList.add('show-modal');
document.body.style.overflow = 'hidden'; // מניעת גלילת הרקע במובייל
});

wrapperLayer.appendChild(spot);
});

// כפתור ההחלפה בין התמונות
toggleInput.addEventListener('change', function() {
if (this.checked) {
photoImage.style.opacity = '1';
labelPhoto.classList.add('menorah-active-label');
labelSketch.classList.remove('menorah-active-label');
wrapperLayer.classList.add('photo-mode');
modal.classList.add('photo-mode-modal');
textCredit.innerHTML = "צילום: דר' אבישי טייכר, מתוך אתר פיקיויקי";
} else {
photoImage.style.opacity = '0';
labelSketch.classList.add('menorah-active-label');
labelPhoto.classList.remove('menorah-active-label');
wrapperLayer.classList.remove('photo-mode');
modal.classList.remove('photo-mode-modal');
textCredit.innerHTML = "איור: תמר הירדני &copy;";
}
});

// סגירת החלון הקופץ
const closeModal = () => {
modal.classList.remove('show-modal');
document.body.style.overflow = '';
};

btnClose.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
// סגירה גם בלחיצה מחוץ לחלון
if (e.target === modal) closeModal();
});

});
</script>