{{-- Hero & brending samo za /beauty — PUT admin.homepage.beauty.brand, beauty.homepage.* --}}
<details id="beauty-brand" class="pilates-acc scroll-mt-24 max-w-4xl mb-4 rounded-2xl border border-border/80 border-s-4 border-s-rose-900/25 bg-card overflow-hidden">
    <summary class="flex cursor-pointer items-start justify-between gap-4 px-5 py-4 sm:px-6 sm:py-5 text-left transition-colors hover:bg-gradient-to-r hover:from-rose-50/50 hover:to-transparent">
        <div class="flex min-w-0 flex-1 gap-4">
            <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-rose-100 to-rose-50/80 text-rose-900/80 shadow-sm ring-1 ring-rose-200/55" aria-hidden="true"><i class="fas fa-image text-lg"></i></span>
            <div class="min-w-0 pt-0.5">
                <h2 class="text-base font-semibold text-foreground tracking-tight">{{ __('app.homepage_studio_nav_brand') }} <span class="text-xs font-normal text-foreground/50">(Beauty)</span></h2>
                <p class="text-sm text-foreground/65 mt-1.5 max-w-prose leading-relaxed">{{ __('app.homepage_studio_brand_title') }}</p>
            </div>
        </div>
        <span class="pilates-acc-chevron-btn flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted/60 text-foreground/50 transition-colors">
            <i class="fas fa-chevron-down pilates-acc-chevron text-xs" aria-hidden="true"></i>
        </span>
    </summary>
    <div class="pilates-acc-body border-t border-border/60 px-5 py-7 sm:px-6 sm:py-8 space-y-6">
        <div class="grid sm:grid-cols-3 gap-3">
            <div class="rounded-lg border border-border/70 bg-muted/15 p-3 text-center">
                <p class="text-[10px] font-semibold uppercase tracking-wide text-foreground/55 mb-2">Desktop</p>
                <div class="aspect-[16/10] rounded-md bg-muted/40 overflow-hidden flex items-center justify-center">
                    @if(!empty($heroDesktopPreviewUrl ?? ''))
                        <img src="{{ $heroDesktopPreviewUrl }}" alt="" class="max-h-28 w-full object-contain" />
                    @else
                        <span class="text-[10px] text-foreground/40">—</span>
                    @endif
                </div>
            </div>
            <div class="rounded-lg border border-border/70 bg-muted/15 p-3 text-center">
                <p class="text-[10px] font-semibold uppercase tracking-wide text-foreground/55 mb-2">Mobile</p>
                <div class="aspect-[16/10] rounded-md bg-muted/40 overflow-hidden flex items-center justify-center">
                    @if(!empty($heroMobilePreviewUrl ?? ''))
                        <img src="{{ $heroMobilePreviewUrl }}" alt="" class="max-h-28 w-full object-contain" />
                    @else
                        <span class="text-[10px] text-foreground/40">—</span>
                    @endif
                </div>
            </div>
            <div class="rounded-lg border border-border/70 bg-muted/15 p-3 text-center">
                <p class="text-[10px] font-semibold uppercase tracking-wide text-foreground/55 mb-2">Logo</p>
                <div class="h-[7.5rem] rounded-md bg-muted/40 overflow-hidden flex items-center justify-center">
                    @if(!empty($headerLogoPreviewUrl ?? ''))
                        <img src="{{ $headerLogoPreviewUrl }}" alt="" class="max-h-20 max-w-full object-contain" />
                    @else
                        <span class="text-[10px] text-foreground/40">—</span>
                    @endif
                </div>
            </div>
        </div>
        <form method="POST" action="{{ route('admin.homepage.beauty.brand') }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @method('PUT')
            @php
                $bkDesk = \App\Services\HomepageDataService::KEY_BEAUTY_HERO_DESKTOP;
                $bkMob = \App\Services\HomepageDataService::KEY_BEAUTY_HERO_MOBILE;
                $bkLogo = \App\Services\HomepageDataService::KEY_BEAUTY_HEADER_LOGO;
            @endphp
            <input type="hidden" name="hero_image_desktop_path" value="{{ old('hero_image_desktop_path', $settings[$bkDesk] ?? '') }}" />
            <input type="hidden" name="hero_image_mobile_path" value="{{ old('hero_image_mobile_path', $settings[$bkMob] ?? '') }}" />
            <input type="hidden" name="header_logo_path" value="{{ old('header_logo_path', $settings[$bkLogo] ?? '') }}" />
            <div class="grid sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.homepage_studio_hero_new_desktop') }}</label>
                    <input type="file" name="hero_desktop" accept="image/*" class="w-full text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.homepage_studio_hero_new_mobile') }}</label>
                    <input type="file" name="hero_mobile" accept="image/*" class="w-full text-sm" />
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-foreground/70 mb-1">{{ __('app.homepage_studio_header_logo') }}</label>
                <input type="file" name="header_logo" accept="image/*" class="w-full text-sm" />
            </div>
            <p class="text-xs text-foreground/55">{{ __('app.homepage_visual_hero_upload_hint') }}</p>
            <div class="border-t border-border/60 pt-4 grid sm:grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_title_sr') }}</label>
                    <input type="text" name="logo_showcase_title_sr" value="{{ old('logo_showcase_title_sr', $settings['beauty.homepage.logo_showcase_title_sr'] ?? '') }}" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_title_en') }}</label>
                    <input type="text" name="logo_showcase_title_en" value="{{ old('logo_showcase_title_en', $settings['beauty.homepage.logo_showcase_title_en'] ?? '') }}" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_sub_sr') }}</label>
                    <textarea name="logo_showcase_subtitle_sr" rows="2" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm">{{ old('logo_showcase_subtitle_sr', $settings['beauty.homepage.logo_showcase_subtitle_sr'] ?? '') }}</textarea>
                </div>
                <div>
                    <label class="block text-xs font-medium text-foreground/70">{{ __('app.homepage_studio_showcase_sub_en') }}</label>
                    <textarea name="logo_showcase_subtitle_en" rows="2" class="mt-1 w-full rounded-md border border-border px-3 py-2 text-sm">{{ old('logo_showcase_subtitle_en', $settings['beauty.homepage.logo_showcase_subtitle_en'] ?? '') }}</textarea>
                </div>
            </div>
            @error('hero_desktop')<p class="text-sm text-red-600">{{ $message }}</p>@enderror
            <button type="submit" class="btn btn-primary px-6 py-2.5"><i class="fas fa-save mr-2"></i>{{ __('app.save_changes') }}</button>
        </form>
    </div>
</details>