<?php
// Behívjuk a függvényeket tartalmazó fájlt a require_once paranccsal.
// Ez biztosítja, hogy a fájl csak egyszer töltődjön be, megelőzve a hibákat.
require_once 'funkciok.php';

// A JSON fájl tartalma változatlan, de az index.php-val egy mappába kell helyezni.
?>

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="e-Városom: Települési és turisztikai információk Magyarországon">
    <title>e-Városom</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body class="bg-gray-100 font-sans">
    <div id="cityModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="bg-white p-6 rounded-lg shadow-lg w-11/12 max-w-md">
            <h2 class="text-2xl font-bold mb-4 text-center">Válassz várost</h2>
            <select id="citySelect" class="w-full p-2 mb-4 border rounded" aria-label="Város kiválasztása">
                <option value="">Válassz egy várost...</option>
                <option value="Budapest">Budapest</option>
                <option value="Debrecen">Debrecen</option>
                <option value="Szeged">Szeged</option>
                <option value="Pécs">Pécs</option>
            </select>
            <button onclick="saveCity()" class="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700" aria-label="Város mentése">Mentés</button>
        </div>
    </div>

    <div id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300">
        <div class="p-4">
            <h2 class="text-xl font-bold">e-Városom</h2>
            <button onclick="closeSidebar()" class="text-2xl" aria-label="Oldalsó menü bezárása">×</button>
        </div>
        <nav class="p-4">
            <ul>
                <li class="mb-4"><a href="#" onclick="selectFavoriteCity()" class="hover:text-blue-300">Kedvenc város</a></li>
                <li class="mb-4"><a href="admin.php" class="hover:text-blue-300">Admin oldal</a></li>
                <li class="mb-4"><a href="#" onclick="openSettings()" class="hover:text-blue-300">Személyes adatok</a></li>
                <li class="mb-4">
                    <select onchange="changeLanguage(this.value)" aria-label="Nyelv kiválasztása">
                        <option value="hu">Magyar</option>
                        <option value="en">English</option>
                        <option value="de">Deutsch</option>
                    </select>
                </li>
                <li class="mb-4">
                    <button onclick="toggleDarkMode()" class="w-full text-left hover:text-blue-300" aria-label="Sötét mód váltása">Sötét mód</button>
                </li>
            </ul>
        </nav>
    </div>

    <div class="container mx-auto p-4">
        <header class="flex justify-between items-center mb-6">
            <div class="text-center" style="width: 100%;">
				<h1 class="text-2xl font-bold">e-Városom <span id="selectedCity" class="text-2xl font-normal"></span></h1>

				<?php
					// A függvény meghívása a kért településnévvel (ékezet nélkül).
					echo telepulesinfo('bonyhad');
				?>

				<div id="nameday"></div>
			</div>	
            <div class="flex space-x-2">
                <button onclick="toggleSearch()" class="text-2xl" aria-label="Keresés megnyitása">🔍</button>
                <button onclick="openSidebar()" class="text-2xl" aria-label="Menü megnyitása">☰</button>
            </div>
        </header>
        <div id="searchBar" class="hidden mt-4 m-2.5">
            <input type="text" placeholder="Keresés..." class="w-full p-2 rounded border" aria-label="Keresés a tartalomban">
        </div>

        <div id="mainMenu" class="grid grid-cols-2 gap-4">
            <div class="menu-item bg-blue-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-blue-600" onclick="showSubMenu('hasznos')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Hasznos dolgok ikon"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
                <span class="text-center">Hasznos dolgok<br><small>Közérdekű bejelentő, szavazás, stb.</small></span>
            </div>
            <div class="menu-item bg-green-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-green-600" onclick="showSubMenu('hirek')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Hírek ikon"><path d="M3 3h18v18H3zM5 5v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h6v2H7v-2z"/></svg>
                <span class="text-center">Hírek<br><small>Legfrissebb városi hírek és közlemények.</small></span>
            </div>
            <div class="menu-item bg-yellow-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-yellow-600" onclick="showSubMenu('latnivalok')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Látnivalók ikon"><path d="M12 2L2 7v12h20V7l-10-5zm0 2.83l7.17 3.59V17H4.83V8.42L12 4.83z"/></svg>
                <span class="text-center">Látnivalók<br><small>Fedezze fel a város nevezetességeit.</small></span>
            </div>
            <div class="menu-item bg-red-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-red-600" onclick="showSubMenu('programok')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Programok ikon"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z"/></svg>
                <span class="text-center">Programok<br><small>Városi események és rendezvények.</small></span>
            </div>
            <div class="menu-item bg-purple-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-purple-600" onclick="showSubMenu('intezmenyek')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Intézmények ikon"><path d="M12 2L2 7v12h20V7l-10-5zm0 2.83l7.17 3.59V17H4.83V8.42L12 4.83z"/></svg>
                <span class="text-center">Intézmények<br><small>Fontos városi hivatalok és szervezetek.</small></span>
            </div>
            <div class="menu-item bg-teal-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-teal-600" onclick="showSubMenu('szolgaltatok')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Szolgáltatók ikon"><path d="M21 6h-3V3H6v3H3v15h18V6zm-2 13H5V8h14v11z"/></svg>
                <span class="text-center">Szolgáltatók<br><small>Helyi vállalkozások és szolgáltatók.</small></span>
            </div>
            <div class="menu-item bg-indigo-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-indigo-600" onclick="showSubMenu('fiataloknak')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Fiataloknak ikon"><path d="M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.05.03.08.04 2.33.67 4.89 2.46 4.89 3.46V19h-8v-2.5c0-1.07.74-2.08 1.97-2.95.35-.25.68-.45.97-.55z"/></svg>
                <span class="text-center">Fiataloknak<br><small>Információk és lehetőségek fiataloknak.</small></span>
            </div>
            <div class="menu-item bg-pink-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-pink-600" onclick="showSubMenu('idoseknek')">
                <svg class="w-12 h-12 mb-2" fill="currentColor" viewBox="0 0 24 24" aria-label="Időseknek ikon"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                <span class="text-center">Kegyeleti Honlap<br><small>Elhunyt kereső, emlékfal, gyertya gyújtás, virág.</small></span>
            </div>
        </div>

        <div id="subMenu" class="hidden grid grid-cols-2 gap-4 mt-4"></div>
        <div id="map" class="hidden h-96 mt-4"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>