<script lang="ts">
	import { goto } from '$app/navigation';

	function navigateTo(path: string) {
		goto(path);
	}
</script>

<svelte:head>
	<title>Paramètres | Classeo</title>
</svelte:head>

<div class="settings-page">
	<div class="page-container">
		<header class="page-header">
			<h1>Paramètres</h1>
			<p class="page-description">
				Gérez votre compte et vos préférences.
			</p>
		</header>

		<main class="page-content">
			<div class="settings-grid">
				<button class="settings-card" onclick={() => navigateTo('/settings/sessions')}>
					<span class="card-icon">🔐</span>
					<div class="card-content">
						<h2>Mes sessions</h2>
						<p>Gérez vos sessions actives et déconnectez les appareils à distance.</p>
					</div>
					<span class="card-arrow">→</span>
				</button>
			</div>
		</main>
	</div>
</div>

<style>
	.settings-page {
		padding: 24px;
		font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
	}

	.page-container {
		max-width: 640px;
		margin: 0 auto;
	}

	.page-header {
		margin-bottom: 32px;
	}

	.page-header h1 {
		font-size: 24px;
		font-weight: 700;
		color: var(--text-primary, #1a1f36);
		margin: 0 0 8px 0;
	}

	.page-description {
		font-size: 14px;
		color: var(--text-secondary, #64748b);
		margin: 0;
		line-height: 1.5;
	}

	.page-content {
		background: var(--surface-elevated, #fff);
		border-radius: 16px;
		padding: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.settings-grid {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.settings-card {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px;
		background: transparent;
		border: none;
		border-radius: 12px;
		cursor: pointer;
		text-align: left;
		transition: background 0.2s;
		width: 100%;
	}

	.settings-card:hover {
		background: var(--surface-primary, #f8fafc);
	}

	.card-icon {
		font-size: 28px;
		flex-shrink: 0;
	}

	.card-content {
		flex: 1;
		min-width: 0;
	}

	.card-content h2 {
		font-size: 15px;
		font-weight: 600;
		color: var(--text-primary, #1a1f36);
		margin: 0 0 4px 0;
	}

	.card-content p {
		font-size: 13px;
		color: var(--text-secondary, #64748b);
		margin: 0;
		line-height: 1.4;
	}

	.card-arrow {
		font-size: 18px;
		color: var(--text-muted, #94a3b8);
		flex-shrink: 0;
	}
</style>
