import { Switch, Route } from "wouter";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import NotFound from "@/pages/not-found";

import { Desktop } from "@/pages/Desktop";
import { About } from "@/pages/About";
import { News } from "@/pages/News";
import { Contact } from "@/pages/Contact";
import { SupportUs } from "@/pages/SupportUs";
import { Privacy } from "@/pages/Privacy";
import { NewsArticle } from "@/pages/NewsArticle";
import { Facebook } from "@/pages/Facebook";
import { Accessibility } from "@/pages/Accessibility";

function Router() {
    return (
        <Switch>
            {/* Add pages below */}
            <Route path="/" component={Desktop} />
            <Route path="/about" component={About} />
            <Route path="/events" component={News} />
            <Route path="/events/:slug" component={NewsArticle} />
            <Route path="/facebook" component={Facebook} />
            <Route path="/accessibility" component={Accessibility} />
            <Route path="/support-us" component={SupportUs} />
            <Route path="/contact" component={Contact} />
            <Route path="/privacy" component={Privacy} />
            {/* Fallback to 404 */}
            <Route component={NotFound} />
        </Switch>
    );
}

function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <TooltipProvider>
                <Toaster />
                <div
                    className="snow-banner"
                    role="region"
                    aria-label="Holiday announcement"
                >
                    <div className="snow-banner__snow" aria-hidden="true">
                        <span className="snowflake snowflake-1" />
                        <span className="snowflake snowflake-2" />
                        <span className="snowflake snowflake-3" />
                        <span className="snowflake snowflake-4" />
                        <span className="snowflake snowflake-5" />
                        <span className="snowflake snowflake-6" />
                        <span className="snowflake snowflake-7" />
                        <span className="snowflake snowflake-8" />
                    </div>
                    <a
                        className="snow-banner__link"
                        href="https://www.amazon.co.uk/hz/wishlist/ls/2B4R5YZQ8U4B2?ref_=wl_share"
                        target="_blank"
                        rel="noreferrer"
                    >
                        The ponies have had a chat and put together an Amazon
                        Wish-List for Christmas! Click here
                    </a>
                </div>
                <Router />
            </TooltipProvider>
        </QueryClientProvider>
    );
}

export default App;