{{-- WooCommerce-style per-image SEO fields --}}
@php
    $prefix = $prefix ?? 'seo';
    $alt    = $values['alt_text'] ?? $values['alt'] ?? '';
    $title  = $values['title'] ?? '';
    $caption = $values['caption'] ?? '';
    $description = $values['description'] ?? '';
@endphp
<div class="img-seo-fields border rounded bg-light p-2 mt-2">
    <div class="small fw-bold text-success mb-2"><i class="fas fa-search me-1"></i>Image SEO</div>
    <div class="mb-2">
        <label class="form-label small mb-1">Alt Text</label>
        <input type="text" name="{{ $prefix }}[alt_text]" class="form-control form-control-sm img-seo-alt"
               value="{{ $alt }}" placeholder="Describe the image for search engines">
        <small class="text-muted">Used in &lt;img alt=""&gt; — important for Google Images</small>
    </div>
    <div class="mb-2">
        <label class="form-label small mb-1">Title</label>
        <input type="text" name="{{ $prefix }}[title]" class="form-control form-control-sm"
               value="{{ $title }}" placeholder="Image title (tooltip)">
    </div>
    <div class="mb-2">
        <label class="form-label small mb-1">Caption</label>
        <input type="text" name="{{ $prefix }}[caption]" class="form-control form-control-sm"
               value="{{ $caption }}" placeholder="Optional caption">
    </div>
    <div class="mb-0">
        <label class="form-label small mb-1">Description</label>
        <textarea name="{{ $prefix }}[description]" class="form-control form-control-sm" rows="2"
                  placeholder="Longer description for media library / schema">{{ $description }}</textarea>
    </div>
</div>