<script lang="ts">
    import { toasts } from 'svelte-toasts';
    import { Card, Section } from '@luke-else/component-lib';

    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>

<Section label="[Contact]">
    <div>
        
    </div>
    <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-row 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>
</Section>
