<script>
	// Svelte
	import { fade, slide } from 'svelte/transition'
	import { site, currentLocation } from '../store'

	// Components
	import Locations from '../components/Locations.svelte'

	// Reset current location
	currentLocation.set(undefined)
</script>

<div class="container" in:fade out:slide>
	<section class="section">
		<h1 class="title is-2">Houses Of</h1>
		<div class="message is-link">
			<div class="message-body">{$site.description}</div>
		</div>
	</section>

	<div class="section">
		<h2 class="title is-4">Choose on globe</h2>
		<div class="content">
			<p>{$site.explore_globe}</p>
			<p>[globe]</p>
		</div>
	</div>

	<div class="section">
		<h2 class="title is-4">Choose from list</h2>
		<div class="content">
			<p>{$site.explore_list}</p>
		</div>

		<Locations />
	</div>
</div>
