<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import Icon from '$lib/components/Icon.svelte';
	import { SITE, contact } from '$lib/data/gong';
	import { webPage } from '$lib/seo';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Contact', path: '/contact/' }
	];

	const contactNode = {
		'@type': 'ContactPage',
		'@id': `${SITE.url}/contact/#contactpage`,
		url: `${SITE.url}/contact/`,
		name: 'Contact — GONG',
		isPartOf: { '@id': `${SITE.url}/#website` },
		about: { '@id': `${SITE.url}/#organization` },
		inLanguage: 'fr-FR'
	};

	const canaux = [
		{ icon: 'mail', label: 'E-mail (ProtonMail)', valeur: contact.email, href: `mailto:${contact.email}`, ext: false },
		{ icon: 'globe', label: 'Bokante — réseau social', valeur: 'GONG', href: contact.bokante, ext: true },
		{ icon: 'video', label: 'Gade — chaîne vidéo (PeerTube)', valeur: 'GONG TV', href: contact.gade, ext: true },
		{ icon: 'book', label: 'Code source du site (forge)', valeur: 'labola.o-k-i.net', href: contact.forge, ext: true }
	];
</script>

<Seo
	title="Contact"
	description="Contacter le GONG et l'équipe éditoriale du site : e-mail ProtonMail, réseau social Bokantaj, chaîne vidéo Gade et code source sur la forge de l'écosystème OKI."
	path="/contact/"
	graph={[webPage('/contact/', 'Contact — GONG', 'Nous contacter.'), contactNode]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Contact</h1>
		<p class="lecture intro">
			Une question, une correction, un témoignage ou une archive à partager ? Écrivez-nous. Ce site
			est un travail de mémoire ouvert et évolutif.
		</p>

		<ul class="canaux">
			{#each canaux as c (c.href)}
				<li>
					<a
						class="card card--link"
						href={c.href}
						rel={c.ext ? 'external noopener noreferrer' : undefined}
						target={c.ext ? '_blank' : undefined}
					>
						<Icon name={c.icon} size="1.6rem" />
						<h2>{c.label}</h2>
						<p>{c.valeur}</p>
					</a>
				</li>
			{/each}
		</ul>

		<address class="adresse lecture">
			<h2>Éditeur</h2>
			<p>
				ORGANISATION KA INTERNATIONALE<br />
				36 rue Lethière, 97100 Basse-Terre, Guadeloupe<br />
				<a href="mailto:{contact.emailOKI}">{contact.emailOKI}</a>
			</p>
		</address>
	</div>
</main>

<style>
	.intro {
		color: var(--muted);
		margin-bottom: var(--space-4);
	}
	.canaux {
		list-style: none;
		margin: 0 0 var(--space-5);
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--space-3);
	}
	.canaux h2 {
		font-size: 1.05rem;
		text-transform: none;
		margin: 0.6rem 0 0.2rem;
	}
	.canaux p {
		color: var(--muted);
		margin: 0;
	}
	.adresse {
		font-style: normal;
	}
	.adresse h2 {
		font-size: 1.1rem;
	}
	.adresse p {
		color: var(--muted);
	}
</style>
