<script lang="ts">
	import Icon from '$lib/components/pages/Icon.svelte';
	import FeatureGrid from '$lib/components/pages/FeatureGrid.svelte';
	import type { FeatureItem } from '$lib/components/pages/FeatureGrid.svelte';
	import StepsGrid from '$lib/components/pages/StepsGrid.svelte';
	import type { StepItem } from '$lib/components/pages/StepsGrid.svelte';
	import CompareTable from '$lib/components/pages/CompareTable.svelte';
	import type { CompareRow } from '$lib/components/pages/CompareTable.svelte';
	import type { IconName } from '$lib/components/pages/Icon.svelte';

	const pageStats = [
		{ value: '1M+', label: 'Téléchargements' },
		{ value: '100+', label: 'Pays' },
		{ value: 'AGPL-3.0', label: 'Licence' },
		{ value: '100%', label: 'Open source' }
	];

	const steps: StepItem[] = [
		{
			step: '01',
			icon: 'key',
			title: "L'application crée vos clés",
			description:
				'Votre appareil génère des clés cryptographiques. Aucune information personnelle requise.'
		},
		{
			step: '02',
			icon: 'users',
			title: 'Connectez via des liens',
			description:
				"Chaque contact utilise un lien d'invitation unique et jetable. Partagez par QR code, URL ou message."
		},
		{
			step: '03',
			icon: 'message',
			title: 'Communiquez en privé',
			description:
				'Messages, groupes et appels chiffrés de bout en bout. Vos métadonnées restent privées.'
		}
	];

	const features: FeatureItem[] = [
		{
			icon: 'user-x',
			title: 'Zéro identifiant',
			description:
				"Aucun numéro de téléphone, email, nom d'utilisateur ou mot de passe. Vos contacts ne se connaissent pas entre eux."
		},
		{
			icon: 'eye-off',
			title: 'Métadonnées minimisées',
			description:
				'SimpleX ne collecte pas vos métadonnées. Pas de serveur central qui connaît votre réseau social.'
		},
		{
			icon: 'lock',
			title: 'Chiffrement E2E de nouvelle génération',
			description:
				'Double Ratchet Algorithm (comme Signal) + chiffrement post-quantique. Même les serveurs ne peuvent pas lire vos messages.'
		},
		{
			icon: 'server-off',
			title: 'Sans serveur de métadonnées',
			description:
				"Contrairement à Signal ou WhatsApp, il n'y a pas de serveur central qui connaît qui parle avec qui."
		},
		{
			icon: 'fingerprint',
			title: 'Connexions anonymes',
			description:
				"Chaque contact utilise un lien d'invitation unique jetable. Votre identité n'est jamais révélée au serveur."
		},
		{
			icon: 'globe',
			title: 'Réseau décentralisé',
			description:
				'Utilisez les serveurs publics gratuits ou hébergez le vôtre. Aucun point unique de défaillance.'
		},
		{
			icon: 'message',
			title: 'Groupes de grande taille',
			description:
				'Groupes chiffrés de plusieurs centaines de membres avec administration décentralisée.'
		},
		{
			icon: 'phone',
			title: 'Appels vocaux et vidéo',
			description:
				'Appels chiffrés de bout en bout directement entre appareils, sans passer par un serveur.'
		}
	];

	const comparison: CompareRow[] = [
		{
			aspect: 'Identifiants',
			values: ['Aucun', 'Numéro de téléphone', 'Numéro de téléphone', "Nom d'utilisateur"]
		},
		{
			aspect: 'Chiffrement',
			values: ['Double Ratchet + PQ', 'Double Ratchet', 'Signal Protocol', 'Olm/Megolm']
		},
		{
			aspect: 'Métadonnées',
			values: ['Minimisées', 'Collectées (contacts)', 'Collectées (Meta)', 'Sur le serveur']
		},
		{
			aspect: 'Serveur',
			values: ['Sans métadonnées', 'Central (Signal LLC)', 'Central (Meta)', 'Instance choisie']
		},
		{
			aspect: 'Code source',
			values: ['AGPL-3.0 (100%)', 'GPL-3.0 (client)', 'Fermé', 'Apache-2.0']
		},
		{
			aspect: 'Fédération',
			values: ['Non (intentionnel)', 'Non', 'Non', 'Oui (fédéré)']
		}
	];

	const useCases: { icon: IconName; title: string; description: string }[] = [
		{
			icon: 'eye-off',
			title: 'Journalisme',
			description: 'Protection des sources avec des connexions anonymes et sans métadonnées.'
		},
		{
			icon: 'shield',
			title: 'Activisme',
			description: 'Communication résistante à la surveillance étatique ou corporative.'
		},
		{
			icon: 'users',
			title: 'Communautés',
			description: 'Groupes privés avec administration décentralisée et grande capacité.'
		},
		{
			icon: 'lock',
			title: 'Entreprise',
			description: 'Messagerie interne auto-hébergée avec confidentialité garantie.'
		}
	];

	const chips = ['Messagerie privée', 'Sans métadonnées', 'Complément Fediverse', 'Chiffrement PQ'];
