<script lang="ts">
    import { toasts } from 'svelte-toasts';
    import Card from '$lib/components/Cards/Card.svelte';

    import { page } from '$app/state';
    const sent = page.url.searchParams.get('sent');

    if (sent == 'true') {
        toasts.add({
            title: 'Message sent!',
            description: 'Thank you for contacting me.',
            type: 'success',
            duration: 4000,
            placement: 'bottom-center'
        });
    }

    if (sent == 'false') {
        toasts.add({
            title: 'Message not sent!',
            description: 'Please try again later.',
            type: 'error',
            duration: 4000,
            placement: 'bottom-center'
        });
    }
</script>

<Card>
    <div slot="headerLeft">
        Contact Me
    </div>
    <!-- Contact Form -->
     <form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
        <div class="hidden">
            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
            <input type="hidden" name="replyTo" value="@">
            <input type="text" name="honeypot" style="display: none;">
            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
        </div>
        <div class="flex flex-col md:flex-row gap-3">
            <div class="flex-1">
                <label class="block text-xs font-medium mb-1" for="name">Name</label>
                <input
                    id="name"
                    name="name"
                    type="text"
                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
                    required
                    placeholder="Your name"
                />
            </div>
            <div class="flex-1">
                <label class="block text-xs font-medium mb-1" for="email">Email</label>
                <input
                    id="email"
                    name="email"
                    type="email"
                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
                    required
                    placeholder="you@email.com"
                />
            </div>
            <div class="flex-1">
                <label class="block text-xs font-medium mb-1" for="subject">Subject</label>
                <input
                    id="subject"
                    name="subject"
                    type="text"
                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
                    required
                    placeholder="Subject"
                />
            </div>
        </div>
        <div>
            <label class="block text-xs font-medium mb-1" for="message">Message</label>
            <textarea
                id="message"
                name="message"
                class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
                required
                placeholder="Your message"
            ></textarea>
        </div>
        <!-- reCAPTCHA integration -->
        <div class="">
            <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        </div>
        <button
            type="submit"
            class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
        >
            Send Message
        </button>
    </form>
</Card>
