<template>
    <Teleport to="body">
        <div class="modal-overlay" :class="{ 'is-open': open }" @click.self="$emit('close')">
            <div class="modal" style="width:560px;max-width:96vw">
                <div class="modal-header">
                    <div>
                        <h3 class="modal-title">Select a Form Type</h3>
                        <p class="modal-subtitle">Choose how visitors will see this form.</p>
                    </div>
                    <button class="modal-close" @click="$emit('close')" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div>

                <div class="modal-body" style="padding:20px;display:flex;flex-direction:column;gap:14px">
                    <Link :href="route('forms.create', { type: 'inline' })" class="sft-card">
                        <div class="sft-card__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" />
                            </svg>
                        </div>
                        <div class="sft-card__body">
                            <h4>Inline / Embedded Form</h4>
                            <p>Embed a form directly into your website or landing page's HTML.</p>
                        </div>
                        <svg class="sft-card__chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
                    </Link>

                    <Link :href="route('forms.create', { type: 'popup' })" class="sft-card">
                        <div class="sft-card__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h12A2.25 2.25 0 0120.25 6v9a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 15V6z" />
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 20.25h7.5M12 17.25v3" />
                            </svg>
                        </div>
                        <div class="sft-card__body">
                            <h4>Popup Form <span class="sft-card__badge">New</span></h4>
                            <p>Capture visitors with a popup, corner box, or top bar that appears on trigger.</p>
                        </div>
                        <svg class="sft-card__chevron" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
                    </Link>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script setup>
import { Link } from '@inertiajs/vue3';

defineProps({
    open: { type: Boolean, default: false },
});

defineEmits(['close']);
</script>

<style scoped>
.sft-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.sft-card:hover {
    border-color: #4285F4;
    box-shadow: 0 0 0 3px rgba(66,133,244,.12);
}
.sft-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bg-hover, #f3f4f6);
    color: #4285F4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sft-card__icon svg { width: 22px; height: 22px; }
.sft-card__body { flex: 1; min-width: 0; }
.sft-card__body h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 3px;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sft-card__body p {
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    margin: 0;
}
.sft-card__badge {
    font-size: 10px;
    font-weight: 700;
    color: #db2777;
    background: #fce7f3;
    border-radius: 6px;
    padding: 1px 6px;
}
.sft-card__chevron { width: 16px; height: 16px; color: #d1d5db; flex-shrink: 0; }
</style>
