"use strict";
const main = document.querySelector('#main');
const menu = document.querySelector('#menu');
const byId = new Map(SIGNS.map(s => [s.id, s]));
const byCode = new Map(SIGNS.map(s => [s.code, s]));
const groupById = new Map(GROUPS.map(g => [g.id, g]));
const esc = text => String(text).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const groupSigns = id => SIGNS.filter(s => s.group === id);
let currentSign = null;
let activeUtterance = null;
const synth = 'speechSynthesis' in window ? window.speechSynthesis : null;
const imageFor = (code, decorative = false) => `<img src="${esc(SIGN_IMAGES[code])}" alt="${decorative ? '' : esc(byCode.get(code)?.title || code)}" ${decorative ? 'aria-hidden="true"' : ''} loading="lazy" decoding="async" referrerpolicy="no-referrer">`;
const crumbs = (group, title) => `<nav class="breadcrumb" aria-label="Morzsamenü"><a href="#">Főoldal</a><span aria-hidden="true">/</span>${title ? `<a href="#csoport/${group.id}">${esc(group.name)}</a><span aria-hidden="true">/</span><span>${esc(title)}</span>` : `<span aria-current="page">${esc(group.name)}</span>`}</nav>`;

menu.innerHTML = GROUPS.map(g => `<a class="menu-link" data-group="${g.id}" href="#csoport/${g.id}">${imageFor(g.samples[0], true)}<span>${esc(g.short)}</span></a>`).join('');