</script>

<svelte:head>
	<title>SimpleX Chat — Le Grand Atlas du Fédiverse</title>
	<meta
		name="description"
		content="SimpleX Chat, la première messagerie sans identifiants d'utilisateur : chiffrement de bout en bout post-quantique, métadonnées minimisées, comparaison avec Signal, WhatsApp et Matrix."
	/>
</svelte:head>

<div class="page">
	<!-- Hero -->
	<section class="hero" aria-labelledby="simplex-title">
		<div class="center stack hero-inner">
			<p class="badge">
				<Icon name="shield" size={16} />
				<span>Messagerie de nouvelle génération</span>
			</p>
			<h1 id="simplex-title">La messagerie <span class="accent-text">sans identifiants</span></h1>
			<p class="lede">
				SimpleX Chat est la première messagerie au monde
				<strong>sans identifiants d'utilisateur</strong>. Pas de numéro de téléphone, pas d'email,
				pas de nom d'utilisateur. Uniquement des connexions anonymes avec chiffrement de bout en
				bout post-quantique.
			</p>
			<div class="cluster cta">
				<a class="btn btn-primary" href="https://simplex.chat/" target="_blank" rel="noopener noreferrer">
					<Icon name="external" size={16} />
					Site officiel
					<span class="visually-hidden">(nouvel onglet)</span>
				</a>
				<a
					class="btn btn-ghost"
					href="https://github.com/simplex-chat/simplex-chat"
					target="_blank"
					rel="noopener noreferrer"
				>
					<Icon name="github" size={16} />
					Code source
					<span class="visually-hidden">(nouvel onglet)</span>
				</a>
			</div>

			<ul class="grid hero-stats" role="list" style:--grid-min="9rem">
				{#each pageStats as stat (stat.label)}
					<li class="stat-card">
						<span class="stat-value">{stat.value}</span>
						<span class="stat-label">{stat.label}</span>
					</li>
				{/each}
			</ul>
		</div>
	</section>

	<!-- Comment ça marche -->
	<section class="section section-alt" aria-labelledby="how-title">
		<div class="center stack">
			<h2 id="how-title" class="section-title">Comment ça <span class="accent-text">marche</span> ?</h2>
			<StepsGrid items={steps} />
		</div>
	</section>

	<!-- Pourquoi SimpleX -->
	<section class="section" aria-labelledby="why-title">
		<div class="center stack">
			<h2 id="why-title" class="section-title">Pourquoi <span class="accent-text">SimpleX</span> ?</h2>
			<FeatureGrid items={features} min="15rem" />
		</div>
	</section>

	<!-- Tableau comparatif -->
	<section class="section section-alt" aria-labelledby="compare-title">
		<div class="center stack" style:--center-max="62rem">
			<h2 id="compare-title" class="section-title">
				SimpleX <span class="vs">vs</span> les autres
			</h2>
			<CompareTable
				caption="SimpleX se distingue des messageries centralisées comme des outils fédérés : aucun identifiant, métadonnées minimisées."
				columns={['SimpleX', 'Signal', 'WhatsApp', 'Matrix']}
				rows={comparison}
				highlight={0}
				ariaLabel="Tableau comparatif SimpleX, Signal, WhatsApp et Matrix — faire défiler horizontalement si nécessaire"
			/>
		</div>
	</section>

	<!-- Cas d'usage -->
	<section class="section" aria-labelledby="usecases-title">
		<div class="center stack">
			<h2 id="usecases-title" class="section-title">Cas d'<span class="accent-text">usage</span></h2>
			<div class="usecases-cq">
				<ul class="grid" role="list" style:--grid-min="15rem">
					{#each useCases as useCase (useCase.title)}
						<li class="usecase-card">
							<span class="usecase-icon"><Icon name={useCase.icon} size={24} /></span>
							<h3>{useCase.title}</h3>
							<p>{useCase.description}</p>
						</li>
					{/each}
				</ul>
			</div>
		</div>
	</section>

	<!-- SimpleX et le Fédiverse -->
	<section class="section section-deep" aria-labelledby="fediverse-title">
		<div class="center" style:--center-max="60rem">
			<article class="fediverse-panel stack">
				<h2 id="fediverse-title">SimpleX et le <span class="accent-text">Fédiverse</span></h2>
				<p>
					SimpleX Chat n'est pas fédéré au sens ActivityPub — et c'est
					<strong>intentionnel</strong>. L'absence de fédération est un choix de design pour
					préserver la confidentialité.
				</p>
				<p>
					Cependant, SimpleX complète parfaitement le Fédiverse : utilisez Mastodon/Pleroma pour
					votre présence sociale publique, et SimpleX pour vos communications privées sensibles.
				</p>
				<ul class="cluster chips" role="list">
					{#each chips as chip (chip)}
						<li class="chip mono">{chip}</li>
					{/each}
				</ul>
			</article>
		</div>
	</section>
</div>

<style>
	.page {
		--page-accent: var(--accent-4);
		--page-accent-text: var(--accent-4-text);
		--page-accent-strong: var(--accent-4-strong);
		background: var(--surface);
	}

	/* ---------- Hero ---------- */

	.hero {
		padding-block-start: calc(var(--header-h) + var(--space-6));
		padding-block-end: var(--space-6);
	}

	.hero-inner {
		align-items: center;
		text-align: center;
		--stack-gap: var(--space-4);
	}

	.badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-pill);
		border: 1px solid color-mix(in oklch, var(--page-accent) 40%, transparent);
		background: color-mix(in oklch, var(--page-accent) 12%, transparent);
		color: var(--page-accent-text);
		font-family: var(--font-mono);
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	h1 {
		max-inline-size: 22ch;
	}

	.accent-text {
		color: var(--page-accent-text);
	}

	.lede {
		color: var(--ink-soft);
		font-size: var(--text-2);
		max-inline-size: 58ch;
	}

	.lede strong {
		color: var(--ink);
	}

	.cta {
		justify-content: center;
		--cluster-gap: var(--space-3);
	}

	.hero-stats {
		inline-size: min(100%, 34rem);
		margin-block-start: var(--space-3);
	}

	.stat-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-1);
		padding: var(--space-3);
		background: var(--glass);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid var(--glass-border);
		border-radius: var(--radius-2);
	}

	.stat-value {
		font-family: var(--font-display);
		font-size: var(--text-2);
		font-weight: 700;
		color: var(--page-accent-text);
	}

	.stat-label {
		font-size: 0.75rem;
		color: var(--ink-soft);
	}

	/* ---------- Sections ---------- */

	.section {
		padding-block: var(--space-6);
	}

	.section-alt {
		background: var(--ocean);
	}

	.section-deep {
		background: var(--abyss);
	}

	.section > .center {
		--stack-gap: var(--space-5);
	}

	.section-title {
		text-align: center;
	}

	.vs {
		color: var(--muted);
		font-weight: 400;
	}

	/* ---------- Boutons ---------- */

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-block-size: var(--tap-target);
		padding-inline: var(--space-4);
		border-radius: var(--radius-pill);
		font-weight: 600;
		font-size: var(--text-small);
		text-decoration: none;
		transition: transform var(--duration-1) var(--ease-out);
	}

	.btn:hover {
		transform: translateY(-2px);
	}

	.btn-primary {
		background: var(--page-accent-strong);
		color: var(--on-accent);
	}

	.btn-ghost {
		border: 1px solid var(--glass-border);
		background: var(--glass);
		color: var(--ink);
	}

	/* ---------- Cas d'usage ---------- */

	.usecases-cq {
		container-type: inline-size;
	}

	.usecase-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-2);
		padding: var(--space-4);
		background: var(--glass);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid var(--glass-border);
		border-radius: var(--radius-2);
	}

	.usecase-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--radius-2);
		color: var(--page-accent-text);
		background: color-mix(in oklch, var(--page-accent) 14%, transparent);
	}

	.usecase-card h3 {
		font-size: var(--text-1);
	}

	.usecase-card p {
		font-size: var(--text-small);
		color: var(--ink-soft);
	}

	@container (min-width: 40rem) {
		.usecase-card {
			align-items: flex-start;
			text-align: start;
		}
	}

	/* ---------- Panel Fédiverse ---------- */

	.fediverse-panel {
		--stack-gap: var(--space-4);
		padding: var(--space-5);
		background: var(--glass);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid var(--glass-border);
		border-radius: var(--radius-3);
	}

	.fediverse-panel p {
		color: var(--ink-soft);
	}

	.fediverse-panel p strong {
		color: var(--ink);
	}

	.chips {
		--cluster-gap: var(--space-2);
	}

	.chip {
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-pill);
		font-size: 0.75rem;
		background: color-mix(in oklch, var(--page-accent) 12%, transparent);
		color: var(--page-accent-text);
	}
</style>
