@php
    $featuredId = old('featured_image_id', $item?->featured_image_id);
    $featuredPreview = $item?->featuredImage?->url();
@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">Title, URL slug, and category for this 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 Services">
            @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-services">
            @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Category</label>
            <select name="category_id" class="home-select">
                <option value="">Uncategorized</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected((string) old('category_id', $item?->category_id) === (string) $category->id)>
                        {{ $category->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="home-label">Icon key</label>
            <input type="text" name="icon" value="{{ old('icon', $item?->icon) }}" class="home-input" placeholder="Optional icon identifier">
        </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">Summary appears in cards and meta fallbacks; content is the full page body.</p>
    </div>
    <div>
        <label class="home-label">Summary</label>
        <textarea name="summary" rows="3" class="home-textarea" placeholder="Short pitch for listings and previews">{{ old('summary', $item?->summary) }}</textarea>
    </div>
    <div>
        <label class="home-label">Content</label>
        <textarea name="content" rows="12" class="home-textarea" placeholder="Full service page content (HTML or markdown as used on the front end)">{{ old('content', $item?->content) }}</textarea>
    </div>
</section>

<section id="media" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Featured image</h3>
        <p class="text-xs text-slate-500">Used in listings, cards, and as a social fallback when OG image is empty.</p>
    </div>
    <x-admin.media-picker
        mode="id"
        name="featured_image_id"
        :value="$featuredId"
        label="Featured image"
        help="Upload or pick from the Media Library."
        :preview-url="$featuredPreview"
    />
</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 and ordering in the services catalog.</p>
    </div>
    <div class="home-field-grid">
        <div>
            <label class="home-label">Status</label>
            <select name="status" class="home-select" required>
                <option value="draft" @selected(old('status', $item?->status ?? 'draft') === 'draft')>Draft</option>
                <option value="published" @selected(old('status', $item?->status ?? 'draft') === 'published')>Published</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>