{{-- Home-page Alpine popup. Suppresses itself for 30 days via localStorage
     once the visitor either subscribes OR explicitly dismisses. Renders
     deferred (8-second delay) so it doesn't fight with first-paint. --}}
<div
    x-data="subscribePopup()"
    x-init="init()"
    x-show="open"
    x-cloak
    @keydown.escape.window="close()"
    class="fixed inset-0 z-[100] flex items-end sm:items-center justify-center bg-black/70 p-4"
    role="dialog" aria-modal="true" aria-labelledby="subscribe-popup-title">

    <div class="bg-gray-900 border border-gray-700 rounded-xl shadow-2xl w-full max-w-md p-6 relative"
         @click.outside="close()">
        <button type="button" @click="close()" aria-label="Close"
                class="absolute top-3 right-3 text-gray-400 hover:text-white">
            <i class="fa-solid fa-xmark"></i>
        </button>

        <h2 id="subscribe-popup-title" class="text-xl font-bold text-white mb-2">
            Get new devotionals by email
        </h2>
        <p class="text-sm text-gray-400 mb-4">
            Join the TTEOTK email list. Double opt-in, no spam, unsubscribe anytime.
        </p>

        <template x-if="!done">
            <form @submit.prevent="submit()" class="space-y-3">
                <div style="position:absolute;left:-9999px;" aria-hidden="true">
                    <label>Website<input type="text" x-model="form.website" tabindex="-1" autocomplete="off"></label>
                </div>
                <input type="text" placeholder="First name (optional)" x-model="form.first_name"
                       class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm">
                <input type="email" placeholder="you@example.com" required x-model="form.email"
                       class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm">
                <button type="submit" :disabled="loading"
                        class="w-full bg-red-600 hover:bg-red-700 disabled:opacity-50 text-white font-semibold py-2 rounded">
                    <span x-show="!loading">Subscribe</span>
                    <span x-show="loading">Sending…</span>
                </button>
                <p x-show="error" x-text="error" class="text-sm text-red-400"></p>
            </form>
        </template>

        <template x-if="done">
            <div class="text-center py-4">
                <p class="text-green-400 font-semibold mb-2">Thanks!</p>
                <p class="text-gray-300 text-sm" x-text="message"></p>
            </div>
        </template>
    </div>
</div>

<script>
function subscribePopup() {
    return {
        open: false,
        done: false,
        loading: false,
        error: '',
        message: '',
        form: { email: '', first_name: '', website: '' },
        STORAGE_KEY: 'tteotk_subscribe_popup_dismissed_at',
        init() {
            try {
                const last = localStorage.getItem(this.STORAGE_KEY);
                if (last && (Date.now() - parseInt(last, 10)) < 30 * 24 * 60 * 60 * 1000) return;
            } catch (e) { /* localStorage may be unavailable */ }
            setTimeout(() => { this.open = true; }, 8000);
        },
        close() {
            this.open = false;
            try { localStorage.setItem(this.STORAGE_KEY, Date.now().toString()); } catch (e) {}
        },
        async submit() {
            this.loading = true;
            this.error = '';
            try {
                const res = await fetch('{{ route('subscriptions.store') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    },
                    body: JSON.stringify({
                        email: this.form.email,
                        first_name: this.form.first_name,
                        website: this.form.website,
                        source: 'home_popup',
                    }),
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok) {
                    this.error = (data && data.message) || 'Something went wrong. Please try again.';
                } else {
                    this.done = true;
                    this.message = data.message || 'Please check your inbox to confirm.';
                    try { localStorage.setItem(this.STORAGE_KEY, Date.now().toString()); } catch (e) {}
                }
            } catch (e) {
                this.error = 'Network error. Please try again.';
            } finally {
                this.loading = false;
            }
        },
    };
}
</script>