<script>
    import { onMount } from 'svelte'
    import Hero from "./components/Hero/Hero.svelte";
    import Services from "./components/Services/Services.svelte";
    import Footer from "./components/Footer/Footer.svelte";
    import "./styles/App.css";
    import Header from "./components/Header/Header.svelte";

    onMount(() => {
        try {
            const saved = localStorage.getItem('theme')
            if (saved) {
                document.documentElement.setAttribute('data-theme', saved)
                return
            }
            const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
            const theme = prefersDark ? 'dark' : 'light'
            document.documentElement.setAttribute('data-theme', theme)
            localStorage.setItem('theme', theme)
        } catch (e) {
            document.documentElement.setAttribute('data-theme', 'light')
        }
    })
</script>

<div class="app">
    <Header />
    <main>
        <!-- <Hero /> -->
    </main>
    <Footer />
</div>