<?php
/**
 * Template Name: Settings
 * data-page="settings"
 *
 * @package NeonKickLive
 */

get_header();
?>

	<header class="topbar">
		<h1>SETTINGS</h1>
	</header>

	<div id="settings-skeleton" class="menu-list" aria-hidden="true">
		<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
		<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
		<div class="menu-item skeleton-menu"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-menu-text"></span><span class="chev skeleton skeleton-chevron"></span></div>
	</div>

	<div id="settings-content" hidden>
	<div class="menu-list">
		<label class="menu-item" style="cursor:pointer;">
			<span class="ic">🌓</span>
			<span>Dark / Light Mode</span>
			<button class="btn btn-secondary" id="settings-theme-toggle" style="margin-left:auto;padding:6px 12px;font-size:12px;">TOGGLE</button>
		</label>
		<label class="menu-item" style="cursor:pointer;">
			<span class="ic">🔔</span><span>Push Notifications</span>
			<input type="checkbox" checked style="margin-left:auto;width:18px;height:18px;accent-color:var(--accent);">
		</label>
		<label class="menu-item" style="cursor:pointer;">
			<span class="ic">🌍</span><span>Language</span>
			<span style="margin-left:auto;color:var(--muted);font-size:13px;">English</span>
		</label>
	</div>
	</div>

	<script>
	document.getElementById('settings-theme-toggle')?.addEventListener('click', function() {
		const cur = localStorage.getItem('neonkick_theme') || 'dark';
		const next = cur === 'dark' ? 'light' : 'dark';
		localStorage.setItem('neonkick_theme', next);
		document.body.classList.toggle('light', next === 'light');
		this.textContent = next === 'light' ? 'LIGHT' : 'DARK';
	});
	</script>

<?php get_footer(); ?>