<script lang="ts">
    import Router, { route } from "./lib/components/Router.svelte";
    import "./app.css";

    import HomePage from "./pages/HomePage.svelte";
    import ToastProvider from "./lib/components/toast/ToastProvider.svelte";
    import Navigation from "./Navigation.svelte";
    import Footer from "./Footer.svelte";
    import TaxiPage from "./pages/TaxiPage.svelte";
    import BusPage from "./pages/BusPage.svelte";
    import ContactPage from "./pages/ContactPage.svelte";
    import AccessibilityPage from "./pages/AccessibilityPage.svelte";
    import { getTheme } from "./lib/theme.svelte";

    route("/", HomePage);
    route("/taxi", TaxiPage);
    route("/bus", BusPage);
    route("/contact", ContactPage);
    route("/accessibility", AccessibilityPage);

    $effect(() => {
        document.body.dataset.theme = getTheme();
    });
</script>

<div class="flex min-h-screen flex-col bg-primary-200 text-contrast-900">
    <Navigation>
        <main class="grow px-4 pb-16 pt-8">
            <div class="mx-auto max-w-7xl">
                <Router>
                    {#snippet notfound()}
                        <h1>Not found</h1>
                        <p>Sorry, the page you are looking for does not exist.</p>
                        <p>Return to <a href="/">home</a>.</p>
                    {/snippet}
                </Router>
            </div>
        </main>

        <Footer />
    </Navigation>
</div>
<ToastProvider />
