@php
    $faqItems = old('faq', $item?->faq ?? []);
    if (! is_array($faqItems)) {
        $faqItems = [];
    }
@endphp

<section id="basics" class="home-seo-card space-y-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Basics</h3>
        <p class="text-xs text-slate-500">Role title, URL slug, and optional link to a service page.</p>
    </div>
    <div class="home-field-grid">
        <div class="span-2">
            <label class="home-label">Title</label>
            <input type="text" name="title" value="{{ old('title', $item?->title) }}" required class="home-input" placeholder="e.g. Virtual Assistant">
            @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Slug</label>
            <input type="text" name="slug" value="{{ old('slug', $item?->slug) }}" required class="home-input" placeholder="virtual-assistant">
            @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Linked service</label>
            <select name="service_id" class="home-select">
                <option value="">None</option>
                @foreach ($services as $service)
                    <option value="{{ $service->id }}" @selected((string) old('service_id', $item?->service_id) === (string) $service->id)>
                        {{ $service->title }}
                    </option>
                @endforeach
            </select>
        </div>
    </div>
</section>

<section id="copy" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Copy</h3>
        <p class="text-xs text-slate-500">Description and requirements shown on the public hire page.</p>
    </div>
    <div>
        <label class="home-label">Description</label>
        <textarea name="description" rows="5" class="home-textarea" placeholder="What this role covers for Australian businesses">{{ old('description', $item?->description) }}</textarea>
    </div>
    <div>
        <label class="home-label">Requirements</label>
        <textarea name="requirements" rows="5" class="home-textarea" placeholder="Skills, tools, and standards candidates must meet">{{ old('requirements', $item?->requirements) }}</textarea>
    </div>
</section>

<section id="faq" class="home-seo-card space-y-4 mt-4"
         x-data="{
            items: @js(array_values($faqItems) ?: [['question' => '', 'answer' => '']]),
            add() { this.items.push({ question: '', answer: '' }) },
            remove(i) { this.items.splice(i, 1); if (!this.items.length) this.add() }
         }">
    <div class="flex items-start justify-between gap-3">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">FAQ</h3>
            <p class="text-xs text-slate-500">Common questions for this talent role.</p>
        </div>
        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="add()">+ Add FAQ</button>
    </div>
    <div class="home-repeat">
        <template x-for="(row, index) in items" :key="index">
            <div class="home-repeat__item">
                <div class="mb-2 flex items-center justify-between">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">FAQ item</p>
                    <button type="button" class="text-xs font-semibold text-red-600" @click="remove(index)">Remove</button>
                </div>
                <div class="space-y-3">
                    <div>
                        <label class="home-label">Question</label>
                        <input type="text" class="home-input" :name="'faq['+index+'][question]'" x-model="row.question" placeholder="e.g. How fast can I hire?">
                    </div>
                    <div>
                        <label class="home-label">Answer</label>
                        <textarea rows="2" class="home-textarea" :name="'faq['+index+'][answer]'" x-model="row.answer" placeholder="Short helpful answer"></textarea>
                    </div>
                </div>
            </div>
        </template>
    </div>
</section>

<section id="publish" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Publish</h3>
        <p class="text-xs text-slate-500">Control visibility on hire pages and homepage talent lists.</p>
    </div>
    <div class="home-field-grid">
        <div>
            <label class="home-label">Status</label>
            <select name="is_active" class="home-select">
                <option value="1" @selected((string) old('is_active', $item?->is_active ?? true) === '1' || old('is_active', $item?->is_active ?? true) === true)>Active</option>
                <option value="0" @selected((string) old('is_active', $item?->is_active ?? true) === '0' || old('is_active', $item?->is_active ?? true) === false)>Inactive</option>
            </select>
        </div>
        <div>
            <label class="home-label">Sort order</label>
            <input type="number" name="sort_order" value="{{ old('sort_order', $item?->sort_order ?? 0) }}" class="home-input">
        </div>
    </div>
</section>