import React from 'react';
import Navbar from './Navbar';
import Banner from './Banner';
import Quote from './Quote';
import Footer from './Footer';
import ImagesWithDescription from './ImagesWithDescription';

/**
 * @return {jsx} The root component
 */
export default function Root() {
	return (
		<React.Fragment>
			<Navbar
				main={{
					text: 'Curious Roamers',
					to: '/blog',
				}}
				sub={[
					{
						text: 'Home',
						to: '/',
					}, {
						text: 'Carnet de voyage',
						to: '/blog',
					}, {
						text: 'Qui sommes nous ?',
						to: '/about',
					}, {
						text: 'Contact',
						to: '/contact',
					},
				]}
			/>
			<Banner
				title={`Un voyage à travers l'Europe`}
				description={`
				On vous raconte nos aventures à travers l'Europe.\n
				Nous voyageons en stop et sans argent.\n
				On loge chez l'habitant ou dehors dans des hamacs.`}
				links={[
					{
						to: '/blog',
						text: 'Notre carnet de voyage',
					},
				]}
				image={'map.jpeg'}
			/>
			<ImagesWithDescription
				images={[
					{
						image: 'urbex.webp',
						title: 'Explorations',
						description: `Amateurs d'escalade et de sensations 
							fortes, nous cherchons des lieux abandonnés ou 
							difficiles d'accès.`,
					}, {
						image: 'cliff.jpeg',
						title: 'Découvertes',
						description: 'De beaux paysages, tu connais.',
					}, {
						image: 'eye.webp',
						title: 'Rencontres',
						description: `Notre voyage sera avant tout rythmé de 
							nouveaux visages. Sans personne pour nous aider 
							ce voyage aurait peu de sens.`,
					},
				]}/>
			<Quote
				quote={'Not all those who wander are lost.'}
				author={'J. R. R. Tolkien'}
				description={`
				On veut quitter notre confort pendant un moment.
				Briser nos habitudes et nos ancrages.
				Faire place à la nouveauté et l'incompréhension.`}/>
			<Footer
				elements={[
					{
						title: 'À propos',
						description: `Nous sommes deux jeunes de 23 ans à la 
						recherche d'aventures et de réponses à travers 
						l'Europe`,
						links: [
							{
								to: '/about',
								text: 'Plus de détails',
							},
						],
					}, {
						title: 'Nous contacter',
						description: `
						<ul>
							<li>curious.roamers@gmail.com</li>
							<li>06 37 11 28 22</li>
						</ul>`,
						links: [
							{
								to: '/contact',
								text: `Autres façons de nous contacter`,
							},
						],
					}, {
						title: 'Donation',
						description: `Si vous voulez contribuer à financer nos 
						futurs voyages ou simplement nous aider financièrement 
						:)`,
						links: [
							{
								to: 'https://paypal.me/ygarrot',
								text: 'Paypal',
							}, {
								to: 'https://tipeee.com/curious-roamers',
								text: 'Tipeee',
							},
						],
					},
				]}/>
		</React.Fragment>
	);
}