function showHome() {
 document.title = 'KRESZ Táblatanoda – Jelzőtábla csoportok';
 main.innerHTML = `<p class="eyebrow">Fedezd fel a közlekedési táblákat!</p><h1>Melyik tábla mit jelent?</h1><div class="intro-row"><p class="intro">Válassz egy csoportot, nézd meg a táblákat, és hallgasd meg a magyarázatukat!</p><span class="count-label">7 csoport · ${SIGNS.length} tábla</span></div><div class="group-grid">${GROUPS.map((g, i) => `<a class="group-card" href="#csoport/${g.id}"><div class="group-art">${g.samples.map(code => imageFor(code, true)).join('')}</div><h2>${esc(g.name)}</h2><p>${esc(g.description)}</p><div class="card-foot"><span>${groupSigns(g.id).length} tábla felfedezésre vár</span><b aria-hidden="true">↗</b></div></a>`).join('')}</div><div class="hint-strip"><span aria-hidden="true">▶</span><p><strong>Tanulj hallgatva is!</strong> Nyiss meg egy táblát, majd nyomd meg a Felolvasás gombot.</p></div>`;
}
function showGroup(group) {
 const signs = groupSigns(group.id);
 document.title = `${group.name} – Táblatanoda`;
 main.innerHTML = `${crumbs(group)}<p class="eyebrow">${signs.length} megismerhető tábla</p><h1>${esc(group.name)}</h1><div class="intro-row"><p class="intro">${esc(group.intro)}</p></div><div class="sign-grid">${signs.map(s => `<a class="sign-tile" href="#tabla/${s.id}">${imageFor(s.code, true)}<strong>${esc(s.title)}</strong></a>`).join('')}</div>`;
}
function showSign(sign) {
 currentSign = sign;
 const group = groupById.get(sign.group);
 const signs = groupSigns(group.id);
 const index = signs.findIndex(s => s.id === sign.id);
 document.title = `${sign.title} – Táblatanoda`;
 main.innerHTML = `${crumbs(group, sign.title)}<article class="detail"><div class="detail-art">${imageFor(sign.code)}<span class="figure-label">Figyeld meg a formát és a színeket!</span></div><div class="detail-copy"><p class="eyebrow">${esc(group.short)}</p><h1>${esc(sign.title)}</h1><p class="meaning">${esc(sign.meaning)}</p><div class="remember"><strong>Jegyezd meg!</strong><p>${esc(sign.tip)}</p></div><button class="play" id="speak" type="button" aria-pressed="false"><span aria-hidden="true">▶</span> Felolvasás</button><p class="voice-status" id="voice-status" role="status" aria-live="polite"></p></div></article><nav class="pager" aria-label="Táblák lapozása"><a ${index ? `href="#tabla/${signs[index-1].id}"` : 'class="disabled" aria-hidden="true" tabindex="-1"'}>← Előző tábla</a><span class="index">${index+1} / ${signs.length}</span><a ${index < signs.length-1 ? `href="#tabla/${signs[index+1].id}"` : 'class="disabled" aria-hidden="true" tabindex="-1"'}>Következő tábla →</a></nav><a class="group-back" href="#csoport/${group.id}">Vissza a csoport összes táblájához</a><p class="legal-note">Egyszerűsített magyarázat. Jogszabályi háttér: KRESZ ${esc(group.section)}. <a href="#forrasok">Források</a> · <a href="${esc(SIGN_SOURCES[sign.code])}" target="_blank" rel="noopener noreferrer">A táblakép forrása ↗</a></p>`;
 document.querySelector('#speak').addEventListener('click', toggleSpeech);
 refreshVoiceStatus();
}
function showSources() {
 document.title = 'Források és tudnivalók – Táblatanoda';
 main.innerHTML = `<div class="sources"><nav class="breadcrumb" aria-label="Morzsamenü"><a href="#">Főoldal</a><span aria-hidden="true">/</span><span>Források és tudnivalók</span></nav><p class="eyebrow">Háttér a tanuláshoz</p><h1>Források és tudnivalók</h1><section><h2>A magyar KRESZ alapján</h2><p>A csoportosítás és a magyarázatok alapja az <a href="https://net.jogtar.hu/jogszabaly?docid=97500001.kpm" target="_blank" rel="noopener noreferrer">1/1975. (II. 5.) KPM–BM együttes rendelet</a>, különösen a 10–17. § és a 2. számú függelék.</p><p>A KRESZ hat alapvető jelzőtábla-csoportot nevez meg. A kiegészítő táblák külön menüpontot kaptak. A megállási és várakozási tilalmak a tilalmi és korlátozó táblák között szerepelnek.</p><p>Az oldal ${SIGNS.length} táblát és táblaváltozatot mutat be. Ez tanulást segítő válogatás, nem az összes létező felirat-, méret- és táblaváltozat teljes jegyzéke. A magyarázatok rövidítettek; a részletes szabályok és kivételek a jogszabályban olvashatók.</p><p>Ellenőrzés: 2026. szeptember 8. A forrásoldalon jelzett hatályállapot: 2026. április 11-től.</p></section><section><h2>A táblák képei</h2><p>A színes magyar táblarajzok a <a href="https://commons.wikimedia.org/wiki/Category:SVG_road_signs_in_Hungary" target="_blank" rel="noopener noreferrer">Wikimedia Commons magyar KRESZ-tábla gyűjteményéből</a> származnak. Az egyes képek forrásoldala minden táblánál elérhető. A hivatalos jelzések rajzai a gyűjteményben jellemzően PD-HU-exempt közkinccsé minősítéssel szerepelnek.</p><p>A képek külső hivatkozással töltődnek be, ezért a megjelenítésükhöz internetkapcsolat szükséges.</p><p>A <a href="https://ume.kozut.hu/p/kresz-tablak-jelzeskepei" target="_blank" rel="noopener noreferrer">Magyar Közút jelzéskép-gyűjteménye</a> további hivatalos rajzi segédlet. Az ott 2026-ban közzétett új KRESZ-tervezet rajzait a forrás nem hatályosként jelöli; az oldal magyarázatai a fent hivatkozott hatályos rendeleten alapulnak.</p></section><section><h2>Magyar felolvasás</h2><p>A Felolvasás gomb a böngésző beszédfunkcióját használja. Ugyanazzal a gombbal le is állíthatod. Másik táblára vagy a főoldalra lépve a felolvasás leáll.</p><p>A magyar hang elérhetősége a böngészőtől és a készülékre telepített hangoktól függ. Ha nincs magyar hang, ezt az oldal jelzi. A készülék nyelvi vagy beszédbeállításaiban lehet magyar hangot telepíteni. Egyes hangokhoz internet szükséges.</p></section><section><h2>A weblap fájljai</h2><p>A lap külön hivatkozott stíluslapot és szkriptfájlokat használ: <code>styles.css</code>, <code>assets.js</code>, <code>data.js</code> és <code>app.js</code>. A ZIP kicsomagolása után az <code>index.html</code> fájl böngészőben megnyitható.</p><a class="download" href="tablatanoda-forras.zip" download>↓ A teljes weblap letöltése ZIP-ben</a></section></div>`;
}
function stopSpeech() {
 activeUtterance = null;
 if (synth) synth.cancel();
 const button = document.querySelector('#speak');
 if (button) { button.innerHTML = '<span aria-hidden="true">▶</span> Felolvasás'; button.setAttribute('aria-pressed','false'); }
}
function getHungarianVoice() { return synth?.getVoices().find(v => /^hu(?:[-_]|$)/i.test(v.lang)); }
function refreshVoiceStatus() {
 const status = document.querySelector('#voice-status');
 const button = document.querySelector('#speak');
 if (!status || !button || activeUtterance) return;
 if (!synth || !('SpeechSynthesisUtterance' in window)) { button.disabled = true; status.textContent = 'Ez a böngésző nem támogatja a felolvasást.'; return; }
 const voices = synth.getVoices();
 if (voices.length && !getHungarianVoice()) { button.disabled = true; status.textContent = 'Nincs elérhető magyar hang. Telepíts magyar beszédhangot a készülék nyelvi beállításaiban.'; }
 else { button.disabled = false; status.textContent = getHungarianVoice() ? 'Magyar nyelvű felolvasás' : 'A magyar hangot a böngésző választja ki.'; }
}
function toggleSpeech() {
 if (!synth || !currentSign) return;
 if (activeUtterance) { stopSpeech(); refreshVoiceStatus(); return; }
 synth.cancel();
 const utterance = new SpeechSynthesisUtterance(`${currentSign.title}. ${currentSign.meaning} Jegyezd meg! ${currentSign.tip}`);
 utterance.lang = 'hu-HU'; utterance.rate = .88; utterance.pitch = 1;
 const voice = getHungarianVoice(); if (voice) utterance.voice = voice;
 activeUtterance = utterance;
 const button = document.querySelector('#speak');
 const status = document.querySelector('#voice-status');
 button.innerHTML = '<span aria-hidden="true">■</span> Leállítás'; button.setAttribute('aria-pressed','true'); status.textContent = 'A felolvasás indul…';
 utterance.onstart = () => { if (activeUtterance === utterance) status.textContent = 'Felolvasás folyamatban…'; };
 utterance.onend = () => { if (activeUtterance === utterance) { stopSpeech(); status.textContent = 'A felolvasás véget ért.'; } };
 utterance.onerror = event => { if (activeUtterance !== utterance) return; stopSpeech(); status.textContent = event.error === 'language-unavailable' || event.error === 'voice-unavailable' ? 'A magyar beszédhang nem elérhető ezen a készüléken.' : 'A felolvasás nem indult el. Ellenőrizd a hangbeállításokat, majd próbáld újra.'; };
 try { synth.speak(utterance); } catch { stopSpeech(); status.textContent = 'A böngésző nem tudta elindítani a felolvasást.'; }
}
function route(focus = true) {
 stopSpeech(); currentSign = null;
 const [page, id] = location.hash.slice(1).split('/');
 let selectedGroup = null;
 if (!page || page === 'main') showHome();
 else if (page === 'csoport' && groupById.has(id)) { selectedGroup = id; showGroup(groupById.get(id)); }
 else if (page === 'tabla' && byId.has(id)) { selectedGroup = byId.get(id).group; showSign(byId.get(id)); }
 else if (page === 'forrasok') showSources();
 else { document.title = 'Nem található – Táblatanoda'; main.innerHTML = '<h1>Ez az oldal nem található.</h1><p>Válassz egy táblacsoportot a menüből, vagy <a href="#">lépj vissza a főoldalra</a>.</p>'; }
 document.querySelectorAll('.menu-link').forEach(link => { const active = link.dataset.group === selectedGroup; link.classList.toggle('active', active); if (active) link.setAttribute('aria-current','true'); else link.removeAttribute('aria-current'); });
 const home = document.querySelector('.home-link'); home.classList.toggle('active', !page); if (!page) home.setAttribute('aria-current','page'); else home.removeAttribute('aria-current');
 // Failed remote images leave the exact sign name visible and offer its source.
 main.querySelectorAll('img').forEach(img => img.addEventListener('error', () => { if (img.closest('.detail-art')) { const note = document.createElement('p'); note.className = 'img-error'; note.textContent = 'A táblakép nem tölthető be. Ellenőrizd az internetkapcsolatot; a kép forrása lent megnyitható.'; img.replaceWith(note); } else { img.alt = 'A kép nem tölthető be'; } }, {once:true}));
 if (focus) { main.focus({preventScroll:true}); window.scrollTo({top:0,behavior:'instant'}); }
}
window.addEventListener('hashchange', () => route());
window.addEventListener('pagehide', stopSpeech);
if (synth) synth.addEventListener('voiceschanged', refreshVoiceStatus);
route(false);