<script>
    import { onMount } from 'svelte';

    let selectedTheme = 'light'; // Default theme

    // Load the saved theme from local storage on mount
    onMount(() => {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            selectedTheme = savedTheme;
            applyTheme(savedTheme); // Apply the saved theme
        }
    });

    function changeTheme(event) {
        selectedTheme = event.target.value;
        localStorage.setItem('theme', selectedTheme); // Save theme to local storage
        applyTheme(selectedTheme); // Apply the selected theme
    }
</script>

<main class="min-h-screen flex flex-col">
    <!-- Theme Selection -->
    <div class="absolute top-5 right-5 z-10">
        <div class="dropdown mb-72">
            <label tabIndex={0} class="btn m-1">
                Theme
                <svg
                    width="12px"
                    height="12px"
                    class="inline-block h-2 w-2 fill-current opacity-60"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 2048 2048">
                    <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
                </svg>
            </label>
            <ul tabIndex={0} class="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl">
                <li>
                    <input
                        type="radio"
                        name="theme-dropdown"
                        class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                        aria-label="Light"
                        value="light"
                        bind:group={selectedTheme}
                        on:change={changeTheme} />
                    <span class="ml-2">Light</span>
                </li>
                <li>
                    <input
                        type="radio"
                        name="theme-dropdown"
                        class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                        aria-label="Dark"
                        value="dark"
                        bind:group={selectedTheme}
                        on:change={changeTheme} />
                    <span class="ml-2">Dark</span>
                </li>
                <li>
                    <input
                        type="radio"
                        name="theme-dropdown"
                        class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                        aria-label="Cupcake"
                        value="cupcake"
                        bind:group={selectedTheme}
                        on:change={changeTheme} />
                    <span class="ml-2">Cupcake</span>
                </li>
                <li>
                    <input
                        type="radio"
                        name="theme-dropdown"
                        class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                        aria-label="Business"
                        value="business"
                        bind:group={selectedTheme}
                        on:change={changeTheme} />
                    <span class="ml-2">Business</span>
                </li>
                <li>
                    <input
                        type="radio"
                        name="theme-dropdown"
                        class="theme-controller btn btn-sm btn-block btn-ghost justify-start"
                        aria-label="Wireframe"
                        value="wireframe"
                        bind:group={selectedTheme}
                        on:change={changeTheme} />
                    <span class="ml-2">Wireframe</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="hero bg-base-200 flex items-center justify-center text-center p-10">
        <div class="max-w-3xl">
            <h1 class="text-5xl font-bold">Welcome to Redot Engine</h1>
            <p class="mt-4 text-xl">The intuitive game engine for everyone.</p>
            <a href="/get-started" class="btn btn-primary mt-6">Get Started</a>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features py-20">
        <h2 class="text-4xl font-bold text-center mb-10">Key Features</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10 px-5">
            <div class="card bg-base-100 shadow-lg p-5">
                <div class="card-body">
                    <h3 class="text-xl font-semibold">Feature 1</h3>
                    <p>Description of feature 1. Explain what makes it unique.</p>
                </div>
            </div>
            <div class="card bg-base-100 shadow-lg p-5">
                <div class="card-body">
                    <h3 class="text-xl font-semibold">Feature 2</h3>
                    <p>Description of feature 2. Highlight its benefits.</p>
                </div>
            </div>
            <div class="card bg-base-100 shadow-lg p-5">
                <div class="card-body">
                    <h3 class="text-xl font-semibold">Feature 3</h3>
                    <p>Description of feature 3. Mention any relevant details.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Section -->
    <footer class="footer bg-base-300 p-10">
        <div class="container mx-auto text-center">
            <p class="text-gray-600">© 2024 Redot Engine. All rights reserved.</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="#" class="link">Privacy Policy</a>
                <a href="#" class="link">Terms of Service</a>
            </div>
        </div>
    </footer>
</main>

<style>
    .hero {
        min-height: 60vh;
    }
</style>