<script>
    import { animate, inView } from 'motion';
    import { onMount } from 'svelte';

    const planePath = "M13 11.5V7.5L16 8.5L19 4.5L22 8.5L25 7.5V11.5L22 12.5L25 16.5L22 20.5L19 16.5L16 20.5L13 16.5V11.5Z";

    let email = '';
    let password = '';

    function handleSubmit() {
        // Add your signin logic
    }

    function floatPlane() {
        animate("#paper-plane", 
            // @ts-ignore
            { y: [-10, 10] },
            { duration: 2, repeat: Infinity, direction: "alternate" }
        );
    }

    onMount(() => {
        // Page load animations
        animate("#form-container", 
            { y: [50, 0], opacity: [0, 1] }, 
            { duration: 0.8 }
        );
        
        animate("#paper-plane", 
            { x: [-100, 0], rotate: [-45, 0] },
            { duration: 1 }
        );
        
        floatPlane();
        
        animate(".route-line", 
            { strokeDashoffset: [100, 0] },
            { duration: 2, delay: 0.5 }
        );
    });
</script>

<div class="min-h-screen bg-base-200 relative overflow-hidden">
    <!-- Background Elements -->
    <div class="absolute inset-0 opacity-10">
        <!-- Add your map/route background SVG here -->
        <svg class="w-full h-full">
            <path 
                d="M100,200 Q250,150 400,200" 
                class="route-line fill-none stroke-primary stroke-2"
                style="stroke-dasharray: 100px;"
            />
        </svg>
    </div>

    <!-- Main Content -->
    <div class="flex items-center justify-center min-h-screen">
        <!-- Paper Plane Decor -->
        <div id="paper-plane" class="absolute left-1/4 top-1/3 opacity-50">
            <svg class="w-32 h-32 text-primary" viewBox="0 0 32 32">
                <path fill="currentColor" d="{planePath}" />
            </svg>
        </div>

        <!-- Form Container -->
        <div id="form-container" class="card bg-base-100 shadow-xl w-96 relative z-10">
            <div class="card-body">
                <h2 class="card-title text-3xl mb-6">Welcome Back, Explorer! ✈️</h2>
                
                <form on:submit|preventDefault={handleSubmit}>
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Email</span>
                        </label>
                        <input 
                            type="email" 
                            bind:value={email}
                            placeholder="your.email@adventure.com" 
                            class="input input-bordered"
                        />
                    </div>

                    <div class="form-control mt-4">
                        <label class="label">
                            <span class="label-text">Password</span>
                        </label>
                        <input 
                            type="password" 
                            bind:value={password}
                            placeholder="••••••••" 
                            class="input input-bordered"
                        />
                    </div>

                    <button 
                        class="btn btn-primary mt-6 w-full"
                    >
                        Let's Travel Together! 🌍
                    </button>
                </form>

                <div class="divider my-6">New Adventurer?</div>
                
                <a 
                    href="/signup" 
                    class="btn btn-outline btn-secondary w-full"
                >
                    Create Travel Profile 🧳
                </a>


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

<style>
    /* Add custom paper texture if needed */
    .paper-texture {
        background-image: url('paper-texture.png');
        mix-blend-mode: multiply;
    }
</style>
