@extends('layouts.app')

@section('title', 'JSON-LD Schema Generator - Toolbox')
@section('meta_description',
    'Boost SEO with valid JSON-LD structure data. Generate schema markup for Articles, FAQs,
    Local Business, How-To, and more.')

@section('content')
    <div class="max-w-6xl mx-auto space-y-8" x-data="schemaGenerator()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">JSON-LD Schema Generator</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Boost your SEO with structured data. Generate valid JSON-LD markup for Google Rich Results in seconds.
            </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-8">
            <!-- Left Column: Inputs -->
            <div class="space-y-6">
                <!-- Type Selector -->
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-4">
                    <label class="block text-sm font-medium text-slate-300 mb-2">Select Schema Type</label>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                        <template x-for="type in schemaTypes" :key="type.id">
                            <button @click="selectedType = type.id; generate()"
                                class="px-3 py-2 rounded-lg text-sm font-medium transition-all text-left flex items-center gap-2"
                                :class="selectedType === type.id ? 'bg-indigo-600 text-white shadow-lg' :
                                    'bg-slate-950 text-slate-400 hover:text-slate-200 hover:bg-slate-900'">
                                <span x-html="type.icon"></span>
                                <span x-text="type.label"></span>
                            </button>
                        </template>
                    </div>
                </div>

                <!-- Dynamic Form -->
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-6 space-y-4">
                    <div class="flex items-center justify-between border-b border-white/5 pb-4 mb-4">
                        <h3 class="text-lg font-semibold text-white"
                            x-text="schemaTypes.find(t => t.id === selectedType).label + ' Details'"></h3>
                        <button @click="resetForm()" class="text-xs text-red-400 hover:text-red-300">Reset</button>
                    </div>

                    <!-- FAQ Page Fields -->
                    <div x-show="selectedType === 'faq'" class="space-y-4">
                        <template x-for="(item, index) in checkData('faq', [])" :key="index">
                            <div class="space-y-2 p-4 rounded-xl bg-slate-950/50 border border-white/5 relative group">
                                <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    <button @click="removeItem('faq', index)" class="text-slate-500 hover:text-red-400">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </div>
                                <div>
                                    <label class="text-xs font-medium text-slate-400">Question</label>
                                    <input type="text" x-model="item.question" @input="generate()"
                                        class="w-full rounded-lg bg-slate-900 border-white/10 text-slate-200 text-sm px-3 py-2 focus:ring-indigo-500/50">
                                </div>
                                <div>
                                    <label class="text-xs font-medium text-slate-400">Answer</label>
                                    <textarea x-model="item.answer" @input="generate()" rows="2"
                                        class="w-full rounded-lg bg-slate-900 border-white/10 text-slate-200 text-sm px-3 py-2 focus:ring-indigo-500/50 resize-none"></textarea>
                                </div>
                            </div>
                        </template>
                        <button @click="addItem('faq', {question: '', answer: ''})"
                            class="w-full py-2 rounded-lg border border-dashed border-slate-600 text-slate-400 hover:border-indigo-500 hover:text-indigo-400 text-sm font-medium transition-colors">
                            + Add Question
                        </button>
                    </div>

                    <!-- Article Fields -->
                    <div x-show="selectedType === 'article'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Headline</label>
                            <input type="text" x-model="formData.article.headline" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Image URL</label>
                            <input type="url" x-model="formData.article.image" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Author Name</label>
                                <input type="text" x-model="formData.article.author" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Publisher Name</label>
                                <input type="text" x-model="formData.article.publisher" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Date Published</label>
                            <input type="date" x-model="formData.article.datePublished" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                    </div>

                    <!-- Product Fields -->
                    <div x-show="selectedType === 'product'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Product Name</label>
                            <input type="text" x-model="formData.product.name" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Image URL</label>
                            <input type="url" x-model="formData.product.image" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Description</label>
                            <textarea x-model="formData.product.description" @input="generate()" rows="2"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 resize-none"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Brand</label>
                                <input type="text" x-model="formData.product.brand" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">SKU</label>
                                <input type="text" x-model="formData.product.sku" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Price</label>
                                <input type="number" x-model="formData.product.price" @input="generate()"
                                    step="0.01"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2 col-span-2">
                                <label class="text-sm font-medium text-slate-300">Currency (e.g. USD)</label>
                                <input type="text" x-model="formData.product.currency" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 uppercase">
                            </div>
                        </div>
                    </div>

                    <!-- Event Fields -->
                    <div x-show="selectedType === 'event'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Event Name</label>
                            <input type="text" x-model="formData.event.name" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Start Date</label>
                                <input type="datetime-local" x-model="formData.event.startDate" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">End Date</label>
                                <input type="datetime-local" x-model="formData.event.endDate" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Location Name (Venue)</label>
                            <input type="text" x-model="formData.event.locationName" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Address</label>
                            <input type="text" x-model="formData.event.locationAddress" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                    </div>

                    <!-- Organization Fields -->
                    <div x-show="selectedType === 'organization'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Organization Name</label>
                            <input type="text" x-model="formData.organization.name" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Website URL</label>
                            <input type="url" x-model="formData.organization.url" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Logo URL</label>
                            <input type="url" x-model="formData.organization.logo" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">SameAs (Social Profiles)</label>
                            <div class="text-xs text-slate-500 mb-1">Enter one URL per line</div>
                            <textarea x-model="formData.organization.sameAs" @input="generate()" rows="3"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 resize-none"></textarea>
                        </div>
                    </div>

                    <!-- Recipe Fields -->
                    <div x-show="selectedType === 'recipe'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Recipe Name</label>
                            <input type="text" x-model="formData.recipe.name" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Image URL</label>
                            <input type="url" x-model="formData.recipe.image" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Description</label>
                            <textarea x-model="formData.recipe.description" @input="generate()" rows="2"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 resize-none"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Author</label>
                                <input type="text" x-model="formData.recipe.author" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Yield (Servings)</label>
                                <input type="text" x-model="formData.recipe.yield" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Prep Time (mins)</label>
                                <input type="number" x-model="formData.recipe.prepTime" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Cook Time (mins)</label>
                                <input type="number" x-model="formData.recipe.cookTime" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Ingredients (One per line)</label>
                            <textarea x-model="formData.recipe.ingredients" @input="generate()" rows="4"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 resize-none"></textarea>
                        </div>
                    </div>

                    <!-- Job Posting Fields -->
                    <div x-show="selectedType === 'jobPosting'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Job Title</label>
                            <input type="text" x-model="formData.jobPosting.title" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Description</label>
                            <textarea x-model="formData.jobPosting.description" @input="generate()" rows="3"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 resize-none"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Company</label>
                                <input type="text" x-model="formData.jobPosting.company" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Location (City, State)</label>
                                <input type="text" x-model="formData.jobPosting.location" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Date Posted</label>
                                <input type="date" x-model="formData.jobPosting.datePosted" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium text-slate-300">Valid Through</label>
                                <input type="date" x-model="formData.jobPosting.validThrough" @input="generate()"
                                    class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                            </div>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Employment Type</label>
                            <select x-model="formData.jobPosting.employmentType" @change="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                                <option value="FULL_TIME">Full Time</option>
                                <option value="PART_TIME">Part Time</option>
                                <option value="CONTRACTOR">Contractor</option>
                                <option value="TEMPORARY">Temporary</option>
                                <option value="INTERN">Intern</option>
                            </select>
                        </div>
                    </div>

                    <!-- Person Fields -->
                    <div x-show="selectedType === 'person'" class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Name</label>
                            <input type="text" x-model="formData.person.name" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Job Title</label>
                            <input type="text" x-model="formData.person.jobTitle" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Image URL</label>
                            <input type="url" x-model="formData.person.image" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Website URL</label>
                            <input type="url" x-model="formData.person.url" @input="generate()"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2">
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">SameAs (Social Profiles)</label>
                            <div class="text-xs text-slate-500 mb-1">Enter one URL per line</div>
                            <textarea x-model="formData.person.sameAs" @input="generate()" rows="3"
                                class="w-full rounded-lg bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-2 resize-none"></textarea>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Right Column: Output -->
            <div class="space-y-4">
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-4 flex flex-col h-full sticky top-24">
                    <div class="flex items-center justify-between mb-4">
                        <label class="text-sm font-medium text-emerald-400">JSON-LD Code</label>
                        <button @click="copyOutput"
                            class="text-xs flex items-center gap-1 transition-colors px-3 py-1.5 rounded-lg border"
                            :class="copied ? 'text-emerald-400 border-emerald-500/20 bg-emerald-500/10' :
                                'text-indigo-400 border-transparent hover:text-indigo-300 hover:bg-white/5'">
                            <span x-text="copied ? 'Copied!' : 'Copy Code'"></span>
                            <template x-if="!copied">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                </svg>
                            </template>
                            <template x-if="copied">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 13l4 4L19 7" />
                                </svg>
                            </template>
                        </button>
                    </div>

                    <div class="relative flex-grow">
                        <textarea x-model="outputText" readonly
                            class="w-full h-full min-h-[500px] rounded-xl bg-slate-950/50 border-emerald-500/20 text-emerald-100/80 focus:border-emerald-500 focus:ring-emerald-500/20 font-mono text-xs sm:text-sm p-4 resize-none"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Panel: Why use Schema? -->
        <div class="mt-12 bg-slate-900/30 rounded-3xl border border-white/5 p-8">
            <h2 class="text-2xl font-bold text-white mb-6 text-center">Why use JSON-LD Schema?</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Rich Snippets -->
                <div class="space-y-4">
                    <div
                        class="h-40 bg-slate-950 rounded-xl border border-white/10 p-4 flex flex-col justify-center relative overflow-hidden group">
                        <!-- Mock Google Result -->
                        <div class="space-y-2 opacity-80 group-hover:opacity-100 transition-opacity">
                            <div class="text-xs text-slate-500">www.example.com › products</div>
                            <div class="text-indigo-400 text-sm font-medium hover:underline cursor-pointer">Best Wireless
                                Headphones 2024</div>
                            <div class="flex items-center gap-1 text-xs text-amber-400">
                                <span>★★★★★</span>
                                <span class="text-slate-500 ml-1">4.8 (1,240)</span>
                            </div>
                            <div class="text-xs text-slate-400 line-clamp-2">
                                $299.00 - In stock. Experience premium sound quality with our...
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-white mb-2">Get Star Ratings</h3>
                        <p class="text-slate-400 text-sm">
                            Product schema helps Google display price, availability, and star ratings directly in search
                            results, increasing click-through rates.
                        </p>
                    </div>
                </div>

                <!-- FAQ Expanders -->
                <div class="space-y-4">
                    <div
                        class="h-40 bg-slate-950 rounded-xl border border-white/10 p-4 flex flex-col justify-center relative overflow-hidden group">
                        <div class="space-y-2 opacity-80 group-hover:opacity-100 transition-opacity">
                            <div class="text-xs text-slate-500">www.example.com › faq</div>
                            <div class="text-indigo-400 text-sm font-medium hover:underline cursor-pointer">Frequent
                                Questions</div>
                            <div class="space-y-1 mt-2">
                                <div
                                    class="flex items-center justify-between text-xs text-slate-300 border-b border-white/5 pb-1">
                                    <span>What is the return policy?</span>
                                    <svg class="w-3 h-3 text-slate-500" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7" />
                                    </svg>
                                </div>
                                <div
                                    class="flex items-center justify-between text-xs text-slate-300 border-b border-white/5 pb-1">
                                    <span>Do you offer free shipping?</span>
                                    <svg class="w-3 h-3 text-slate-500" fill="none" viewBox="0 0 24 24"
                                        stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-white mb-2">Dominate Page Space</h3>
                        <p class="text-slate-400 text-sm">
                            FAQ schema allows your questions and answers to appear in a collapsible list below your link,
                            taking up more vertical space in SERPs.
                        </p>
                    </div>
                </div>

                <!-- Recipe Cards -->
                <div class="space-y-4">
                    <div
                        class="h-40 bg-slate-950 rounded-xl border border-white/10 p-4 flex flex-col justify-center relative overflow-hidden group">
                        <div class="flex gap-3 opacity-80 group-hover:opacity-100 transition-opacity">
                            <div
                                class="w-16 h-16 bg-slate-800 rounded-md flex items-center justify-center text-indigo-400/50">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
                                </svg>
                            </div>
                            <div class="flex-1 space-y-1">
                                <div class="text-indigo-400 text-sm font-medium hover:underline cursor-pointer">Classic
                                    Chocolate Cake</div>
                                <div class="text-xs text-slate-400">A rich, moist chocolate cake recipe...</div>
                                <div class="flex items-center gap-2 text-[10px] text-slate-500 mt-1">
                                    <span class="flex items-center gap-0.5"><svg class="w-3 h-3" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg> 45 min</span>
                                    <span class="flex items-center gap-0.5"><svg class="w-3 h-3 text-amber-400"
                                            fill="currentColor" viewBox="0 0 24 24">
                                            <path
                                                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                                        </svg> 4.9</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-white mb-2">Recipe Cards</h3>
                        <p class="text-slate-400 text-sm">
                            Events and Recipes get special visual treatment with images, times, and dates displayed
                            prominently in the "carousel" at the top of results.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('schemaGenerator', () => ({
                selectedType: 'faq',
                schemaTypes: [{
                        id: 'faq',
                        label: 'FAQ Page',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
                    },
                    {
                        id: 'article',
                        label: 'Article',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>'
                    },
                    {
                        id: 'product',
                        label: 'Product',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>'
                    },
                    {
                        id: 'event',
                        label: 'Event',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>'
                    },
                    {
                        id: 'organization',
                        label: 'Organization',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>'
                    },
                    {
                        id: 'recipe',
                        label: 'Recipe',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>'
                    },
                    {
                        id: 'jobPosting',
                        label: 'Job Posting',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>'
                    },
                    {
                        id: 'person',
                        label: 'Person',
                        icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>'
                    }
                ],
                formData: {
                    faq: [{
                        question: '',
                        answer: ''
                    }],
                    article: {
                        headline: '',
                        image: '',
                        author: '',
                        publisher: '',
                        datePublished: ''
                    },
                    product: {
                        name: '',
                        image: '',
                        description: '',
                        brand: '',
                        sku: '',
                        price: '',
                        currency: 'USD'
                    },
                    event: {
                        name: '',
                        startDate: '',
                        endDate: '',
                        locationName: '',
                        locationAddress: ''
                    },
                    organization: {
                        name: '',
                        url: '',
                        logo: '',
                        sameAs: ''
                    },
                    recipe: {
                        name: '',
                        image: '',
                        description: '',
                        author: '',
                        cookTime: '',
                        prepTime: '',
                        yield: '',
                        ingredients: ''
                    },
                    jobPosting: {
                        title: '',
                        description: '',
                        company: '',
                        location: '',
                        datePosted: '',
                        validThrough: '',
                        employmentType: 'FULL_TIME'
                    },
                    person: {
                        name: '',
                        url: '',
                        image: '',
                        jobTitle: '',
                        sameAs: ''
                    }
                },
                outputText: '',
                copied: false,

                init() {
                    this.generate();
                },

                checkData(type, defaultVal) {
                    if (!this.formData[type]) this.formData[type] = defaultVal;
                    return this.formData[type];
                },

                addItem(type, item) {
                    if (Array.isArray(this.formData[type])) {
                        this.formData[type].push(item);
                        this.generate();
                    }
                },

                removeItem(type, index) {
                    if (Array.isArray(this.formData[type]) && this.formData[type].length > 1) {
                        this.formData[type].splice(index, 1);
                        this.generate();
                    }
                },

                resetForm() {
                    if (this.selectedType === 'faq') {
                        this.formData.faq = [{
                            question: '',
                            answer: ''
                        }];
                    } else if (this.selectedType === 'article') {
                        this.formData.article = {
                            headline: '',
                            image: '',
                            author: '',
                            publisher: '',
                            datePublished: ''
                        };
                    } else if (this.selectedType === 'product') {
                        this.formData.product = {
                            name: '',
                            image: '',
                            description: '',
                            brand: '',
                            sku: '',
                            price: '',
                            currency: 'USD'
                        };
                    } else if (this.selectedType === 'event') {
                        this.formData.event = {
                            name: '',
                            startDate: '',
                            endDate: '',
                            locationName: '',
                            locationAddress: ''
                        };
                    } else if (this.selectedType === 'organization') {
                        this.formData.organization = {
                            name: '',
                            url: '',
                            logo: '',
                            sameAs: ''
                        };
                    } else if (this.selectedType === 'recipe') {
                        this.formData.recipe = {
                            name: '',
                            image: '',
                            description: '',
                            author: '',
                            cookTime: '',
                            prepTime: '',
                            yield: '',
                            ingredients: ''
                        };
                    } else if (this.selectedType === 'jobPosting') {
                        this.formData.jobPosting = {
                            title: '',
                            description: '',
                            company: '',
                            location: '',
                            datePosted: '',
                            validThrough: '',
                            employmentType: 'FULL_TIME'
                        };
                    } else if (this.selectedType === 'person') {
                        this.formData.person = {
                            name: '',
                            url: '',
                            image: '',
                            jobTitle: '',
                            sameAs: ''
                        };
                    }
                    this.generate();
                },

                generate() {
                    let schema = {};

                    if (this.selectedType === 'faq') {
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "FAQPage",
                            "mainEntity": this.formData.faq.map(item => ({
                                "\u0040type": "Question",
                                "name": item.question,
                                "acceptedAnswer": {
                                    "\u0040type": "Answer",
                                    "text": item.answer
                                }
                            }))
                        };
                    } else if (this.selectedType === 'article') {
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "Article",
                            "headline": this.formData.article.headline,
                            "image": this.formData.article.image ? [this.formData.article.image] :
                            [],
                            "datePublished": this.formData.article.datePublished,
                            "author": {
                                "\u0040type": "Person",
                                "name": this.formData.article.author
                            },
                            "publisher": {
                                "\u0040type": "Organization",
                                "name": this.formData.article.publisher,
                            }
                        };
                    } else if (this.selectedType === 'product') {
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "Product",
                            "name": this.formData.product.name,
                            "image": this.formData.product.image ? [this.formData.product.image] :
                            [],
                            "description": this.formData.product.description,
                            "brand": {
                                "\u0040type": "Brand",
                                "name": this.formData.product.brand
                            },
                            "sku": this.formData.product.sku,
                            "offers": {
                                "\u0040type": "Offer",
                                "url": "",
                                "priceCurrency": this.formData.product.currency,
                                "price": this.formData.product.price,
                                "availability": "https://schema.org/InStock"
                            }
                        };
                    } else if (this.selectedType === 'event') {
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "Event",
                            "name": this.formData.event.name,
                            "startDate": this.formData.event.startDate,
                            "endDate": this.formData.event.endDate,
                            "eventStatus": "https://schema.org/EventScheduled",
                            "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
                            "location": {
                                "\u0040type": "Place",
                                "name": this.formData.event.locationName,
                                "address": {
                                    "\u0040type": "PostalAddress",
                                    "streetAddress": this.formData.event.locationAddress
                                }
                            }
                        };
                    } else if (this.selectedType === 'organization') {
                        const sameAs = this.formData.organization.sameAs.split('\n').filter(l => l
                            .trim() !== '');
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "Organization",
                            "name": this.formData.organization.name,
                            "url": this.formData.organization.url,
                            "logo": this.formData.organization.logo,
                            "sameAs": sameAs
                        };
                    } else if (this.selectedType === 'recipe') {
                        const ingredients = this.formData.recipe.ingredients.split('\n').filter(l => l
                            .trim() !== '');
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "Recipe",
                            "name": this.formData.recipe.name,
                            "image": this.formData.recipe.image ? [this.formData.recipe.image] : [],
                            "description": this.formData.recipe.description,
                            "author": {
                                "\u0040type": "Person",
                                "name": this.formData.recipe.author
                            },
                            "cookTime": this.formData.recipe.cookTime ? 'PT' + this.formData.recipe
                                .cookTime + 'M' : undefined,
                            "prepTime": this.formData.recipe.prepTime ? 'PT' + this.formData.recipe
                                .prepTime + 'M' : undefined,
                            "recipeYield": this.formData.recipe.yield,
                            "recipeIngredient": ingredients
                        };
                    } else if (this.selectedType === 'jobPosting') {
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "JobPosting",
                            "title": this.formData.jobPosting.title,
                            "description": this.formData.jobPosting.description,
                            "hiringOrganization": {
                                "\u0040type": "Organization",
                                "name": this.formData.jobPosting.company
                            },
                            "jobLocation": {
                                "\u0040type": "Place",
                                "address": {
                                    "\u0040type": "PostalAddress",
                                    "addressLocality": this.formData.jobPosting.location
                                }
                            },
                            "datePosted": this.formData.jobPosting.datePosted,
                            "validThrough": this.formData.jobPosting.validThrough,
                            "employmentType": this.formData.jobPosting.employmentType
                        };
                    } else if (this.selectedType === 'person') {
                        const sameAs = this.formData.person.sameAs.split('\n').filter(l => l.trim() !==
                            '');
                        schema = {
                            "\u0040context": "https://schema.org",
                            "\u0040type": "Person",
                            "name": this.formData.person.name,
                            "url": this.formData.person.url,
                            "image": this.formData.person.image,
                            "jobTitle": this.formData.person.jobTitle,
                            "sameAs": sameAs
                        };
                    }

                    this.outputText = '<' + 'script type="application/ld+json">\n' + JSON.stringify(
                        schema, null, 2) + '\n' + '<' + '/script>';
                },

                copyOutput() {
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(this.outputText).then(() => {
                            this.copied = true;
                            setTimeout(() => this.copied = false, 2000);
                        });
                    } else {
                        // Fallback
                        const textArea = document.createElement("textarea");
                        textArea.value = this.outputText;
                        textArea.style.position = "fixed";
                        textArea.style.left = "-9999px";
                        document.body.appendChild(textArea);
                        textArea.focus();
                        textArea.select();
                        document.execCommand('copy');
                        document.body.removeChild(textArea);
                        this.copied = true;
                        setTimeout(() => this.copied = false, 2000);
                    }
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-6xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.sitemap.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">XML
                Sitemap Generator</a>
            <a href="{{ route('tools.robots.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Visual
                Robots.txt Builder</a>
        </div>
    </div>
@endsection