<template>
    <div class="max-w-2xl mx-auto mt-12">
        <div class="bg-white border border-zinc-300 rounded-3xl p-8 text-center">
            <template v-if="success">
                <div class="flex flex-col items-center gap-3">
                    <span class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent/10 text-accent">
                        <iconify-icon class="text-2xl" icon="lucide:check"></iconify-icon>
                    </span>
                    <h3 class="text-xl font-bold font-display text-zinc-800">You're on the list</h3>
                    <p class="text-zinc-500 text-sm">We'll email you the moment price alerts go live.</p>
                </div>
            </template>

            <template v-else>
                <h3 class="text-xl font-bold font-display text-zinc-800 mb-1">Want in when alerts launch?</h3>
                <p class="text-zinc-500 text-sm mb-6">Leave your details and we'll let you know the day alerts go live.</p>

                <form class="flex flex-col sm:flex-row gap-3" @submit.prevent="onSubmit">
                    <input
                        v-model.trim="name"
                        type="text"
                        autocomplete="name"
                        placeholder="Your name"
                        required
                        :disabled="loading"
                        class="flex-1 px-4 py-3 border border-zinc-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-accent disabled:opacity-60"
                    >
                    <input
                        v-model.trim="email"
                        type="email"
                        autocomplete="email"
                        placeholder="you@example.com"
                        required
                        :disabled="loading"
                        class="flex-1 px-4 py-3 border border-zinc-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-accent disabled:opacity-60"
                    >
                    <button
                        type="submit"
                        :disabled="loading"
                        class="px-6 py-3 bg-accent text-white rounded-xl font-bold text-sm shadow-lg hover:bg-primary-dark transition-all disabled:opacity-60 disabled:cursor-not-allowed whitespace-nowrap"
                    >
                        {{ loading ? 'Joining…' : 'Notify me' }}
                    </button>
                </form>

                <p v-if="error" class="text-red-600 text-sm mt-3 text-left">{{ error }}</p>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useWaitlist } from '../composables/useWaitlist.js'

const props = defineProps({
    source: { type: String, default: 'pricing' },
})

const name = ref('')
const email = ref('')
const { loading, success, error, submit } = useWaitlist()

function onSubmit() {
    submit(name.value, email.value, props.source)
}
</script>
